(1) Let's talk about the <tr> tag first
<table> is the upper level tag of
<tr> <tr> must be in a <table></table>, it cannot be used alone, it is equivalent to the attribute tag of <table>.
<tr>...</tr> Definition A row of tags, multiple groups of cells defined by <td> or <th> tags can be created within a group of row tags.
<table> indicates a table, <tr> indicates a row in the middle of the table
<td> indicates a column in the row, which needs to be nested in the middle of <tr></tr>
Here is an example: (two rows and two columns)
- <table>
- <tr>
- <td>Name</td>
- <td>数量</td>
- </tr>
- </table>
(2) <th> tag
<th> needs to be nested in <tr>, and <tr> is nested in <table>.
<th>...</th> defines the header cell. The text in the table will appear in bold. <th> and <td> also mark a cell, the difference is that the text in the cell marked by <th> appears in bold, which can be seen as:
<th>Website</th> The display effect is equivalent to <td><b>text</b></td>
When used, the <th> tag must be placed inside the <tr> tag
(3) <td> tag
<td>...</td> defines cell tags, a group of <td> tags will create a cell, <td> tags must also be placed inside <tr> tags.
<th> is the table title, the attribute summary is the abstract, the <caption> tag is the header description, the <thead> tag is the table header, the <tbody> tag is the table body content, and the <tfoot> tag is the table tail.
Tip: Some of the differences that are often encountered in common use:
<th> is not only bold, but also centered
<caption> is also centered, and if the table has a border, the caption is not within the border.
Valid tags contained within the tfood element are:
td
th
tr
Any given table object is only Can define a tfoot.
The basic code format for making a table:
- <table>
- <caption></caption>
- <thead>
- <tr>
- <th></th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td></td>
- </tr>
- </tbody>
- <tfoot>
- <tr>
- <td></td>
- </tr>
- </tfoot>
- </table>