1.什么是表格标签? 表格标签作用: 用来给一堆数据添加表格语义 其实表格是一种数据的展现形式, 当数据量非常大的时候, 表格这种展现形式被认为是最为清晰的一种展现形式
2.格式: 3.注意点 3.1表格标签有一个边框属性, 这个属性决定了边框的宽度. 默认情况下这个属性的值是0, 所以看不到边框 3.2表格标签和列表标签一样, 它是一个组合标签, 所以table/tr/td要么一起出现, 要么一起不出现, 不会单个出现 表格的属性 1.宽度和高度的属性 可以给table标签和td标签使用 1.1表格的宽度和高度默认是按照内容的尺寸来调整的, 也可以通过给table标签设置width/height属性的方式来手动指定表格的宽度和高度 1.2如果给td标签设置widht/height属性, 会修改当前单元格的宽度和高度, 不会影响整个表格的宽度和高度
2.水平对齐和垂直对齐的属性 其中水平对齐可以给table标签和tr标签和td标签使用 垂直对齐只能给tr标签和td标签使用 2.1给table标签设置align属性, 可以控制表格在水平方向的对齐方式 2.2给tr标签设置align属性, 可以控制当前行中所有单元格内容的水平方向的对齐方式 2.3给td标签设置align属性, 可以控制当前单元格中内容在说方向的对齐方式 注意点: 如果td中设置了align属性, tr中也设置了align属性, 那么单元格中的内容会按照td中设置的来对齐
2.4给tr标签设置valign属性, 可以控制当前行中所有单元格中的内容, 在垂直方向的对齐方式 2.5给td标签设置valign属性, 可以控制当前单元格中的内容在垂直方向的对齐方式 注意点: 如果td中设置了valign属性, tr中也设置了valign属性, 那么单元格中的内容会按照td中设置的来对齐
3.外边距和内边距的属性 只能给table标签使用 3.1.外边距就是单元格和单元格之间的距离, 我们称之为外边距 默认情况下单元格和单元格之间的外边距的距离是2px
3.2 内边距就是单元格的边框和文字之间的间隙, 我们称之为内边距 默认情况下内边距是1
注意: 以上讲解的内容仅仅作为了解, 以后在企业开发中所有控制样式的都是通过CSS 制作细线表格 在表格标签中想通过指定外边距为0来实现细线表格是不靠谱的, 其实它是将2条线合并为了一条线, 所以看上去很不舒服
细线表格的制作方式: 1.给table标签设置bgcolor 2.给tr标签设置bgcolor 3.给table标签设置cellspacing = “1px”
注意点: table标签和tr标签以及td标签都支持bgcolor属性 其他属性 1.表格标题 在表格标签中提供了一个标签专门用来设置表格的标题, 这个标签叫做caption. 只要将标题写在caption标签中, 那么标题就会自动相对于表格的宽度居中
2.caption标签的注意点: 2.1caption一定要写在table标签中, 否则无效 2.2caption一定要紧跟在table标签后面
3.标题单元格标签 3.1.在表格标签中提供了一个标签专门用来存储每一列的标题, 这个标签叫做th标签, 只要将当前列的标题存储在这个标签中就会自动居中+加粗文字
3.2.到此为止我们就发现, 其实表格中有两种单元格, 一种是td, 一种是th. td是专门用来存储数据的, th是专门用来存储当前列的标题的 表格合并 1.水平方向上的单元格合并 可以给td标签添加一个colspan属性, 来指定把某一个单元格当做多个单元格来看待(水平方向) 例如:
含义: 把当前单元格当做两个单元格来看待注意点: 1.由于把某一个单元格当做了多个单元格来看到, 所以就会多出一些单元格, 所以需要删掉一些单元格才能正常显示 2.一定要记住单元格合并永远都是向后或者向下合并, 而不能向前或者向上合并
2.垂直方向上的单元格合并 可以给td标签设置一个rowspan属性, 来指定把某一个单元格当做多个单元格来看待(垂直方向) 例如:
含义: 把当前单元格当做两个单元格来看待