Parse Table tags, don't confuse td, th, tr anymore!

Summary

I have never mastered the Table tag in HTML very well, and often confuse td, th, and tr. Although native HTML is rarely used in current development, and front-end components written by others are basically used, table components written by others are generally designed according to the levels of the native table. [Recommended: HTML video tutorial]

So let’s sum it up today!

Basic structure

##td(table data cell)data Cell, the specific data is placed in this label tfoot represents the table footer colspan represents column merging; rowspan represents row merging

Tag	Description	Common attributes
table	Top-level label of the table	border: border width; width: table width; align: alignment of table data; cellpadding: indicates the distance between the content in each cell and the border. The larger the value, the greater the visual experience of the table; cellspacing means that each The distance between adjacent cells
thead	The parent label of the header
tr(table row)	The parent label of the column name, generally there is only one tr in a thead, because generally a table only has one row name
th(table header cell)	represents the header cell, and the data inside is the column name
tbody	Parent tag of the form data part

Case

Copy after login

                                                                                                                                                           

项目	单价/元	数量/斤	金额/元
白菜	1.00	3	3.00
西瓜	0.50	10	5.00
合计:8.00

Summary

• Except for th and td that can specify specific data, the others are basically similar to parent tags that cannot specify specific content. th specifies the column name in the header, and td specifies the specific data value

• table is mainly divided into three parts, namely the header thead, the table data body tbody, and the table footer tfoot

• The parent tags of th and td are both tr, which means that th and td must be placed in tr

• thead specifies the data using th. tbale and tfoot specify data using td

The above is the detailed content of Parse Table tags, don't confuse td, th, tr anymore!. For more information, please follow other related articles on the PHP Chinese website!