关于结构三标签

关于结构三标签

相关代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table border="1" cellspacing="0" cellpadding="10" align="left" width="70%">
        <caption>
            <h2>购物车</h2>
        </caption>
        <thead>
            <tr bgcolor="lightgray" align="center">
                <td></td>
                <th width="100">商品</th>
                <th>单价</th>
                <th>数量</th>
                <th>小计</th>

            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>咖啡</td>
                <td>30</td>
                <td>2</td>
                <td>60</td>
            </tr>
            <tr>
                <td>2</td>
                <td>三文鱼</td>
                <td>199</td>
                <td>2</td>
                <td>398</td>
            </tr>
            <tr>
                <td>3</td>
                <td>鹅肝</td>
                <td>188</td>
                <td>1</td>
                <td>188</td>
            </tr>
            <tr>
                <td>4</td>
                <td>榻榻米</td>
                <td>60</td>
                <td>3</td>
                <td>180</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总计</td>
                <th colspan="4" align="right"> $1314 </th>
            </tr>
        </tfoot>


        <table>
</body>

</html>

问题描述:老师您好,当我把thead,tbody,tfood三个标签去掉之后,网页显示并没有变化,请问一下这三个标签具体作用是什么?

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕阿园 2022-03-04 10:01:18

同学你好,是的,在该案例中去掉这三个元素对整个网页没有实际影响,但是对于比较大的表格就会有影响;

thead、tfoot 以及 tbody 元素能很好的对表格中的行进行分组。当想创建某个表格时,希望拥有一个标题行,一些带有数据的行,以及位于底部的一个总计行。

这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上。

简单理解:

caption 元素定义表格标题

<tbody> 标签表格主体,该标签用于组合 HTML 表格的主体内容

thead 元素用于对 HTML 表格中的表头内容进行分组

tfoot 元素用于对 HTML 表格中的表注(页脚)内容进行分组。

综上所述,上述标签并不是注释作用,而是有相对应的实际功能~这里建议同学手敲代码试一下~

祝学习愉快~

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师