首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >4.表格-HTML基础

4.表格-HTML基础

作者头像
见贤思齊
发布2020-09-28 11:05:14
1.4K0
发布2020-09-28 11:05:14
举报
文章被收录于专栏:初见Linux初见Linux

一、表格简介

在过去的web1.0时代,表格常用于页面布局。但在web2.0中,这种用表格的页面布局方式已经被抛弃,现在的网页布局都是使用CSS来实现的。 但是表格并不是一无是处,表格在实际开发中是用得非常多的,因为使用表格可以更清晰地排列数据

二、表格基本结构

在 HTML 中,一个表格一般会由以下三部分组成:

  • 表格:table标签
  • 行:tr标签
  • 单元格:td标签

1.语义

tr 指的是 table row(表格行)。 td 指的是 table data cell(表格单元格)<table></table>表示整个表格的开始和结束<tr></tr>表示行的开始和结束。在表格中,有多少组<tr></tr>就有多少行。 <td></td>表示单元格的开始和结束

三、表格完整结构

一个表格的完整结构,不仅仅只有table、tr、td这三个,还应包括caption、th、thead、tbody、tfoot

1.caption-表格标题

HTML 中,表格一般都会有且只有一个标题,通过使用caption标签来实现,也就是说一个表格中只有一个caption标签。 在默认情况下,标题都是位于整个表格内的第一行。

(1)示例
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">  <!--必须放在title标签及其它meta标签前-->
        <title>表格</title>
        <style type="text/css">
            table,tr,td{
                border: 1px solid #00FFFF;      /*为表格加上边框,默认是没有边框的*/
            }
        </style>
    </head>
    <body>
        <table>
            <caption>見贤思齊</caption>     <!--这是表格标题-->
            <tr>                            <!--这是表行-->
                <td>君初见</td>            <!--这是表格单元格-->
                <td>初见</td>
            </tr>
            <tr>
                <td>王小淘</td>
                <td>小淘</td>
            </tr>           
        </table>
    </body>
</html>

2.th-表头单元格

之前我们通过学习知道,td指的是 table data cell(表格单元格)。 但在 HTML 中,单元格其实有两种:

  • th 指的是table header cell(表头单元格)
  • td 指的是table data cell(表行单元格)
(1)语法
<table>
    <caption>表格标题</caption>     <!--这是表格标题-->
    <tr>                            <!--这是表行-->
        <th>表头单元格1</th>         
        <th>表头单元格2</th>
    </tr>
    <tr>
        <td>表行单元格1</td>
        <td>表行单元格2</td>
    </tr>           
</table>
(2)th和td区别

th 和 td在本质上都是单元格,但是并不代表两者可以互换。它们之间具体有以下两种区别:

  • 显示上:浏览器会以粗体和居中来显示 th 标签中的内容,但是 td 标签不会。
  • 语义上:th标签用于表头;td标签用于表行

当然,对于表头单元格,我有可能会使用 td 来代替 th,但不建议这样做。 因为在HTML语义化中了解到:学习 HTML 的目的就是在需要的地方使用恰当的标签(也就是语义化)

四、语义化

在这之前我们已经学习了table、caption、tr、th (表头单元格)、td (表行单元格)。 为了更深入地对表格进行语义化,HTML引入了 thead、tbody、tfoot这三个标签。 thead、tbody、tfoot将表格划分为 3 部分:表头、表身、表脚。有了这三个标签,使得表格语义变得更加良好,结构更清晰,也更具可读性和可维护性

1.语法

<table>
    <caption>表格标题</caption>     
    
    <thead>     <!--表头-->
        <tr>                            <!--这是表行-->
            <th>表头单元格1</th>         
            <th>表头单元格2</th>
        </tr>
    </thead>
    
    <tbody>     <!--表身-->
        <tr>
            <td>表行单元格1</td>
            <td>表行单元格2</td>
        </tr>
    </tbody>
    
    <tfoot>     <!--表脚-->
        <tr>
            <td>标准单元格1</td>
            <td>标准单元格2</td>
        </tr>
    </tfoot>
</table>
(1)实际开发

tfoot表脚往往用于统计数据。对于thead、tbody、tfoot这 3 个标签,不一定全部都用上,比如:tfoot就很少用。一般情况下,根据实际需求来使用这 3 个标签。

① 重要性

  • thead、tbody、tfoot是表格中非常重要的标签,它们从语义上区分了表头、表身、表脚,这使得代码更具语义,千万不要忽视了它们。
  • 此外,还有一个重要作用:方便分块来控制表格的CSS样式
Ⅰ.总结

对于表格的显示效果来说,thead、tbody、tfoot这三个标签加上后和没加之前的效果是一样的,那为何还用使用呢? 单纯只从显示效果来说,确实加与不加效果都差不多,但是加上之后会让你的代码更具逻辑性,并且还可以很好地结合CSS来分块控制样式

五、rowspan-合并行

HTML中,我们可以使用rowspan属性来合并行。 所谓的合并行,就是将纵向的N个单元格合并成一个。(也可简单理解为上下合并)

1.语法

<td rowspan="跨越的行数"></td>
(1)示例
① 例1
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>表格</title>
        <style>
            table,tr,td,th{
                border: 1px solid #66A9FE;
            }
        </style>
    </head>
    <body>
        <table>
            <caption>合并行</caption>
            <thead>
                <tr>
                    <th>
                        姓名:
                    </th>
                    <th>
                        王小淘
                    </th>
                </tr>
            </thead>
            
            <tbody>
            <tr>
                <td rowspan="2">喜欢的水果:</td>
                <td>菠萝</td>
            </tr>
            <tr>
                <td>其它全部水果</td>
            </tr>
            </tbody>
                
        </table>
    </body>
</html>

<!--
    可以尝试下,把rowspan="2"删除后的效果是什么样的。
    rowspan="2"实际上是让加上rowspan属性的这个td标签跨越两行。
-->

合并行例1.png

六、colspan-合并列

HTML中,我们可以使用colspan属性来合并列。 所谓的合并列,就是将横向的N个单元格合并成一个。(也可简单理解为左右合并)

1.语法

<td colspan="跨越的列数"></td>
(1)示例
① 例1
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>表格</title>
        <style>
            table,tr,td,th{
                border: 1px solid #00FFFF;
            }
        </style>
    </head>
    <body>
        <table>
            <caption>合并列</caption>
            <thead>                 <!--表头-->
                <tr>
                    <th>
                        姓名
                    </th>
                    <th>
                        数学
                    </th>
                    <th>
                        英语
                    </th>
                    <th>
                        政治
                    </th>
                    <th>
                        专业课
                    </th>
                </tr>
            </thead>
            
            <tbody>                 <!--表身-->
            <tr>
                <td>王小淘</td>
                <td>100</td>
                <td>80</td>
                <td>80</td>
                <td>110</td>
            </tr>   
            </tbody>
            
            <tfoot>                 <!--表脚-->
                <tr>
                    <td>总成绩</td>
                    <td colspan="4">370</td>
                </tr>
            </tfoot>
        
        </table>
    </body>
</html>

<!--
    可以尝试下,把colspan="4"删除后的效果是什么样的。
    colspan="4"实际上是让加上colspan属性的这个td标签跨越 4 行。
-->

合并列例1.png

2.实际开发

在实际开发中,合并行与合并列用的很少,忘了的话回过头来看一眼。 对于 rowspan 和 colspan ,要从语义上去理解,rowspan表示row span,colspan表示column span。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、表格简介
  • 二、表格基本结构
    • 1.语义
    • 三、表格完整结构
      • 1.caption-表格标题
        • (1)示例
      • 2.th-表头单元格
        • (1)语法
        • (2)th和td区别
    • 四、语义化
      • 1.语法
        • (1)实际开发
    • 五、rowspan-合并行
      • 1.语法
        • (1)示例
    • 六、colspan-合并列
      • 1.语法
        • (1)示例
      • 2.实际开发
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档