首页 HTML

# HTML 表格的使用

# 表格基本标签介绍

基本标签 :

标签名说明
table表格整体，可用于包裹多个 tr
tr表格每行，可用于包裹 td
td表格单元格，可用于包裹内容

注意点 :

  • 标签的嵌套关系 : table > tr > td

# 表格相关属性

常见相关属性 :

属性名属性值效果
border数字边框宽度
width数字表格宽度
height数字表格高度
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<table border="1" width="600" height="400">
    <tr>
        <td>姓名</td>
        <td>成绩</td>
        <td>评语</td>
    </tr>

    <tr>
        <td>小哥哥</td>
        <td>100分</td>
        <td>小哥哥真帅气</td>
    </tr>

    <tr>
        <td>小姐姐</td>
        <td>100分</td>
        <td>小姐姐真漂亮</td>
    </tr>

    <tr>
        <td>总结</td>
        <td>郎才女貌</td>
        <td>郎才女貌</td>
    </tr>
</table>

注意点 :

  • 实际开发中针对于央视效果推荐用 css 设置

# 表格标题和表头单元格标签

其他标签 :

标签名名称说明
caption表格大标题表示表格整体大标题，默认在表格整体顶部剧中位置显示
th表头单元格表示一列小标题，通常用于表格第一行，默认内部文字加粗并剧中显示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<table border="1" width="600" height="400">
    <caption><strong>学生成绩单</strong></caption>
    <tr>
        <th>姓名</th>
        <th>成绩</th>
        <th>评语</th>
    </tr>

    <tr>
        <td>小哥哥</td>
        <td>100分</td>
        <td>小哥哥真帅气</td>
    </tr>

    <tr>
        <td>小姐姐</td>
        <td>100分</td>
        <td>小姐姐真漂亮</td>
    </tr>

    <tr>
        <td>总结</td>
        <td>郎才女貌</td>
        <td>郎才女貌</td>
    </tr>
</table>

# 表格的结构标签 (了解)

作用：让表格的内容结构分组，突出表格的不同部分 (头部，主体，底部), 使语义更加清晰

结构标签 :

标签名名称
thead表格头部
tbody表格主体
tfoot表格底部
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<table border="1" width="600" height="400">
    <caption><strong>学生成绩单</strong></caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>成绩</th>
            <th>评语</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>小哥哥</td>
            <td>100分</td>
            <td>小哥哥真帅气</td>
        </tr>

        <tr>
            <td>小姐姐</td>
            <td>100分</td>
            <td>小姐姐真漂亮</td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <td>总结</td>
            <td>郎才女貌</td>
            <td>郎才女貌</td>
        </tr>
    </tfoot>
</table>

注意点 :

  • 表格结构标签内部用于包裹 tr 标签
  • 表格的结构标签可以省略

# 合并单元格

合并单元格步骤 :

  1. 明确合并哪几个单元格

  2. 通过左上原则，确定保留谁删除谁

    • 上下合并 —— 只保留最上的，删除其他
    • 左右合并 —— 只保留最左的，删除其他

  3. 给保留的单元格设置：跨行合并 (rowspan) 或者跨列合并 (colspan)

    属性名属性值说明
    rowspan合并单元格的个数跨行合并，跨多行的单元格垂直合并
    colspan合并单元格的个数跨列合并，跨多列的单元格水平合并

注意点 :

  • 只有同一个结构标签中的单元格才能合并，不能跨结构标签合并 (不能跨: thead, tbody, tfoot)