HTML 表格基础

HTML 表格基础

1，表格基本结构

<table>元素，表示表格数据，即通过二维数据表来表示的信息，类似Excel表格。

<table>元素，是一组标签的组合，包括： <table>、 <tr>、 <th>、 <td>等：

• <table></table>：表格的开始标记和结束标记

• <tr></tr>：定义表格中的行，一行内可以有一个或多个单元格（ <td> 或 <th> ）。

• <th></th>：定义表格内的表头单元格，其内容默认在单元格内加粗并居中

• <td></td>：定义表格内的数据单元格，其内容默认在单元格内靠左对齐，常规字体

下面是一个简单的表格代码：

<table>
    <tr>
        <th>订单号</th>
        <th>商品</th>
        <th>价格</th>
    </tr>
    <tr>
        <td>001</td>
        <td>图书</td>
        <td>45</td>
    </tr>
    <tr>
        <td>002</td>
        <td>办公用品</td>
        <td>52</td>
    </tr>
</table>

页面显示效果如下：

2，border 属性

可以给<table>标签添加 border 属性，给表格加上边框，使其更美观易读：

<table border="1">
    ......
</table>

加上边框后的页面显示效果如下：

注意：border 属性已经被新的标准弃用，应使用 CSS 样式来设置表格的边框。

3，合并单元格

可以通过 colspan、rowspan 属性来合并相邻的单元格，属性值就是要合并的单元格的数量。

• colspan: 合并列，也就是横向合并
• rowspan：合并行，也就是纵向合并

示例代码：

<table border="1">
    <tr>
        <th>订单号</th>
        <th>商品</th>
        <th>价格</th>
    </tr>
    <tr>
        <td rowspan="2">001</td>
        <td>图书</td>
        <td>45</td>
    </tr>
    <tr>
        <!--<td></td>-->    <!--注意这里的单元格被合并了，所以要删除，否则这一行会多出一个单元格-->
        <td>办公用品</td>
        <td>52</td>
    </tr>
    <tr>
        <td>002</td>
        <td>咖啡</td>
        <td>23</td>
    </tr>
    <tr>
        <td colspan="2">总价</td>
        <td>120</td>
        <!--注意这一行原来是3个单元格，合并掉一个，所以只需2个-->
    </tr>
</table>

合并单元格后的页面显示效果如下：

4，语义化表格结构

可以给表格添加语义化标签，便于浏览器解析和脚本引用：

• <caption></caption>：表格的标题，默认在表格上方，居中
• <thead></thead>：表格的表头
• <tbody></tbody>：表格的表体（主体内容数据部分）
• <tfoot></tfoot>：表格的表尾

示例代码如下：

<table border="1">
    <caption>订单列表</caption>
    <thead>
        <tr>
            <th>订单号</th>
            <th>商品</th>
            <th>价格</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2">001</td>
            <td>图书</td>
            <td>45</td>
        </tr>
        <tr>
            <td>办公用品</td>
            <td>52</td>
        </tr>
        <tr>
            <td>002</td>
            <td>咖啡</td>
            <td>23</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">总价</td>
            <td>120</td>
        </tr>
    </tfoot>
</table>

加上添加语义化标签后的页面显示效果如下：