The role of the table
In the past, web developers used to use tables to complete the entire web page layout, and the structure nesting was complex and difficult to modify and maintain. Now it has been replaced by DIV+CSS layout.
Now, for displaying, displaying data. (can easily and quickly find or present different types of data and the relationship between them)
**NOTE:** HTML tables should now be used to display tabular data, not to implement web page layouts!
### 3. Form basic label
- table
- 语法: <table></table>
- Role: define the table
- tr
- Syntax: <tr></tr>
- Function: define the rows in the table
- td
- Syntax: <td></td>
- Role: define table data (table data)
Cells can contain text, pictures, lists, paragraphs, forms, horizontal lines, tables, and more.
- Default style: content horizontal left, vertical center
- th
- Syntax: <th></th>
- Role: Indicates the header cell, usually at the beginning of the row or column, defines the data type contained in the row or column
- Default style: font bold, content centered horizontally, centered vertically
The basic structure of the table is as follows:
```html
<table>
<tr>
<td>Name</td>
<td>Age</td>
</tr>
<tr>
<td>Zhang San</td>
<td>18岁</td>
</tr>
<tr>
<td>王五</td>
<td>12岁</td>
</tr>
</table>
```
### 4. Form common attributes
#### 4.1 table attributes
**grammar:**
```html
<table width="1000" height="500" border="1" cellpadding="0" cellspacing="0">
```
- width\height
- Role: define the width or height of the table
- Note: Omitting the unit defaults to px
- border
- Function: Use the border property of the table to display a table with a border.
- Note: If you do not define the border property, the table will not display the border.
- cellpadding
- Role: Define the spacing between the content and the border in the cell
- cellspacing
- Role: spacing between cells and cells
#### 4.2 td, th attributes
**grammar:**
```html
<td width="100" height="100" align="center" valign="middle">
```
- width\height
- Function: define the cell width and height
- Note: omit the unit default px
- align
- Role: Alignment of cells in the horizontal direction
- value
- left align left
- center center alignment
- right align right
- valign
- Role: the vertical alignment of cells
- value
- top alignment
- middle is centered
- bottom alignment
### 5. Table structure tags
- caption
- Syntax: <caption></caption>
- Role: define the title of the table
- Default style: centered on table
- Notice:
The caption tag must immediately follow the table tag
- thead
- Syntax: <thead></thead>
- Role: used to combine the header content of the HTML table
- tbody
- Syntax: <thead></thead>
- Role: used to combine the main content of the HTML table
- Tip: A table is allowed to contain multiple <tbody>
- tfoot
- Syntax: <tfoot></tfoot>
- Role: used to combine the footer content of HTML tables
- Summarize
- Only one title <caption> can be defined per table
- thead, tbody, and tfoot are usually used together to divide table semantics, realize step-by-step loading of long tables, or load tbody first by changing the structure order
### 6. Merge cells
- rowspan
- Role: Merge across rows
grammar:
```html
<td rowspan="2"> Phone</td>
```
- colspan
- Role: Merge across columns
grammar:
```html
<td rowspan="2"> Phone</td>
```
- Steps
1. Determine whether to merge rows or columns
2. Find the target cell and add merged attributes such as: <td rowspan="2"> Phone</td>
3. Delete redundant cells
### 7. Table summary
- Tables of undetermined width, cells adapt to content
- Only one high is recognized in the same line, and the maximum value is taken
- The same column only recognizes one width, take the maximum value
- Tables can contain other HTML tags as well as tables