一.表格
表格作用: 呈现数据或统计信息
基本结构:
<table> <!--表格区-->
<tr> <!--表格行-->
<td></td> <!--单元格-->
</tr>
</table>
表格结构的扩展:
标签 | 语义 | 作用范围 |
<th> | 表头单元格 | 特殊的<td>单元格,一般作为表格的开头部分 |
<thead> | 表格页头区 | 对表格分区,定义头部区域 |
<tbody> | 表格主体区 | 对表格分区,定义主体内容区域 |
<tfoot> | 表格页脚区 | 对表格分区,定义页脚区域 |
二.css表格样式
- 表格有独特的display值:
- table 块级table元素
- inline-table 行间table元素
- 所有表格类元素都可以看作box,使用盒模型来设置
- <tr>夹层标签,一般设置前景色或背景色。受外围和内围限制,盒模型设置无效
- <td>。设置内部相关样式:单元格的宽高,内边框和内边距
- 表格边框设置属性:border-collapse 值:
- separate。默认值,table和td边框独立分开
- collapse。table和td边框合并
- td特性:
- 可把td看作是个box进行设置,其display模式为table-cell
- 对宽高的设置敏感且会自动分配,以适配于table的总宽高
- vertical-align属性实现td中的内容垂直居中
- 值:top middle bottom
简单表格
<style>
table{
border-collapse:collapse ;
border: 1px solid black;
}
td{
border: 1px solid black;
padding: 5px 15px;
text-align: center;
</style>
<table>
<tr>
<td rowspan="2">1</td>
<td colspan="4">2</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>