首页 > HTML5教程 > html表格标签的用法

表格的组成结构

表格的组成结构有:表格标题,表格的页眉信息、表格的主体、表格的页脚

表格标题 caption标签

定义了表格的标题,在整个表格的第1行,一个表格有一个表格标题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html> 
<head>
    <title>表格www.yuqingqi.com</title>
</head>
<body>
    <table border="1">
    <caption>web开发</caption>
    <tr>
        <th>语言</th>
        <th>学习</th>
    </tr>
    <tr>
        <td>html</td>
        <td>前台</td>
    </tr>
    <tr>
        <td>php</td>
        <td>后台</td>
    </tr>
</table>
</body>
</html>

 

表格的页眉信息 thead标签

定义表格的页眉,th标签定义表格的表头,table header(表头单元格)

表格的主体 tbody标签

定义表格的主体,tr标签定义表格的行,table row(表格一行)表示行的开始和结束,td标签定义表格单元,table data cell(表格单元格)表示单元格的开始和结束

表格的页脚  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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html> 
<head>
    <title>表格www.yuqingqi.com</title>
</head>
<body>
    <table>
        <caption>学习成绩表</caption>
        <thead>    
            <tr>
                <th>姓名</th>
                <th>html</th>
                <th>php</th>
                <th>js</th>
            <tr>
        </thead>
        <tbody>
            <tr>
                <td>学生1</td>
                <td>80</td>
                <td>80</td>
                <td>80</td>
            </tr>
            <tr>
                <td>学生2</td>
                <td>90</td>
                <td>90</td>
                <td>90</td>
            </tr>
            <tr>
                <td>学生3</td>
                <td>100</td>
                <td>100</td>
                <td>100</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>平均</td>
                <td>90</td>
                <td>90</td>
                <td>90</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>
关闭
感谢您的支持,我会继续努力!
扫码打赏,建议金额1-10元


提醒:打赏金额将直接进入对方账号,无法退款,请您谨慎操作。