1.Html中的表格的结构 |
1.表格(table)>行(tr) >单元格(td) <table> <tr> <td></td> </tr> </table> |
2.基本结构的特点 a.三个标签都是表格的基本构成结构,缺一不可且嵌套关系不可以改变; b.多个td形成tr,多个tr形成table; |
3.表格结构的拓展
|
4.表格的样式 表格类的元素是比较特殊的一类元素,他们有自己独特的display属性; 有块状元素和行间元素的特点; |
5.样式技巧 a.所有的表格标签的元素都可以看做是box,使用盒子模型来设置; b.基于表格元素之间的固定的嵌套关系,使用盒子模型需要注意一下几点 1.<table> 外围标签 设置外围相关样式:表格的整体宽高,外边距和外边框等,不能设置内边距; 2.<tr> 夹层标签 设置背景或前景,受外围和内部的限制,盒模型设置无效,不能设置外边距; 3.<td> 内部标签 设置内部相关样式,单元格的宽,内边框和内边距等; |
6.表格边框的设置 1.默认情况下,表格的<table>和单元格 <td>都有边框的设置; 2.通过border-collapse属性可以将两者的边框进行合并; border-collapse separate/'sepəreɪt/ 默认值 ;<table>和<td>边框独立开来; collapse/kə'læps/: <table>和<td>边框合并为单一的边框; |
3.单元格td的特性 1.可以把<td>看作box进行设置,其display模式为table-cell 2.对宽高的设置敏感且会自动分配,以适配于<table>的总高度; 3.完美呈现vertical-align属性效果,实现td中内容元素的垂直居中;/['vɜrtɪk(ə)l/ vertical-align: top 顶部对齐 middle 垂直居中对齐 bottom 底部对齐 vertical-align这个属性是一个比较麻烦的属性; 块状元素:很多情况下,对vertical-align的属性支持不是很友好; 行间元素: 对vertical-align的属性支持得比较友好; |