Basic learning tutorial of table tag in HTML

Table label composition
The table in HTML is composed of the <table> tag, and the browser will interpret the tag as a table. The rows in a table are defined using the <tr> tag. The <tr> tag is a subclass of the <table> tag. Setting several <tr> tags can divide the table into several rows. The <td> tag is used to define the columns of a table. The <td> tag is a subclass of the <tr> tag, so each row needs to have a corresponding number of <td> tags to divide the columns and form a complete table.
The label combination relationship of the table is:

You can insert any HTML tags such as text, pictures, lists, paragraphs, forms, horizontal lines, etc. into the table, and it can even be used for page layout. However, the table layout has problems such as excessive code redundancy, non-compliance with HTML standards, and search engine unfriendliness. Therefore, it is recommended that you try not to use tables for page layout unless a table is really needed on the page.
The remaining <th>, <thead>, <tbody> and <tfoot> are rarely used due to poor browser support for them.

Table and border properties
The table itself can define the border attribute to determine the width of the table border. The value of this attribute is displayed in digital units by default. For example, border="1" has a value in px. Note: do not add any units after the border value, otherwise the value cannot be correctly recognized.

Table header
In a <table>, you can set the table header using the <th> tag. The <th> tag of the table header is at the same level as the <tr> tag, and the table header usually appears before the <tr> tag. For a table, a header is not necessary and can be inserted as needed. The text within the <th> tag will be automatically bolded.

Merging cells
Cell merging is divided into vertical merging and horizontal merging. When merging, you need to determine whether there are corresponding numbers of cells in other rows and columns.
The colspan attribute is used to merge cells horizontally. Its value is a number that determines the number of cells to be merged. For example, colspan="2" means merging two cells to the right.
The rowspan attribute is used to merge cells vertically. It is the same as the attribute for horizontal merging. The number of cells to be merged is also determined in numerical form. For example, rowspan="2" means merging two cells downwards.
Example demonstration code:

Example demonstration effect:

Cell margins
Tables have padding functionality similar to the padding style. By defining the cellpadding attribute in the <table> tag, you can set the padding for all <td> elements under it. The cellpadding attribute parameter value is a number that determines the size of the margin. For example, cellpadding="10" means that the inner margin of all <tr> tags in the table is 10px.

Cell Spacing
The spacing between cells is to set the outer margin of the <tr> tag, which is similar to the margin in the CSS style. By defining the cellspacing attribute in the <table> tag, the outer margin is set for all td elements under its tag. This attribute also determines the size of the margin in the form of a number. For example, cellspacing="10" means that the margin of all <tr> tags in this table is 10px.

Set a background for the table
The table can set any image as the background for the table or cell through the background property. Its usage is very similar to the background in CSS. By setting the corresponding image path for background, the cell can display the corresponding image. For example, background = "table_bg.gif"

Alignment of table contents
Table alignment is divided into horizontal alignment and vertical alignment. They are the align attribute and the valign attribute. Inserting these two attributes into the corresponding <td> tags can complete the alignment of text or images in the cell.
There are three values ​​for horizontal alignment: left, center, and right. There are also three values ​​for vertical alignment: top, middle, bottom, and baseline.
The baseline alignment may not be understood literally. In fact, the baseline alignment means that the text appears in the upper middle part of the table instead of the center. If the text is not large, the effect is similar to middle, but slightly higher than middle.

PS: table-layout statement in CSS
This statement can be used to specify the style of table display, such as

It can take three values:
* auto (default)
* fixed
* inherit
auto means the size of the cell is determined by its content. Fixed means that the size of the cell is fixed and is determined by the first cell with a specified size. If no cell has a specified size, it is determined by the default size of the first cell. If the content in the cell exceeds the size of the cell, it is controlled by the overflow command in CSS. Microsoft claims that using this command, tables can be displayed 100 times faster.
By the way, in order to speed up the display of the table, it is best to specify the width and height of the table in CSS (or the width and height attributes of the table tag) in advance.