表格标签的基本使用：

表格标签在过去使用非常多，绝大多数网站都是使用表格标签来制作的，也就是说表格标签是一个时代的代表。

什么是表格标签：

表格标签是用来给一堆数据添加表格语义。

表格是一种数据的展现形式，当数据量非常大时，表格这种展示风格的形式是被认为最为清晰的一种形式。

表格标签的格式：

<table><tr><td>需要显示的内容</td></tr>
</table>

其实表格标签的table代表整个表格，也就是一对table标签是一个表格。

表格符中的tr标签代表整个表格的一行数据，也就是说一对tr标签就是表格中的一行。

一个td代表一行中的一个单元格。

注意点：

表格标签有一个边框属性（border），这个属性决定了边框的宽度，默认情况下这个属性为0，所以看不到边框。
表格标签和列表标签一样是一个组合标签，要不就一起出现，要不就不出现，不会单独出现。
表格代码展示：

<table borader="10"><tr><td>访问</td><td>的我</td><td>的鹅</td></tr><tr><td>而无</td><td>范文</td><td>访问</td></tr>
</table>

表格标签的基本属性：

宽度和高度（width和weight）的属性：

使用对象：可以给table标签使用，也可以和td标签使用。

表格的高度和宽度默认是按照表格中的内容来调整的，也可以通过table标签来指定表格的高度和宽度。
如果给td设置了width属性和height属性，会修改当前单元格的宽度和高度，但不会影响整个表格的高度和宽度。

水平对齐和垂直对齐的属性：

其中水平对齐可以给table标签，tr标签和td标签使用。

垂直标签只能给tr标签和td标签使用。

水平：

给table标签设置align可以设置整个表格在水平方向的对齐方式。
给tr设置align属性来控制当前所有单元格内容的水平对齐方式。
给td标签设置align属性，可以控制当前单元格内容中在水平方向的对齐方式。

注意点：如果给tr标签和td标签设置了align属性，那么单元格中内容会按照td设置的对齐方式进行对齐，简言之，td的控制权限是最高的。

垂直：

给tr标签设置valign属性，可以控制当前行中所有单元格中的所有内容在垂直方向上的对齐方式。
给td标签设置valign属性，可以控制当前单元格中的内容在垂直方向的对齐方式。

外边距和内边距的属性：

使用对象：只能给table标签使用。

外边距就是单元格和单元格之间的距离，默认情况下，单元格和单元格之间的距离是2px，cellspacing。
内边距就是单元格的边框和文字之间的间隙，默认情况下内边距是1px，cellpadding。

表格代码展示：

<table border="10" width="300px" cellpadding="5"><tr><td width="150px" height="100px">2.1</td><td>1.2</td></tr><tr><td>21.</td><td>21.</td></tr>
</table>

如何制作细线表格：

在表格标签中通过把外边距调设为0来实现表格细线是不靠谱的，其实它是讲俩条线he合并为一条，所以看上去同一条线是有区别的。

bgcolor属性：可以在table标签和tr标签中进行背景颜色的设置。

细线表格的设置方法：

给table标签设置bgcolor属性。
给tr标签设置bgcolor属性（形成俩种颜色的对比）。
给table标签设置cellspaceing=“1px”。

注意点：

table标签和tr标签以及td标签都支持bgcolor属性。

表格中的 capion 标签：

caption标签一定要写在table标签中。
caption标签一定要紧跟在table标签中。

标题单元格标签：

什么是标题单元格标签：在表格标签中提供一个标签专门用来存储每一列的标题。

th标签：th标签正是用来定义标题单元格。
th标签的效果：只要定义了这种标题单元格标签，标题会自动的居中和加粗。

所以其实在table表格中存在俩种单元格，一种是td，另一种是th。td是专门用来存取数据的，th是用来存储当前列的标题的。

真正的表格ji结构：（因为在浏览器中会自动生成，所以这部分作为了解就好）

由于表格中存储的数据比较复杂，为了方便管理和了解以及提升语义，我们可以对表格中存储的数据进行分类。

表格中的数据可以分为6类：

1.表格的标题信息
2.表格的表头信息
3.表格的主体信息
4.表格的结尾信息

表格的完整结构：

<table><caption><h3>表格标题</h3></caption><tbody><tr><th>表格表头信息</th></tr><tr><td>数据</td><td>数据</td><td>数据</td></tr></tbody><tfoot><tr><td></td></tr></tfoot>
</table>

caption的作用：指定表格的标题。
thead的作用：指定表格的表头信息。
tbody的作用：指定表格的主体信息。
tfoot的作用：指定表格的附加信息。

注意点：

如果我们没有编写tbody，系统会自动帮助我们添加tbody。

如果指定了thead和tfoot，那么在修改整个表格的高度时thead和tfoot时自己的高度不会随着他们的改变而改变。

结构代码：

<table border="1" width="300px" height="300px" align="center" ><caption><h3>学生信息</h3></caption><thead><tr><th>身高</th><th>体重</th></tr></thead><tbody><tr align="center"><td>31</td><td>32</td></tr><tr align="center"><td>13</td><td>53</td></tr></tbody><tfoot><tr align="center"><td>23</td><td>43</td></tr></tfoot>
</table>
-->
<table border="1" width="300px" height="300px" align="center" ><caption><h3>学生信息</h3></caption><thead><tr><th>身高</th><th>体重</th></tr></thead><tbody><tr align="center"><td>31</td><td>32</td></tr><tr align="center"><td>13</td><td>53</td></tr></tbody><tfoot><tr align="center"><td>23</td><td>43</td></tr></tfoot>
</table>
</body>

单元格合并：

水平方向上的单元格合并：可以给td标签添加一个colspan属性，来指定把某个单元格当作多少个单元格来看。

例如：

<td colspan="2"></td>
含义：当前单元格两个单元格来看待。

垂直方向上的单元格合并：给td标签设置一个rowspan属性，来指定把某个单元格当作多个单元格来看待。

注意点：

由于把一个单元格当作多个单元格来看待，所以就会多出一些其他单元格，所以要删除掉一些单元格。
一定要记住单元格合并永远都是向后和向下的。

HTML5 （五）表格的使用相关推荐

php网页表格样式,HTML5制作表格样式
废话不多说了,具体代码如下所示: 表格 *{ margin: 0; padding: 0; } body{ font: italic 20px Georgia, serif; letter-spaci ...
今天学习了无序列表和有序列表和使用HTML5创建表格
ol建立有序列表,该列表可以用设置type="A/a" 其语法架构为 <ol> <li></li> <li></li> ...
Bootstrap 基础五表格
原文:Bootstrap <基础五>表格 Bootstrap 提供了一个清晰的创建表格的布局.下表列出了 Bootstrap 支持的一些表格元素: 标签描述 <table> ...
使用html5制作表格
使用html5制作表格使用html5制作表格使用html5制作表格我是一位大一学生,听老师说写博客有利于自身成长,今天偶然看到这个网页,写下第一次自己的博客. 这是一次老师布置的简单的作业,创建 ...
html在线表格样式模板,HTML5+CSS3 表格设计（Table）
HTML5+CSS3 表格设计(Table) 2018-09-16 CSS样式: [css] view plain copy body { width: 600px; margin: 40px aut ...
html5怎么给表格设置分页,如何让HTML5的表格支持后台排序与分页
如何让HTML5的表格支持后台排序与分页 TWaver HTML5发布已有一段时间,使用的客户也是逐渐增加,于是我也迫不及待地申请了一个试用版来写一个小网页,最近正在写到数据查询,表格显示的功能.表格 ...
html5中表格如何等分,纯css3饼图五等分
先看效果图: HTML代码如下: pie 良好优秀未提交需努力加油 98% 得分率 css代码如下: .pinOfStudent{ background-color: #ffffff; wid ...
HTML5之表格标签
<table>标签常用属性: [border]: 表格边框类别: 容器级标签作用: 定义一个表格说明: ...
html5 支持表格吗,html5 – 在HTML 5中使用表格很好吗？
简单规则 – 使用表格表格数据,使用其他元素进行演示(使用CSS设计布局),如div,section,aside,nav等.这为他们所持有的内容提供了意义,而不是为所有内容使用表事实是,开发人员在9 ...
HTML5的表格元素
1.表格构成三个基本要素 table:表格的范围,外框:用来定义表格,表格的其他元素包含在table标签里面 tr:表格的行: td表格的单元格: 2.一点说明:关于表格的属性 HTML5中删除了HT ...

HTML5 （五）表格的使用

表格标签的基本使用：

表格标签的基本属性：

宽度和高度（width和weight）的属性：

水平对齐和垂直对齐的属性：

外边距和内边距的属性：

如何制作细线表格：

表格中的 capion 标签：

标题单元格标签：

单元格合并：

HTML5 （五）表格的使用相关推荐

最新文章

热门文章

HTML5 （五） 表格的使用

表格标签的基本使用：

表格标签的基本属性：

宽度和高度（width和weight）的属性：

水平对齐和垂直对齐的属性：

外边距和内边距的属性：

如何制作细线表格：

表格中的 capion 标签：

标题单元格标签：

单元格合并：

HTML5 （五） 表格的使用相关推荐

最新文章

热门文章

HTML5 （五）表格的使用

HTML5 （五）表格的使用相关推荐