一、基础表格
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属性