html5 表格使用基础

在 HTML 4.01 中，不赞成使用 "align" 和 "bgcolor" 属性。

在 HTML5 中，不支持 <table> 标签的大部分属性。

一：创建表格

<span style="white-space:pre">	</span><table >
		<tr><td>一单元</td><td>二单元</td><td>三单元</td></tr>
		<tr><td>一号楼</td><td>二号楼</td><td>三号楼</td></tr>
	</table>

二：给表格加线：

只需要在table 标签中添加border属性即可

	<table border="1">
		<tr><td>一单元</td><td>二单元</td><td>三单元</td></tr>
		<tr><td>一号楼</td><td>二号楼</td><td>三号楼</td></tr>
	</table>

三：设置表格小标题： th标签是小标题，代表每一列。默认加粗，居中

	<table border="1">
		<tr><th>标题一</th><th>标题二</th><th>标题三</th></tr>
		<tr><td>一单元</td><td>二单元</td><td>三单元</td></tr>
		<tr><td>一号楼</td><td>二号楼</td><td>三号楼</td></tr>
	</table>

四：设置表格标题：用caption

	<table border="1">
		<caption>表格标题</caption>
		<tr><th>标题一</th><th>标题二</th><th>标题三</th></tr>
		<tr><td>一单元</td><td>二单元</td><td>三单元</td></tr>
		<tr><td>一号楼</td><td>二号楼</td><td>三号楼</td></tr>
	</table>

七：合并单元格：colspan代表合并行，rowspan代表合并列

	<table border="1">
		<caption>表格标题</caption>
		<tr><th colspan="4">标题一</th><th>标题二</th><th>标题三</th></tr>
		<tr ><td rowspan="3">一单元</td><td>二单元</td><td>三单元</td><td>一单元</td><td>二单元</td><td rowspan="4">三单元</td></tr>
		<tr><td>一号楼</td><td>二号楼</td><td>三号楼</td><td>一单元</td></tr>
		<tr><td>一单元</td><td>二单元</td><td>三单元</td><td>一单元</td></tr>
		<tr><td>一号楼</td><td>二号楼</td><td>三号楼</td><td>一单元</td><td>二单元</td></tr>
	</table>

八：加表头，表内容，表尾。这是标准规范表格的格式。开发中必须这样写

	<caption>大标题</caption>
		<tr><th colspan="5">小标题</th></tr>
		<thead>
		<tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
		</thead>
		<tbody>
		<tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
		<tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
		<tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
		<tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
		</tbody>
		<tfoot>
		<tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
		</tfoot>
	</table>

九：给表格设置背景色：colgroup标签是table子元素,必须在table内,caption标题后。colgroup是分配列，span是指定多少列，style设置样式

col标签设置颜色。如果没有设置span默认为1

	<table border="1">
	<caption>大标题</caption>
	<colgroup span="1" style="width: 100px" > <col  style=" background: #0f0"></colgroup>
	<colgroup span="3" style="width: 200px">  <col span="3" style="background: #f00"></colgroup>
	<colgroup span="1" style="width: 100px">  <col style="background: #00f"></colgroup>
		<tr><th colspan="5">小标题</th></tr>
		<thead>

		<tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
		</thead>
		<tbody>
		<tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
		<tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
		<tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
		<tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
		</tbody>
		<tfoot>
		<tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
		</tfoot>
	</table>