美文网首页
表格标签(table)

表格标签(table)

作者: CJCJCCJ | 来源:发表于2016-11-20 23:09 被阅读192次

其实表格标签中的table代表整个表格, 也就是一堆table标签就是一个表格
其实表格标签中的tr标签代表整个表格中的一行数据, 也就是说一对tr标签就是表格中的一行
其实表格标签中的td标签代表表格中一行中的一个单元格, 也就是说一对td标签就是一行中的一个单元格

tr指的是一行,td指的是一个

注意点

表格标签有一个边框属性, 这个属性决定了边框的宽度. 默认情况下这个属性的值是0, 所以看不到边框
表格标签和列表标签一样, 它是一个组合标签, 所以table/tr/td要么一起出现, 要么一起不出现, 不会单个出现

宽度和高度属性只给table和td设置,分别指定这个table 和 当前td的width和height

水平对齐(align)和垂直对齐(valign)的属性

水平对齐:table,tr,td都可以用
垂直对齐:只能给tr标签和td标签使用

注意点: 如果td中设置了align属性, tr中也设置了align属性, 那么单元格中的内容会按照td中设置的来对齐

外边距和内边距的属性(外边距:cellspacing,内边距:cellpadding)

只能给table标签使用
外边距就是单元格和单元格之间的距离, 我们称之为外边距
默认情况下单元格和单元格之间的外边距的距离是2px
内边距就是单元格的边框和文字之间的间隙, 我们称之为内边距
默认情况下内边距是1

细线表格的制作方式:
1.给table标签设置bgcolor
2.给tr标签设置bgcolor
3.给table标签设置cellspacing = "1px"

caption用来存放表格标题
2.caption标签的注意点:
2.1caption一定要写在table标签中, 否则无效
2.2caption一定要紧跟在table标签后面

3.标题单元格标签
3.1.在表格标签中提供了一个标签专门用来存储每一列的标题, 这个标签叫做th标签, 只要将当前列的标题存储在这个标签中就会自动居中+加粗文字
3.2.到此为止我们就发现, 其实表格中有两种单元格, 一种是td, 一种是th. td是专门用来存储数据的, th是专门用来存储当前列的标题的

1.由于表格中存储的数据比较复杂, 为了方便管理和阅读以及提升语义, 我们可以对表格中存储的数据进行分类
表格中存储的数据可以分为4类
1.1表格的标题
1.2.表格的表头信息
1.3.表格的主体信息
1.4.表格的页尾信息
2.表格的完整结构

caption作用: 指定表格的标题
thead作用: 指定表格的表头信息
tbody作用: 指定表格的主体信息
tfoot作用: 指定表格的附加信息
3.注意点:
3.1.如果我们没有编写tbody, 系统会系统给我们添加tbody
3.2.如果指定了thead和tfoot, 那么在修改整个表格的高度时, thead和tfoot有自己默认的高度, 不会随着表格的高度变化而变化

水平方向上合并:
[图片上传中。。。(3)]

竖直方向上合并:
[图片上传中。。。(4)]

永远是向右或者向下合并
修改了当前tr,要注意对本tr的td下一个tr的td进行修改
[图片上传中。。。(5)]

[图片上传中。。。(6)]

相关文章

  • table表格

    table标签:表格 双标签 表格级(display:table) table有border width heig...

  • 表格标签(table)

    其实表格标签中的table代表整个表格, 也就是一堆table标签就是一个表格其实表格标签中的tr标签代表整个表格...

  • html和css进阶二

    一、table标签 table的构成table表示表格开始表格结束tr表示表格中的行标签,一个表格中有多少行就应该...

  • 【前端】-009-页面制作-HTML-表格标签

    表格的基本标签 表格标签:table, ... 表格的标题标签:caption titleName 表格头部:th...

  • table标签

    table 表格 双标签 表格级 写法 (th表格头) (单元格) 一个table标签可以有多个tr和td标签组成...

  • HTML中的<table>

    table的作用 : 定义HTML文档中的表格 table的元素 标签给表格设置标题 标签定义表格的页头 定义表格...

  • 前端开发学习第十一天

    表格 表格的基本标签有:table标签(表格)、tr标签(行)、td标签(单元格)。 标签和 标签都要在表格的开始...

  • 2018-08-26html表格和简历实战

    html表格 table常用标签 1、table标签:声明一个表格 2、tr标签:定义表格中的一行 3、td和th...

  • HTML&CSS(Day02),表格表单

    1、表格 表格:由table标签(表格)、tr标签(行)、td标签(标准单元格)、caption标签(标题)、...

  • HTML结尾与CSS3 (No.3)

    结束课堂上的HTML部分,开始CSS部分 HTML表格和表单 一、表格table标签代表一个表格,在table标签...

网友评论

      本文标题:表格标签(table)

      本文链接:https://www.haomeiwen.com/subject/zwwypttx.html