table标签的使用

21fanqie · 发表于 2024-7-7 13:27:01

table标签的使用

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>学习表格标签</title>
</head>
<body>
    <table border="1" summary="知识点和学习周期">
    <!--表格标题标签-->
    <caption>前端三剑客</caption>
    <!-- tr代表一行-->
    <tr>
        <!--th代表一列有字体加粗的效果-->
        <th>知识点</th>
        <th>重要程度</th>
        <th>难度</th>
        <th>学习周期</th>
    </tr>
    <tr>
        <!--td代表一列字体为正常效果-->
        <td>html</td></td>
        <td>5星</td>
        <td>3星</td>
        <td>7天</td>
    </tr>  
    <tr>
        <td>css</td>
        <td>5星</td>
        <td>4星</td>
        <td>10天</td>
    </tr>
    <tr>
        <td>js</td>
        <td>5星</td>
        <td>5星</td>
        <td>20天</td>
    </tr>
</table>
</body>
</html>

解释：

创建表格的四个元素：table、tr（行）、th（列）、td（单元格）

1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。

2、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。

3、<th>…</th>：表格的头部的一个单元格，表格表头。其实就是列标题，会自动居中和加粗。

4、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。

5、表格中列的个数，取决于一行中数据单元格的个数。

6、border属性可以为表格添加边框，属性值为数字。

7、summary是给搜索引擎看的，用于解释表格的用途

注意：

1、table标签用来定义整个表格，为双标签，必须有结束标签。

2、table标签里面可以放caption标签和tr标签。

3、caption标签用来定义表格的标题。

4、tr标签用来设置表格的行，tr里面只能放th或者td标签，一组tr标签代表一行。

5、th用来设置表格的标题，会加粗居中显示。也就是th标签中的文本默认为粗体并且居中显示。

6、td用来设置表格的列，一组td标签代表一列。

7、table表格在没有添加border属性之前, 在浏览器中显示是没有表格线的。

登录/注册后可看大图

第一个tr中包含th，第一行的th会自动加粗

第二个及以下的tr中，包含td

21fanqie · 发表于 2024-7-7 14:02:47

<thead>标签定义表格头部
<tbody>标签来定义表格的内容
<tfoot>来定义表格的底部

其结构是这样：

<table>  
    <thead> <!-- 表格头部 -->  
        <tr>  
            <th></th>  
        </tr>  
    </thead>  
    <tbody> <!-- 表格主体 -->  
        <tr>  
            <td></td>  
        </tr>  
        <!-- 可以在这里继续添加更多的数据行 -->  
    </tbody>  
    <tfoot> <!-- 表格尾部，通常用于汇总信息 -->  
        <tr>  
            <th></th>  
        </tr>  
        <!-- 也可以在这里添加其他汇总信息或脚注 -->  
    </tfoot>  
</table>

表格第一行为表头数据,用<thead>标签包裹,
中间的科目和分数为表格的主体内容,用<tbody>标签包裹,
最后的总分用<tfoot>标签包裹。

1、<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。

2、<tbody>…</tbody>：如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。（通俗理解table 可以按结构一块块的显示，不在等整个表格加载完后显示。）

3、<tfoot> 元素用于对 HTML 表格中的表注（页脚）内容进行分组。

4、thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>成绩表</title>  
    <style>  
        table, th, td {  
            border: 1px solid black;  
            border-collapse: collapse;  
        }  
        th, td {  
            padding: 10px;  
            text-align: left;  
        }  
        thead th {  
            background-color: #f2f2f2; /* 给表头添加背景色以区分 */  
        }  
    </style>  
</head>  
<body>  

<h2>成绩表</h2>  

<table>  
    <thead> <!-- 表格头部 -->  
        <tr>  
            <th>科目</th>  
            <th>分数</th>  
        </tr>  
    </thead>  
    <tbody> <!-- 表格主体 -->  
        <tr>  
            <td>语文</td>  
            <td>99</td>  
        </tr>  
        <tr>  
            <td>数学</td>  
            <td>60</td>  
        </tr>  
        <!-- 可以在这里继续添加更多的数据行 -->  
    </tbody>  
    <tfoot> <!-- 表格尾部，通常用于汇总信息 -->  
        <tr>  
            <th>总分</th>  
            <td>159</td>  
        </tr>  
        <!-- 也可以在这里添加其他汇总信息或脚注 -->  
    </tfoot>  
</table>  

</body>  
</html>

		自动登录	找回密码
密码			立即注册

table标签的使用

相关帖子