I decided to write this article based on my recent practices and after communicating with some readers about the use of HTML tables. In general, I have noticed that due to misleading information, they have a preemptible dislike for table usage. As a matter of fact, many people will say "I have seen that tables should never be used", but this is absolutely wrong! We recommend that you use HTML tables to define the layout of web pages. However, tables are perfect for convenient arrangement of data information rows and columns, and if you must display table 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 used for tables and do not 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:
- Define table title (4, 5)
- Define attributes for columns in a table (4, 5)
- Define the grouping of table columns (4, 5)
A basic table structure is as follows:
It contains a title, header, subject, and bottom. The correct sequence of HTML elements is:
Definition table (4, 5)
Define table subjects (4, 5)
| Define a cell (4, 5) |
Define table note (bottom) (4, 5)
| Define the table header (4, 5) |
Define the table header (4, 5)
Define table rows (4, 5)
You can also use
And
To define columns or group columns in a table:
The following is an example of a correct table structure:
Table caption here
| Head 1 |
Head 2 |
Head 3 |
| Foot 1 |
Foot 2 |
Foot 3 |
| A |
B |
C |
| D |
E |
F |
The results in the browser are shown in:
Table skills
- According to the description and usage of w3schools, in a table definition,The element must appear inBeforeIn this way, the browser can present the table note before accepting all the data. OtherwiseNoThrough W3C HTML4 and XHTML verification, no matter which DTD you declare.
- In HTML 4.01AlignAndBgcolorThe attribute is not in favor of use, so no table attribute is supported in HTML 5 (in fact, "align" and "bgcolor" attributes are not supported in XHTML 1.0 Strict DTD );
- All mainstream browsers supportBut Firefox, Chrome, and Safari only support the span and width attributes of colgroup elements;
- In css, empty-cells: show | hide can be used to set whether an empty cell displays a border. Note that thisIt 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 be used to set whether the border of a table is merged into a border;
- The border-spacing attribute in css is equivalent to the cellspacing attribute of table.
In order to achieve the development mode of separation of performance and structure, we recommend that you use CSS to control all the content related to the presentation layer on the page, you do not need HTML attributes to control the page performance, but table is the easiest to ignore.
For more details about table, refer to W3C documentation: w3 Introduction to tables.
Finally, let us leave a very simple question: which attribute of CSS is equivalent to the cellpadding attribute of table?
