前端学习笔记:表格篇

1、创建表格

基础知识:
创建表格的四个元素:table、tr、th、td

1、<table></table>:整个表格以<table>标记开始、</table>标记结束
2、<tr></tr>:表格的一行,所以有几对tr 表格就有几行。
3、<td></td>:表格的一个单元格,一行中包含几对<td>...</td>,说明一行中就有几列。
4、<th></th>:表格的头部的一个单元格,表格表头。th用来设置表格的标题,会加粗居中显示。也就是th标签中的文本默认为粗体并且居中显示。
5、表格中列的个数,取决于一行中数据单元格的个数。
6、border属性可以为表格添加边框,属性值为数字。table表格在没有添加border属性之前, 在浏览器中显示是没有表格线的。
7、caption标签用来定义表格的标题。

exp:
在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>学习表格标签</title>
</head>

<body>
    <table border = "2">
    <!--表格标题-->
    <caption>前端三剑客</caption>
    <tr>
        <th>知识点</th>
        <th>重要程度</th>
        <th>难度</th>
        <th>学习周期</th>
    </tr>
    <tr>
        <td>html</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>

2、使用thead、tbody、tfoot创建表格

1、thead:标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。
2、tbody:如果不加 , table表格加载完后才显示。加上这些表格结构, tbody包含行的内容下载完优先显示,不必等待表格结束后在显示,同时如果表格很长,用tbody分段,可以一部分一部分地显示。(通俗理解table 可以按结构一块块的显示,不在等整个表格加载完后显示。)
3、tfoot:元素用于对 HTML 表格中的表注(页脚)内容进行分组。
4、thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时,您也许希望拥有一个标题行,一些带有数据的行,以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上。
exp:
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>使用thead、tbody、tfoot标签</title>
</head>
<table border="2">
    <caption>成绩表</caption>
    <thead>
        <tr>
            <td>科目</td>
            <td>分数</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>语文</td>
            <td>99</td>
        </tr>
        <tr>
            <td>数学</td>
            <td>60</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>总分</td>
            <td>159</td>
        </tr>
    </tfoot>
</table>
</html>
  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值