HTML中 table

1.Html中的表格的结构

1.表格(table)>行（tr） >单元格（td）
   <table>
   <tr>
        <td></td>
   </tr>
   </table>

2.基本结构的特点
a.三个标签都是表格的基本构成结构，缺一不可且嵌套关系不可以改变;
b.多个td形成tr,多个tr形成table;

3.表格结构的拓展
a.<th> 表头单元格，一种特殊的td单元格，一般作为表格的开头部分;
b.<thead> 表格页头区，用来对表格进行分区，定义表格的头部区域;
c.<tbody> 表格的主体区域，用来对表格进行分区，定义表格主体内容区域;
d.<tfoot> 表格页脚区，用来对表格进行分区，定义表格的页脚和标注区域;
1.th经常会用到，默认有加粗的效果；
2.使用<thead>，<tbody>，<tfoot>，必须一起使用，
且顺序为<thead>，<tfoot>，<tbody>
3.colspan 跨列,横向合并
rowspan 跨行,纵向合并;

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的属性支持得比较友好;

猜你喜欢