HTML Tutorial: 10 table-related tags for HTML

Author：Eve Cole Update Time：2025-05-23 01:00:03

Based on some of my recent practices and after communicating with some readers about the use of html forms, I decided to write this article. Overall, I noticed that they had a preconceived disgust with the use of tables due to misleading information. In fact, many people will say that I see the statement that I should never use forms, but this is absolutely wrong! This suggestion is just for using html tables to define the layout of the web page, but the tables are perfect for convenient arrangement of rows and columns of data information, and if you have to display table column data on a page, you have to use them! why not? However, in this case some people ignore the existence of certain html tags used for tables and do not know how to use them correctly.

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

<caption> Define the table title (4, 5)
<col> Define attributes for columns of a table (4, 5)
<colgroup> Defines grouping of table columns (4, 5)
<table> Define table(4, 5)
<tbody> Define the table body (4, 5)
<td> Define a cell (4, 5)
<tfoot> Define the table note (bottom) (4, 5)
<th> Define the table header (4, 5)
<head> 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, head, body and bottom. The correct order of html elements is:

<table>
<caption>
<head>
<tfoot>
<tbody>

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

<table>
<caption>
<colgroup>
<col>
<head>
<tfoot>
<tbody>

Here is a correct example of the table structure:

 <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></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 figure below:

Some tips on the form

According to the explanation and usage of w3schools, in a table definition, the <tfoot> element must appear before <tbody> , so that the browser can render the table notes before accepting all data. Also, if it is not this order, it will not be validated by W3C's html4 and xhtml, no matter which kind of dtd you declare.
In html 4.01, the align and bgcolor properties of the table are not favored, so no table attributes are supported in html 5 (in fact, the align and bgcolor properties are no longer supported in xhtml 1.0 strict dtd);
All mainstream 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 an empty cell displays a border. Note that this needs to be set in table instead of td/th . This problem is more likely to be encountered in ie6;
border-collapse:collapse | separate in css can set whether the border of a table is merged into a border;
The border-spacing property in css is equivalent to the cellspacing property of the table.

In order to realize the development model of performance and structure separation advocated by now, front-end observation recommends that all things related to the presentation layer in the page be controlled by CSS, and do not use the attributes provided by html to control the performance of the page, and table is the easiest to be ignored.

For more details about tables, please check the w3c documentation: w3 introduction to tables

Finally, I will leave a very simple question for you. Which attribute of css is equivalent to the cellpadding attribute of table?