10 table related tags in HTML

Time:2021-9-21

In fact, many people will say “I see that forms should never be used”, but this is absolutely wrong! This suggestion is only aimed at using HTML tables to define the layout of web pages, but the tables are perfect in convenient arrangement of data information rows and columns, and if you have to display table and column data on a page, you have to use them! Why not? However, in this case, some people ignore the existence of some HTML tags for table and don’t know how to use them correctly.

HTML has 10 table related tags. The following is a list with an introduction, but first, the document should be correctly defined under HTML 4.01/xhtml 1 or HTML 5:

  • < caption > define table title (4, 5)
  • < col > define attributes for table columns (4, 5)
  • < colgroup > define the grouping of table columns (4, 5)
  • < Table > define table (4, 5)
  • < tbody > define table body (4, 5)
  • <td>Define a cell (4, 5)
  • < tFoot > define table notes (bottom) of the table (4, 5)
  • < th > define the table header (4, 5)
  • < thead > define the table header (4, 5)
  • < tr > define the rows of the table (4, 5)

A basic table structure is as follows:

重新认识table

It contains a title, head, body, and bottom. 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 or group columns in a table:

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

The following is an example of a correct table structure:

Copy code

The code is as follows:

<table border=”1″>
<caption>Table caption here</caption>
<colgroup span=”1″ style=”background:#DEDEDE;”/>
<colgroup span=”2″ style=”background:#EFEFEF;”/>
<!– Table Header–>
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
</tr>
</thead>
<!– Table Footer–>
<tfoot>
<tr>
<td>Foot 1</td>
<td>Foot 2</td>
<td>Foot 3</td>
</tr>
</tfoot>
<!– Table Body–>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
</tbody>
</table>

The results in the browser are shown in the following figure:
重新认识table

Some skills about tables

  • According to the explanation and usage of W3Schools, in a table definition,The < tFoot > element must appear before < tbody >In this way, the browser can render the annotations before receiving all the data. In addition, if it is not in this order, it willNoThrough W3C’s html4 and XHTML validation, no matter what kind of DTD you declare.
  • In HTML 4.01, tablealignandbgcolorAttribute is not supported, so any table attribute is no longer supported in HTML 5 (in fact, the “align” and “bgcolor” attributes are no longer supported in XHTML 1.0 strict DTD);
  • All mainstream browsers support < colgroup > tags, but Firefox, chrome and safari only support the span and width attributes of colgroup elements;
  • Empty cells: Show hide in CSS can set whether empty cells display borders. Attention, thisIt needs to be set in table instead of TD / th。 This problem is easy to encounter in IE6;
  • Border collapse: collapse | separate in CSS can set whether the table borders are merged into one border;
  • The border spacing attribute in CSS is equivalent to the cellspacing attribute of table.

In order to realize the development mode of separation of performance and structure advocated now, the front-end observation suggests that all things related to the performance layer in the page should be controlled by CSS, and the performance of the page should not be controlled by HTML’s own attributes, and table is the most easily ignored one.

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

Finally, a very simple question is left for you. Which attribute of CSS is equivalent to the celladding attribute of table?