10 HTML table-related tags

HTML has 10 table-related tags. Here is a list with a brief introduction, but first, the document should be properly defined in HTML 4.01/XHTML 1 or HTML 5:

• <caption> defines the table title (4, 5)
• <col> defines attributes for table columns (4, 5)
• <colgroup> defines the grouping of table columns (4, 5)
• <table> defines a table (4, 5)
• <tbody> defines the table body (4, 5)
• <td> defines a cell (4, 5)
• <tfoot> defines the footer of the table (4, 5)
• <th> defines the table header (4, 5)
• <thead> defines the table header (4, 5)
• <tr> defines the rows of the table (4, 5)

A basic table structure is as follows:

It contains a title, header, body, and footer. The correct order of HTML elements is:

1. <table>
2. <caption>
3. <thead>
4. <tfoot>
5. <tbody>

You can also use <col> and <colgroup> to define table columns or group columns:

1. <table>
2. <caption>
3. <colgroup>
4. <col>
5. <thead>
6. <tfoot>
7. <tbody>

The following is an example of a correct table structure:

Some tips about tables

• According to the explanation and usage of w3schools, in a table definition, the <tfoot> element must appear before the <tbody> so that the browser can render the table footer before receiving all the data. Additionally, if it is not in this order, it will fail W3C HTML4 and XHTML validation, no matter which DTD you declare.
• In HTML 4.01, the table attributes align and bgcolor were deprecated, so there are no longer any table attributes supported in HTML 5 (in fact, the "align" and "bgcolor" attributes are no longer supported in XHTML 1.0 Strict DTD);
• All major browsers support the <colgroup> tag, but Firefox, Chrome, and Safari only support the span and width attributes of the colgroup element;
• empty-cells:show|hide in CSS can set whether empty cells display borders. Note that this needs to be set in the table rather than in the td/th element . This problem is more likely to occur in IE6;
• border-collapse:collapse | separate in CSS can set whether the borders of the table are merged into one border;
• The border-spacing property in CSS is equivalent to the cellspacing property of table.

In order to achieve the currently advocated development model of separation of presentation and structure, Front-end Observation recommends that all presentation-related things on the page be controlled by CSS, instead of using HTML's own attributes to control the presentation of the page. Tables are the most easily overlooked ones.

For more details about tables, see the W3C document: w3 Introduction to tables

Finally, I leave you with a very simple question. Which CSS property is equivalent to the cellpadding property of the table?