HTML5权威指南笔记：11-表格元素

最新推荐文章于 2022-03-13 17:13:18 发布
最新推荐文章于 2022-03-13 17:13:18 发布
阅读量442 收藏 1
点赞数
分类专栏： HTML5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011069189/article/details/78331188
版权

1 生成基本的表格

table元素
元素类型流
允许具有的父元素任何可以包含流元素的元素
局部属性border
内容caption 、colgroup 、thead 、tbody 、tfoot 、tr 、th和td元素
标签用法开始标签和结束标签
是否为HTML5新增否
在HTML5中的变化summary 、align 、width 、bgcolor 、cellpadding 、cellspacing 、frame和rules属性已不再使用，其功能改用css实现。border属性的值必须设置为1 。表格边框的粗细必须用css设置
习惯样式table { display: table; border-collapse: separate;
border-spacing: 2px; border-color: gray; }

tr元素表示表格中的行

tr元素
元素类型无
允许具有的父元素table 、thead 、tfoot和tbody元素
局部属性无
内容一个或多个td或th元素
标签用法开始标签和结束标签
是否为HTML5新增否
在HTML5中的变化align 、char 、charoff 、valign和bgcolor属性已不再使用， 其功能改用css实现
习惯样式tr { display: table-row; vertical-align: inherit;
border-color: inherit;}

td元素表示表格中的单元格

td元素
元素类型无
允许具有的父元素tr元素
局部属性colspan 、rowspan 、headers
内容流内容
标签用法开始标签和结束标签
是否为HTML5新增否
在HTML5中的变化scope属性已不再使用。abbr 、axis 、align 、width 、char 、charoff 、valign 、bgcolor 、height和nowrap属性已不再使用，其功能改用css实现
习惯样式td { display: table-cell; vertical-align: inherit; }

例子：

<!DOCTYPE HTML>
<html>
    <head>
    </head>
    <body>
        <!--每个表格都必须要有的： table 、tr和td-->
        <table>
            <tr>
                <td>Apples</td>
                <td>Green</td>
                <td>Medium</td>
            </tr>
            <tr>
                <td>Oranges</td>
                <td>Orange</td>
                <td>Large</td>
            </tr>
        </table>
    </body>
</html>

2 添加表头单元格

th元素
元素类型无
允许具有的父元素t玩素
局部属性colspan 、rowspan 、scope和headers
内容短语内容
标签用法开始标签和结束标签
是否为HTML5新增否
在HTML5中的变化scope 属性已不再使用； abbr 、axis 、align 、width 、char 、charoff 、valign 、bgcolor 、height和nowrap属性已不再使用，其功能改用css实现
习惯样式th { display: table-cell; vertical-align: inherit;
font-weight: bold; text-align: center; }

例子：

<!DOCTYPE HTML>
<html>
    <head>
    </head>
    <body>
        <table>
            <tr>
                <!--th元素表示表头的单元格，它可以用来区分数据和对数据的说明-->
                <th>Rank</th><th>Name</th>
                <th>Color</th><th>Size</th>
            </tr>
            <tr>
                <th>Favorite:</th>
                <td>Apples</td><td>Green</td><td>Medium</td>
            </tr>
            <tr>
                <th>2nd Favorite:</th>
                <td>Oranges</td><td>Orange</td><td>Large</td>
            </tr>
            <tr>
                <th>3rd Favorite:</th>
                <td>Pomegranate</td><td>A kind of greeny-red</td>
                <td>Varies from medium to large</td>
            </tr>
        </table>
    </body>
</html>

3 为表格添加结构

tbody元素表示构成表格主体的全体行

tbody元素
元素类型无
允许具有的父元素table元素
局部属性无
内容零个或多个tr元素
标签用法开始标签和结束标签
是否为HTML5新增否
在HTML5中的变化align 、char 、charoff和valign属性已不再使用
习惯样式tbody { display: table-row-group;
vertical-align: middle; border-color: inherit; }

thead元素用来标记表格的标题行

thead元素
元素类型无
允许具有的父元素table元素
局部属性无
内容零个或多个tr元素
标签用法无
是否为HTML5新增开始标签和结束标签
在HTML5中的变化align 、char、charoff和valign属性已不再使用
习惯样式thead { display: table-header-group;
vertical-align: middle; border-color: inherit; }

tfoot元素用来标记组成表脚的行

tfoot元素
元素类型无
允许具有的父元素table元素
局部属性无
内容零个或多个tr元素
标签用法开始标签和结束标签
是否为HTML5新增否
在HTML5中的变化tfoot元素现在出现在tbody或tr元素前后都可以。在HTML4中， 它只能出现在这些元素之前。align 、char 、charoff和valign属性已不再使用
习惯样式tfoot { display: table-footer-group;
vertical-align: middle; border-color: inherit; }

例子：

<!DOCTYPE HTML>
<html>
    <head>
    </head>
    <body>
        <table>
            <!--如果没有thead元素的话，所有tr元素都会被视为表格主体的一部分-->
            <thead>
                <tr>
                    <th></th>
                </tr>
            </thead>
            <!--即便在文档中表格没有用到tbody元素，大多数浏览器在处理table元素的时候都会自动插入tbody元素。
            所以table> tr这个选择器会失效。
            为了应对这种情况，需要使用table> tbody > tr或table tr (没有字符＞ ）这样的选择器，或者干脆写成tbody > tr 。-->
            <tbody>
                <tr>
                    <th>:</th><td></td>
                </tr>
            </tbody>
            <!--在HTML5 中则可以把tfoot元素放在tbody元素之后或最后一个tr元素之后-->
            <tfoot>
                <tr>
                    <th></th>
                </tr>
            </tfoot>
        </table>
    </body>
</html>

4 制作不规则表格

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
    <table>
        <tr>
            <!--想让一个单元格横跨多列要用colspan属性。-->
            <td colspan="2">1</td>
            <!--想让一个单元格纵跨多行要用rowspan属性-->
            <td rowspan="3">2</td>
        </tr>
    </table>
</body>
</html>

注意：

  1. 为rowspan和colspan设置的值必须是整数。有些浏览器会把100%这个值理解为表格中所有的行或列
  2. colspan和rowspan属性应该用在要占据的网格左上角那个单元格上

5 把表头与单元格关联起来

td和th元素都定义了headers属性， 它可以供屏幕阅读器和其他残障辅助技术用来简化对表格
的处理。headers属性的值可被设置为一个或多个th单元格的id属性值

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th id="rank">Rank</th>
                <th id="name">Name</th>
                <th id="color">Color</th>
                <th id="sizeAndVotes" colspan="2">Size & Votes</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <!--tbody 中的每一个td和th 元素都通过设置headers属性将相应单元格与列表头关联起来-->
                <th id="first" headers="rank">Favorite:</th>
                <td headers="name first">Apples</td>
                <td headers="color first">Green</td>
                <td headers="sizeAndVote first">Medium</td>
                <td headers="sizeAndVote first">500</td>
            </tr>
            <tr>
                <th id="second" headers="rank">2nd Favorite:</th>
                <td headers="name second">Oranges</td>
                <td headers="color second">Orange</td>
                <td headers="sizeAndVote second">Large</td>
                <td headers="sizeAndVote second">450</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

6 为表格添加标题

caption元素
元素类型无
允许具有的父元素table元素
局部属性无
内容流内容（但不能是table元素）
标签用法开始标签和结束标签
是否为HTML5新增否
在HTML5中的变化align属性已不再使用
习惯样式caption { display: table-caption; text-align: center; }

例子：

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
    <table>
        <!--caption元素可以用来为表格定义一个标题并将其与表格关联起来
        一个表格只能包含一个caption元素。它不必是表格的第一个子元素， 但是无论定义在什么
        位置， 它总会显示在表格上方。-->
        <caption></caption>
    </table>
</body>
</html>

7 处理列

使用css对列进行处理可以使用colgroup和col元素

colgroup元素
元素类型无
允许具有的父元素table元素
局部属性span
内容零个或多个col元素（只有未设置span属性时才能使用）
标签用法开始标签和结束标签
是否为HTML5新增否
在HTML5中的变化width 、char 、charoff和valign属性已不再使用
习惯样式colgroup { display: table-column-group; }

例子：

<!DOCTYPE HTML>
<html>
    <head>
        <style>
            /*样式处理*/
            #colgroup1 {background-color: red}
            #colgroup2 {background-color: green; font-size:small}
        </style>
    </head>
    <body>
        <table>
            <!--span属性指定了colgroup元素负责的列数
            这里表示colgroup1控制前3列，colgroup2控制后2列-->
            <colgroup id="colgroup1" span="3"/>
            <colgroup id="colgroup2" span="2"/>
        </table>
    </body>
</html>
     1. 应用到colgroup上的css样式在具体程度上低于直接应用到tr、td和th元素上的样式
     2. 不规则单元格被计入其起始列
     3. colgroup元素的影响范围覆盖了列中所有的单元格，包括那些位thead和tfoot元素中的单元格，不管它们是用th还是td元素定义的
     4. 影响到的元素并未包含在其内部。因此该元素无法用做更具体的选择的基础（如#colgroupl > td这个选择器不会有任何匹配元素）。

用col元素指定组中的各列

col元素
元素类型无
允许具有的父元素colgroup元素
局部属性span
内容无
标签用法虚元素形式
是否为HTML5新增否
在HTML5中的变化align 、width、char 、charoff和valign属性巳不再使用
习惯样式col { display: table-column; }

例子：

<!DOCTYPE HTML>
<html>
    <head>
        <style>
            #colgroup1 {background-color: red}
            #col3 {background-color: green; font-size:small}
        </style>
    </head>
    <body>
        <table>
            <colgroup id="colgroup1">
                <!--能对一组列应用样式，也能对该组中个别的列应用样式
                可以用col元素的span属性让一个col元素代表几列。不用span属性的col元素只代表一列
                这里表示col1And2控制头2列，col3控制col1And2后的一列-->
                <col id="col1And2" span="2"/>
                <col id="col3"/>
            </colgroup>
        </table>
    </body>
</html>

8 设置表格边框

table元素定义了border这个属性就是告诉浏览器这个表格是用来表示表格式数据
而不是用来布置其他元素的

  1. border属性的值必须设置为1 或空字符串
  2. 不设置表格的border属性也能用css为其定义边框。不过，如果没有border属性，那么浏览器可能会认为表格是用于处理布局事宜的，因此其显示表格的方式可能会预想的不一样。
<!DOCTYPE HTML>
<html>
    <head>
    </head>
    <body>     
        <table border="1">
            <caption>Results of the 2011 Fruit Survey</caption>
            <colgroup id="colgroup1">
                <col id="col1And2" span="2"/>
                <col id="col3"/>
            </colgroup>
            <colgroup id="colgroup2" span="2"/>
            <thead>
                <tr>
                    <th>Rank</th><th>Name</th><th>Color</th>
                    <th colspan="2">Size & Votes</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>Favorite:</th><td>Apples</td><td>Green</td>
                    <td>Medium</td><td>500</td>
                </tr>
                <tr>
                    <th>2nd Favorite:</th><td>Oranges</td><td>Orange</td>
                    <td>Large</td><td>450</td>
                </tr>
                <tr>
                    <th>3rd Favorite:</th><td>Pomegranate</td>
                    <td colspan="2" rowspan="2">
                        Pomegranates and cherries can both come in a range of colors 
                        and sizes. 
                    </td>
                    <td>203</td>
                </tr>
                <tr>
                    <th rowspan="2">Joint 4th:</th>
                    <td>Cherries</td>
                    <td rowspan="2">75</td>
                </tr>
                <tr>
                    <td>Pineapple</td>
                    <td>Brown</td>
                    <td>Very Large</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th colspan="5">&copy; 2011 Adam Freeman Fruit Data Enterprises</th>
                </tr>                
            </tfoot>
        </table>
    </body>
</html>
馋雪山丘
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html上标下标标签 示例_带有示例HTML th表标题标签教程
cunjiu9486的博客
10-12 1417
html上标下标标签 示例HTML provides table structure which consists of rows, columns or cells. During the creation of the table, multiple tags are used. <th> is a tag used to create a table header. A tabl...
【HTML5】->表格元素讲解
欢迎来到新世界
02-21 840
表格元素Ⅰ 前言Ⅱ 表格三大元素Ⅲ 表头，表身，表尾Ⅳ 如何合并单元格 Ⅰ 前言 让我们在回顾一下HTML5的“元素周期表”。 这篇文章我就来讲解一下最右边的表格元素。 下面我们通过这三个表格来逐个讲解表格元素???? （一） （二） （三） Ⅱ 表格三大元素 <table>,<tr>,<td> 这三个元素就是表格的三大元素，通过这三个元素我们来构建第一个表...
HTML 教程
luoluo3664的博客
11-30 1045
SS1 简介 超文本标记语言（HyperText Markup Language，HTML）是一种用于创建网页的标准标记语言（一套标记标签markup tag） 可以使用HTML来建立自己的Web站点，HTML运行在浏览器上，由浏览器来进行解析 HTML文档也可叫做web页面 一、HTML实例 PS：对于中文网页需要使用<meta charset = "utf-8">声明编码...
前端学习笔记之——表格元素
前尘忆梦的博客
06-18 775
表格元素 1、生成基本的表格 有三个元素是每个表格都必须要有的：table、tr 和 td。 元素 table 元素类型 流 允许具备的父元素 任何可以包含流元素的元素 局部属性 border 内容 caption、colgroup、thead、tbody、tfoot、tr、th 和 td 元素 标签用法 开始标签和结束标签 习惯样式 table { display: table; border-collapse: separate; borde
HTML——表头标签<th>的属性
热门推荐
时光·漫步的博客
04-29 1万+
    &lt;th&gt;标签的属性和&lt;td&gt;标签的属性及语法格式非常的相似，用于设定表格中某一表头的属性。&lt;th&gt;标签中常用的属性标签描述align设置单元格内容的水平对齐方式valign设置单元格内容的垂直对齐方式bgcolor设置单元格的背景颜色background设置单元格的背景图片width设置单元格的宽度height设置单元格的高度rowspan设置单元格的水...
HTML5-列表，表格与媒体元素
MUYUFANSHENXUE的博客
03-13 293
什么是列表： 列表就是信息资源的一种展示形式。 它可以使信息结构化和条理化，并以列表的样式显示出来， 以便浏览者能更快捷地获得相应的信息 列表的分类： 无序列表 有序列表 定义列表 1，无序列表 <ul> <li>今天早上吃什么</li> <li>今天中午吃什么</li> <li>今天下午吃什么</li> <li>今天晚上吃什么</li&g
HTML5权威指南 阅读计划-叶糖糖1
08-03
《HTML5权威指南》是一本全面且深入介绍HTML5、CSS和JavaScript的书籍，适合初级到中级前端工程师阅读。本书的特色在于系统性地涵盖了HTML5的各项新特性，包括标记文字、文档分节、表格元素、表单以及自定义input...
HTML5权威指南观后笔记
小小
04-22 835
目录 1.HTML5背景知识 2.准备工作 3.初探HTML 4.初探CSS 5.初探JavaScript 6.HTML元素背景知识 7.创建HTML文档 8.标记文字 9.组织内容 10.文档分节 11.表格元素 12.表单 13.定制input元素 14.其他表单元素及输入验证 15.嵌入内容 16.理解CSS 17.使用CSS选择器一 18.使用CS...
小白的《HTML5权威指南》笔记（第一部分）
canxuezhang的博客
10-15 346
粗涉
粘性头布局和流式布局_粘性表标题和列
culiao9310的博客
09-29 899
粘性头布局和流式布局View demo 查看演示Download Source 下载源Sticky table headers are no longer a stranger to an average website user — unlike on paper when a reader’s eyes can comfortably jump in s...
table表格可以设置的样式
qq_41696819的博客
12-09 400
<div class="table"> <thead> <tr> <th></th> </tr> </thead> <tbody> <tr> <td></td> </tr> </tbody> </div> ...
html中table设置字体,table的默认属性及css字体
weixin_39728124的博客
06-15 3718
前几天一直忙着敲代码，没有时间整理内容今天上了关于position的使用，position属性有五个值1.inherit 从父元素继承 position 属性的值。2.static 默认值。没有定位，元素出现在正常文档流中( 忽视top ,left, right, bottom,或者z-index的声明)3.fixed 固定定位 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "le...
css中display解析
oiaa的博客
10-07 632
常见属性值 （1）inline （2）block （3）inline-block （4）none （5）flex （6）table 行级元素特点 （1）和其它元素在同一行上 （2）元素的高度、宽度、行高及顶部和底部边距不可设置 （3）元素的宽度就是它包含的文字或图片的宽度，不可改变 块级元素特点 （1）每个块级元素都从新的一行开始，并且其后的元素也另起一行 （2）元素的高...
element UI form table 表单以及验证
lchmyhua88的博客
12-18 1657
在开发过程中偶尔遇到el-table嵌套el-form，而且还需要表单验证的需求，但是这种都是官方的组件就可以实现，但是有时候我们需要表格的这种形式，那么使用原生的就不行了，下面我们来看一下这种的form table使用：
css五大布局方式详解
lin1072368472的博客
10-09 1万+
css布局方式 table布局 float布局 flex布局 响应式布局 Grid布局 table布局 table布局在如今已经很少使用，原因是：table布局比其它html标记占更多的字节，会阻挡浏览器渲染引擎的渲染顺序，会影响其内部的某些布局属性的生效。 使用table布局有两种方式 table标签 display：table 标签与js的对应 table { display: table } tr { display: table-row } thead { displ
vue-common-command
爱偷吃香蕉的萌猴子
11-08 5763
vue-common-commandVue常用指令Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为， 我们可以将指令看作特殊的HTML特性（attribute） Vue.js提供了一些常用的内置指令v-if[条件渲染指令，它根据表达式的真假来删除和插入元素] v-show v-else v-for
父级div使用display:table-cell；vertical-align:middle会出现空隙。
感恩、奋进、自信
12-12 2013
父级div使用display:table-cell；vertical-align:middle会出现空隙。 1、html如下 2、css .divCon{ width:200px; height:200px; background:black; display: table-cell; vertical-align: middle; text-al
CSS display 属性详解
huajiongni9676的博客
12-06 1153
display的所有属性 {/* CSS 1 */ display: none; display: inline; display: block; display: list-item; /* CSS 2.1 */ display: inline-block; display: table; display: inline-table; display: table-cell; display:
HTML5学习笔记：优势、语法与表单元素详解
表格元素也有所增强，支持`<table>`、`<tr>`和`<td>`，同时列表元素如`<ol>`和`<ul>`，以及无序列表的`<li>`，都更加易用且具有可定制的样式选项。 表单是HTML5的核心组成部分，通过`<form>`元素，可以创建各种表单...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值