HTML5 + CSS3 4

一.表格

表格作用： 呈现数据或统计信息

基本结构：

<table>    <!--表格区-->
    <tr>         <!--表格行-->
        <td></td>       <!--单元格-->
    </tr>
</table>

表格结构的扩展：

标签	语义	作用范围
<th>	表头单元格	特殊的<td>单元格，一般作为表格的开头部分
<thead>	表格页头区	对表格分区，定义头部区域
<tbody>	表格主体区	对表格分区，定义主体内容区域
<tfoot>	表格页脚区	对表格分区，定义页脚区域

二.css表格样式

• 表格有独特的display值：

1. table 块级table元素
2. inline-table 行间table元素

• 所有表格类元素都可以看作box，使用盒模型来设置
• <tr>夹层标签，一般设置前景色或背景色。受外围和内围限制，盒模型设置无效
• <td>。设置内部相关样式：单元格的宽高，内边框和内边距
• 表格边框设置属性：border-collapse 值：

1. separate。默认值，table和td边框独立分开
2. collapse。table和td边框合并

• td特性：

1. 可把td看作是个box进行设置，其display模式为table-cell
2. 对宽高的设置敏感且会自动分配，以适配于table的总宽高
3. vertical-align属性实现td中的内容垂直居中
4. 值：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>