2.HTML表格

一、基础表格

1.HTML表格

• < table > 表格
• < tr > 行
• < td > 单元格

2.表格的语法结构：

<table> <!--表示表格的开始>
    <tr>
     	<td>...</td>
    	 ...
    </tr>
    <tr>
  	<td>...</td>
        ... 
    </tr>
</table> <!--表示表格的结束>

创建一个两行三列表格

<table border="1">
    <tr>
     <td>2014</td>
     <td>2015</td>
     <td>2016</td>
    </tr>
    <tr>
     <td>999</td>
     <td>888</td>
     <td>777</td>
    </tr>
   </table>

一一对应，出来的效果为

2014	2015	2016
999	888	777

3.带表头的表格

< th > < /th >表格头 内容居中，加粗显示

4.带标题的表格

< caption > < /caption >居中显示

5.带结构的表格

表格分为三部分：tread表头、tbody主体、tfoot脚注。

同时存在，同时使用。

<thead> 
    <tr>
        <td>表头</td>
    </tr>
</thead>
<tbody>
    <tr>
        <td>主体</td>
    </tr>
</tbody>
<tfoot>
    <tr>
        <td>脚注</td>
    </tr>
</tfoot>

6.表格属性

7.跨列属性colspan

< td colspan=“2”>…< /td >//跨了两格

8.跨行属性rowspan

< td rowspan=“2”>…< /td >

9.表格嵌套

1.完整表格结构：< table > < /table >
2.放到< td >标签内

三、表格布局案例

1.尽量少的使用表格嵌套
2.尽量少的使用跨行跨列
3.在使用表格进行网页结构布局一般不使用border属性