HTML中的表格

悠悠 2024-04-06 12:48 32阅读 0赞

**目录**

1、表的基本语法

2、单元格合并

3、th标签

4、thead、tbody、tfoot标签

--------------------

### 1、表的基本语法 ###

<table  border="像素"  width="像素/百分比"  height='200px'   align='center'>   
    
      
    
        <tr align='center'>     
    
            <td align='center'></td>    
    
            <td></td>
    
        </tr>
    
        <tr>    
    
            <td></td>
    
            <td></td>
    
        </tr>
    
    </table>

### 2、单元格合并 ###

列合并 cospan='合并的列数'

行合并 rowspan='合并的的行数'

<table border="1px">
    
        <tr>
    
            <td>1</td>
    
            <td colspan="2">xy</td>
    
        </tr>
    
        <tr>
    
            <td>1</td>
    
            <td>1</td>
    
            <td rowspan="2">KINGford</td>
    
        </tr>
    
        <tr>
    
            <td>1</td>
    
            <td>1</td>
    
        </tr>
    
    </table>

效果如下：

![9d215a530a534c24b2d2a0459015b8d9.png][]

### 3、th标签 ###

作用：被th修饰的标签会自动加粗居中

<table border = "1px" width="50%">
    
        <tr>
    
            <th>员工编号</th>
    
            <th>员工姓名</th>
    
            <th>员工薪资</th>
    
        </tr>
    
        <tr>
    
            <td>7369</td>
    
            <td>SMITH</td>
    
            <td>800.0</td>
    
        </tr>
    
        <tr>
    
            <td>7370</td>
    
            <td>KING</td>
    
            <td>8000.0</td>
        
        </tr>
    
    </table>

效果如下：

![03cfa6b360dc40a18204d76e90540339.png][]

### 4、thead、tbody、tfoot标签 ###

这三个标签是为了方便JavaScript的使用，它们将表格分成三部分。

<table border = "1px" width="50%">
    
        <thead>
    
            <tr>
    
                <th>员工编号</th>
    
                <th>员工姓名</th>
    
                <th>员工薪资</th>
    
            </tr>
    
        </thead>
    
    
    
        <tbody>
    
            <tr>
    
                <td>7369</td>
    
                <td>SMITH</td>
    
                <td>800.0</td>
    
            </tr>
    
        </tbody>
    
    
    
        <tfoot>
    
            <tr>
    
                <td>7370</td>
    
                <td>KING</td>
    
                <td>8000.0</td>
            
            </tr>
    
        </tfoot>
    
    </table>

[9d215a530a534c24b2d2a0459015b8d9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/d0afee6196094460b7d19fd945785c90.png
[03cfa6b360dc40a18204d76e90540339.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/43005b5d507b4decb8543b1d8561af8c.png