对HTML5表格的一些总结——border-collapse、、colspan、rowspan等

对HTML5表格的一些总结——border-collapse、、colspan、rowspan等

首来看一些基本的表标记：

• 指定表标题

  	<!--指定表标题——表最上面的大标题-->
  	<caption></caption>
  

  举例：

  	<table>
  		<caption>大标题</caption>
  		<tr><td rowspan="5">我跨行了</td></tr>
  		<tr>
  			<td>1</td>
  			<td>2</td>
  			<td>3</td>
  			<td>4</td>
  		</tr>
  		<tr>
  			<td>1</td>
  			<td>2</td>
  			<td>3</td>
  			<td>4</td>
  		</tr>
  		<tr>
  			<td>1</td>
  			<td>2</td>
  			<td>3</td>
  			<td>4</td>
  		</tr>
  		<tr>
  			<td>1</td>
  			<td>2</td>
  			<td>3</td>
  			<td>4</td>
  		</tr>
  	</table>
  

  效果图：
  

• 指定表报头

  	<!--指定表报头-->
  	<thead></thead>
  

• 指定表正文

  	<!--指定表正文-->
  	<tbody></tbody>
  

• 指定表表尾

  	<!--指定表表尾-->
  	<tfoot></tfoot>
  

• 指定表列的标题，一般和搭配使用

  	<!--指定表列的标题，一般和<thead>搭配使用-->
  	<th></th>
  

• 创建行

  	<!--创建行-->
  	<tr></tr>
  

• 创建列

  	<!--创建列-->
  	<td></td>
  

• 跨列

  	<td colspan="3"></td>
  

  举例：

  	<table>
  		<tr><td colspan="4">我跨列了</td></tr>
  		<tr>
  			<td>1</td>
  			<td>2</td>
  			<td>3</td>
  			<td>4</td>
  		</tr>
  	</table>
  

  效果图：
  

• 跨行

  	<td rowspan="5"></td>
  

  举例：

  	<table>
  		<tr><td rowspan="5">我跨列了</td></tr>
  		<tr>
  			<td>1</td>
  			<td>2</td>
  			<td>3</td>
  			<td>4</td>
  		</tr>
  		<tr>
  			<td>1</td>
  			<td>2</td>
  			<td>3</td>
  			<td>4</td>
  		</tr>
  		<tr>
  			<td>1</td>
  			<td>2</td>
  			<td>3</td>
  			<td>4</td>
  		</tr>
  		<tr>
  			<td>1</td>
  			<td>2</td>
  			<td>3</td>
  			<td>4</td>
  		</tr>
  	</table>
  

  效果图：
  

10.十分值得注意的两个属性：border-collapse、colspan、rowspan

• 折叠表格边框

  	border-collapse:collapse;
  

• 不折叠表格边框

  	border-collapse:separate;