HTML5权威指南——表格元素

最新推荐文章于 2021-02-07 19:31:39 发布
最新推荐文章于 2021-02-07 19:31:39 发布
阅读量232 收藏
点赞数
分类专栏： HTML5权威指南 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gyypwrs/article/details/109262553
版权

每次做表格都是现查的，今天就做个了断吧！（以后查自己写的）

生成基本的表格

生成表格的基本三个元素就是table,tr,td。table就是HTML文档中用来表示表格，tr表示表格中的行，td表示行中的单元格。用这三个元素就可以做出一个简单的表格。

        <table>
            <tr>
                <td>Rank</td>
                <td>Name</td>
                <td>Color</td>
                <td>Size</td>
            </tr>
            <tr>
                <td>Favorite</td>
                <td>Apples</td>
                <td>Green</td>
                <td>Medium</td>
            </tr>
            <tr>
                <td>2nd Favorite</td>
                <td>Oranges</td>
                <td>Orange</td>
                <td>Large</td>
            </tr>
            <tr>
                <td>3nd Favorite</td>
                <td>Bananas</td>
                <td>Yellow</td>
                <td>Large</td>
            </tr>
        </table>

在这里插入图片描述

添加表头单元格

th用来添加表头单元格，区分数据和对数据的说明。

        <table>
            <tr>
                <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>3nd Favorite</th>
                <td>Bananas</td>
                <td>Yellow</td>
                <td>Large</td>
            </tr>
        </table>

在这里插入图片描述

为表格添加结构

在上面的两种表格中没有表格线，一点都不像正规的表格。可以用CSS添加样式，也可以用thead，tbody，tfoot来为表格添加结构。
1.用CSS来给表格做个修饰

 tr>th{
                text-align: center;
                background: grey;
                color: white;
            }

在这里插入图片描述
2.表示表头和表格主题
tbody元素包含表格的主题部分，但不包含tfoot和thead表示的表脚行和表头行,注意的是即使没有tbody元素，在浏览器处理table元素的时候会自动插入tbody元素，因此有些时候如table>tr这样的选择器会失效，这时候就应该写成table>tbody>tr或者直接写成tbody>tr。
thead用来标记表格的标题行。
下面是给表格添加thead和tbody，样式上并没有什么改变，但使表格的结构更加清晰了。

        <table>
            <thead>
                <tr>
                    <th>Rank</th>
                    <th>Name</th>
                    <th>Color</th>
                    <th>Size</th>
                </tr>
            </thead>
            <tbody>
                <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>Bananas</td>
                    <td>Yellow</td>
                    <td>Large</td>
                </tr>
            </tbody>
        </table>

在这里插入图片描述
3.添加表脚
tfoot元素HTML5之前只能出现在tbody元素之前，HTML5之后可以放在tbody元素之后，或者是最后一个tr元素。（把thead中的内容放到tfoot中啦。）
在这里插入图片描述

制作不规则表格

对于跨越几行或者几列的表格可以用td，th元素的colspan和rowspan属性。

        <table>
            <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 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">Hongyu-html5</th>
                </tr>
            </tfoot>
        </table>

在这里插入图片描述

将表头与单元格关联起来

td和th元素都定义了headers他用于对屏幕阅读器和其他残障辅助技术来简化对表格的处理，headers属性的值可以被设置成一个或者多个单元个的id属性值。
就是下面的这个样子。

<table>
            <thead>
                <tr>
                    <th id="rank">Rank</th>
                    <th id="name">Name</th>
                    <th id="color">Color</th>
                    <th colspan="2" id="sizeAndVotes">Size & Votes</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th id="first" headers="rank">Favorite</th>
                    <td headers="name first">Apples</td>
                    <td headers="color first">Green</td>
                    <td headers="sizeAndVotes first">Medium</td>
                    <td headers="sizeAndVotes first">500</td>
                </tr>
                <tr>
                    <th id="second">2nd Favorite</th>
                    <td headers="name second">Oranges</td>
                    <td headers="color sceond">Orange</td>
                    <td headers="sizeAndVotes second">Large</td>
                    <td headers="sizeAndVotes second">450</td>
                </tr>
           </tbody>
</table>

为表格添加标题

caption 元素可以为表格定义一个标题，并将其与表格关联起来。

        <table>
            <caption>Results of the 2011 Fruit Survey </caption>
            <thead>
                <tr>
                    <th id="rank">Rank</th>
                    <th id="name">Name</th>
                    <th id="color">Color</th>
                    <th colspan="2" id="sizeAndVotes">Size & Votes</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th id="first" headers="rank">Favorite</th>
                    <td headers="name first">Apples</td>
                    <td headers="color first">Green</td>
                    <td headers="sizeAndVotes first">Medium</td>
                    <td headers="sizeAndVotes first">500</td>
                </tr>
                <tr>
                    <th id="second">2nd Favorite</th>
                    <td headers="name second">Oranges</td>
                    <td headers="color sceond">Orange</td>
                    <td headers="sizeAndVotes second">Large</td>
                    <td headers="sizeAndVotes second">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 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">Hongyu-html5</th>
                </tr>
            </tfoot>
        </table>

在这里插入图片描述

处理列

HTML中的表格是基于行的，就是需要一行一行的组件表格。若想创建基于列的可以使用colgroup和col元素。
colgroup元素的影响范围覆盖了列中所有的单元格，也包含了thead和tfoot，即使这些单元格不包含在其内部。

<table>
            <caption>Results of the 2011 Fruit Survey </caption>
            <colgroup id="colgroup1" span="3"/>
            <colgroup id="colgroup2" span="2"/>
            <thead>
                <tr>
                    <th id="rank">Rank</th>
                    <th id="name">Name</th>
                    <th id="color">Color</th>
                    <th colspan="2" id="sizeAndVotes">Size & Votes</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th id="first" headers="rank">Favorite</th>
                    <td headers="name first">Apples</td>
                    <td headers="color first">Green</td>
                    <td headers="sizeAndVotes first">Medium</td>
                    <td headers="sizeAndVotes first">500</td>
                </tr>
                <tr>
                    <th id="second">2nd Favorite</th>
                    <td headers="name second">Oranges</td>
                    <td headers="color sceond">Orange</td>
                    <td headers="sizeAndVotes second">Large</td>
                    <td headers="sizeAndVotes second">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 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">Hongyu-html5</th>
                </tr>
            </tfoot>
        </table>

在这里插入图片描述
也可以不使用colgroup元素的span属性，改用col元素指定组中的各列。注意col元素的父元素只能是colgroup，使用col能更好的控制表格的表现。在未设置span的情况下每个col元素 表示列组中的一列。

<colgroup id="colgroup1">
	<col id="col1And2" span="2"/>
	<col id="col3"/>
</colgroup>
<colgroup id="colgroup2" span="2"/>

设置表格边框

table元素设置了border属性，浏览器遇到border属性就会在表格的每一个单元格上绘制边框线。table也可用作布局，使用border属性就是在告诉浏览器将这个table当作表格对待。

<table border="1"></table>

在这里插入图片描述

gyypwrs
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5基础:表格和表单控件
Marlon康
02-27 799
01 HTML5 07 表格 表格 table 存在即是合理的。 表格的现在还是较为常用的一种标签，但不是用来布局，常见处理表格式数据。 创建表格 在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下： <table> <tr> <td>单元格内的文字</td> ... </...
HTML5表格元素
在到处之间找我
02-21 536
表格有三大元素：table、tr、td。表格表格由&lt;table&gt;标签来定义。每个表格均有若干行（由&lt;tr&gt;标签定义），每行被分割为若干单元格（由&lt;td&gt;标签定义）。字母tr指表格行（table row）；字母td指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。&lt;!DOCTYPE htm...
HTML5的表格元素
恬静的男子的博客
10-21 997
1.表格构成三个基本要素 table:表格的范围，外框；用来定义表格，表格的其他元素包含在table标签里面 tr:表格的行； td表格的单元格； 2.一点说明：关于表格的属性 HTML5中删除了HTML4中的table的大部分属性，html5中推荐使用CSS设定原来table属性实现的效果。 3.th元素：为表格添加标题行 th元素用来定义表格的标题单元格，他是tr元素的子元素，必须放在tr标签...
HTML5页面基础（二）form表单
weixin_42468092的博客
09-17 241
表单form标签
html5学习15：表格元素
八十岁老将的博客
02-07 2369
1、基本的表格 有三个元素是每个表格都必须要有的: table、tr和td。元素table，是HTML用以支持表格式内容的核心元素，它表示HTML文档中的表格。 1.1 table元素 属性：border 包含：caption,colgroup,thead,tbody,tfoot,tr,th,td 1.2 tr元素 父元素：table,thead,tfoot,tbody 内容：td,th 1.3 td元素 属性：colspan,rowspan,headers <table> <tr
CSS权威指南 全书下载
03-24
### CSS权威指南知识点详解 #### 一、书籍概述与适用对象 **《CSS权威指南》**是一本旨在帮助读者深入理解和运用层叠样式表（Cascading Style Sheets, CSS）的专业指南。无论你是希望提高工作效率的专业Web开发...
即用即查——HTML+CSS标签参考手册
10-09
该书由李刚编著，书号为978-7-115-16152-9，于2007年5月出版，定价为49元，总页码达到439页，是一部详尽介绍HTML和CSS基础知识、设计方法及应用技巧的权威指南。 ### 技术深度与目标受众 本书的技术深度定位于初、...
html5 表格使用基础
li5685918的博客
12-14 530
在 HTML 4.01 中，不赞成使用 "align" 和 "bgcolor" 属性。 在 HTML5 中，不支持 标签的任何属性。
HTML5 表单基础
是光の谢宣骞博客
12-22 115
年轻......
HTML5基础08----HTML5表格使用
翟浩浩Android专栏
07-26 420
html> lang="en"> charset="UTF-8"> 表格 --> --> 第1列 第2列 第3列 第1列 第2列 第3列 第1列 第2列 第3列
HTML5基础之-表格标签
bruce_suxin的博客
10-19 415
表格标签 笔记显示效果： 以上效果，下面是代码加注释： HTML标签的特殊符号 *表格标签（**重要的标签**）
html5基础 表格标签
m0_46744635的博客
07-13 108
HTML5 基础表单 学习笔记
小七的博客
05-07 186
1.表格标签 1.2 表格的基本语法 <table> <tr> <td>单元格内的文字</td> ... </tr> ... </table> 1.< table >< /table >用于定义表格的标签 2.< tr >&lt...
HTML5---基础标签(表格、表单元素)
weixin_44021474的博客
03-24 147
表格： <table> 显示表格 语法：<table width="" height="" border="" bgcolor="" background="" cellpadding="' cellspacing="" > width:表格的宽度，height:表格的高度；border：表格的边框，bgcolor表格的背景颜色，background 表格背景颜色。cell...
HTML5初学——表格标签（02-08课）
weixin_45727991的博客
11-14 238
02课、03课——表格标签 1、表格的主要作用： 主要用于显示、展示数据，因为它可以让数据显示地非常的规整，可读性非常好，特别是后台展示数据的时候，能够熟练运用表格就显得很重要，一个清爽简约的表格能够把繁杂的数据表现得很有调理。 2、基本语法： <table> <tr> <td>单元格内的文字</td> ... </tr>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值