表格相关

HTML（超文本标记语言）中的表单是一种可以让用户输入数据并提交到服务器的交互式元素。表单由一系列表单控件组成，如文本框、单选框、复选框、下拉列表等，这些控件可以使用 HTML 表单元素 <form> 来包含和组织。

HTML5 中的表格是一种用来展示数据的元素，由一系列行和列组成，每个单元格可以包含文本、图像、链接等内容。HTML5 中的表格包括以下几个元素：

<table>：定义一个表格。
<tr>：定义表格中的一行。
<th>：定义表格中的表头单元格，通常用于显示列标题。
<td>：定义表格中的一个单元格。
<caption>：定义表格的标题。
<thead>：定义表格的表头部分。
<tbody>：定义表格的主体部分。
<tfoot>：定义表格的页脚部分。

HTML5 中的表格可以使用 CSS 样式进行样式修饰，同时也支持一些 JavaScript 插件和库来实现更加复杂的功能，如排序、筛选、分页等。

需要注意的是，表格只应该用于展示数据，而不应该用于网页布局。对于网页布局，应该使用 CSS 布局和网格来实现。

表格相关标签

table：表格
tr：表格中的一行
td：表格中的单元格
caption：表格标题
th：表头单元格

表头示例

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title>表头单元格</title>
    <!--这里使用CSS为表格加上边框-->
    <style type="text/css">
        table,tr,td,th{border:1px solid silver;}
    </style>
</head>
<body>
    <table>        
        <caption>考试成绩表</caption>
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>英语</th>
            <th>数学</th>
        </tr>
        <tr>
            <td>小明</td>
            <td>80</td>
            <td>80</td>
            <td>80</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>90</td>
            <td>90</td>
            <td>90</td>
        </tr>
        <tr>
            <td>小杰</td>
            <td>100</td>
            <td>100</td>
            <td>100</td>
        </tr>
    </table>
</body>
</html>

语义化

一个完整的表格包含：table、caption、tr、th、td。为了更进一步地对表格进行语义化，HTML引入了thred、tbody和tfoot这3个标签。

thead、tbody和tfoot把表格分为3个部分：表头、表身、表脚。

语义化示例

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title>表格语义化</title>
    <!--这里使用CSS为表格加上边框-->
    <style type="text/css">
        table,tr,td,th{border:1px solid silver;}
    </style>
</head>
<body>
    <table>
        <caption>考试成绩表</caption>
        <thead>    
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>英语</th>
                <th>数学</th>
            <tr>
        </thead>
        <tbody>
            <tr>
                <td>小明</td>
                <td>80</td>
                <td>80</td>
                <td>80</td>
            </tr>
            <tr>
                <td>小红</td>
                <td>90</td>
                <td>90</td>
                <td>90</td>
            </tr>
            <tr>
                <td>小杰</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>

表格相关

# 表格相关

# 表格相关标签

# 语义化

表格相关

表格相关标签

语义化