html中的table标签

table

1. table 表 块元素
2. tr table-row 块元素
3. th table-head 行级块元素
4. td table-data 行级块元素
5. tr, th, td也叫作单元格
6. table属性:
   border 边框
   cellspacing 单元格键的缝隙
   cellpadding 单元格中文本距离单元格边框的距离
7. 单元格合并
   rowspan 行数合并, 纵向合并
   colspan 列数合并, 横向合并
   最后一行不能向下合并(rowspan), 最后一列不能向右合并(colspan)

<style type="text/css">
	table {
		border: 10px solid #D3F026;
		width: 600px;
		margin: 0 auto;
	}
	
	/*td 行级块元素*/
	table td {
		height: 50px;
		border: #90E1BE solid 5px;
		text-align: center;
		
	}
</style>

		<!--单元格合并
	rowspan 行数合并, 纵向合并
	colspan 列数合并, 横向合并
	最后一行不能向下合并(rowspan), 最后一列不能向右合并(colspan)
-->
<table width="700px" border="1" cellpadding="2" cellspacing="0" >
	<tr>
		<td>单元格1</td>
		<td colspan="4">单元格2</td>
		<td colspan="2" rowspan="2">单元格3</td>
		<!--<td>单元格4</td>
		<td>单元格5</td>-->
		<!--<td>单元格6</td>-->
		<!--<td>单元格7</td>-->
	</tr>
	<tr>
		<td rowspan="3">单元格1</td>
		<td rowspan="4">单元格2</td>
		<td>单元格3</td>
		<td>单元格4</td>
		<td>单元格5</td>
		<!--<td>单元格6</td>-->
		<!--<td>单元格7</td>-->
	</tr>
	<tr>
		<td>单元格1</td>
		<td>单元格2</td>
		<td>单元格3</td>
		<td>单元格4</td>
		<td>单元格5</td>
		<!--<td>单元格6</td>-->
		<!--<td>单元格7</td>-->
	</tr>
	<tr>
		<td>单元格1</td>
		<!--<td>单元格2</td>-->
		<td colspan="4" rowspan="3" style="width: 600px; height: 200px;">单元格3</td>
		<!--<td>单元格4</td>
		<td>单元格5</td>
		<td>单元格6</td>-->
		<!--<td>单元格7</td>-->
	</tr>
	<tr>
		<td>单元格1</td>
		<td>单元格2</td>
		<!--<td>单元格3</td>
		<td>单元格4</td>
		<td>单元格5</td>
		<td>单元格6</td>-->
		<!--<td>单元格7</td>-->
	</tr>
</table>

8. 另外,有关行级块元素的标签:
   行级块元素
   th table-head 行级块元素
   td table-data 行级块元素
   img 行级块元素