HTML表格(table、tr、td、th、thead、tbody、tfoot标签)
***HTML表格**
<!DOCTYPE html>
<html>
<head>
<title>表格</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<!--创建2行3列表格 -->
<table border="1" width="500px"> <!--border:表格边框,width:表格宽度-->
<caption >表格标题</caption> <!--标题标签,居中显示,仅有一个标题-->
<tr>
<th>2014年</th> <!--th标签:表格头,内容居中,加粗显示-->
<th>2015年</th>
<th>2016年</th>
</tr>
<tr>
<td>8000</td> <!--td标签:普通表格,内容左对齐-->
<td>10000</td>
<td>12000</td>
</tr>
</table>
</body>
</html>
【注意】:浏览器一般是通过加载全部表格数据后才显示,但是当数据量很大时,希望能加载一部分,即显示一部分??
--- 使用 带结构的表格!!!
三个标签 需要同时使用,但是不影响布局展示
**table表格属性:
【说明】:
(1)没有设置width,则按照文字的多少展示表格的大小;
【注意】:如果需要单元格合并???---使用 跨列属性colspan、rowspan
<table>
<thead>
<tr>
<th rowspan="2">城市</th>
<th colspan="2">2014年</th>
<th rowspan="2">2015年</th>
<th rowspan="2">2016年</th>
</tr>
<tr>
<th>上半年</th>
<th>下半年</th>
</tr>
</thead>
<tbody>
<tr>
<td>北京</td>
<td>8000</td>
<td>9000</td>
<td>10000</td>
<td>12000</td>
</tr>
<tr>
<td>上海</td>
<td>6000</td>
<td>7000</td>
<td>8000</td>
<td>10000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>合计</td>
<td>7000</td>
<td>8000</td>
<td>9000</td>
<td>11000</td>
</tr>
</tfoot>
</table>
【总结】:
(1)尽量少的使用表格嵌套;
(2)尽量少的使用表格跨行跨列;
详情参考《表格资料》