HTML的表格基本内容

目录

1.表格的布局

结构：

2.表格的边框

代码

效果 1

3.表格的宽和高

属性

代码 

4.表格对齐的方式

属性

代码

5.表格的背景

属性

代码

效果 2

6.表格的间距和边距

属性

代码

效果 3

7.表格的嵌套

代码

效果

8.表格的合并

属性

rowspan的代码

colspan 的代码

---

1.表格的布局

结构：

 <table>

    <tr>

           <td>&nbsp;</td>

       </tr>

</table>

元素	意义
thead	表头
tr	行
td	列

2.表格的边框

border------table的标签  

>=0的正整数 默认值是0

代码

<table border="10">
	  	<tr>
	   	    <td>序号</td>
	   		<td>姓名</td>
	   		<td>学号</td>
	   	</tr>
	   	<tr>
	   		<td>1</td>
	   		<td>雨</td>
	   		<td>123555656</td>
	   	</tr>
	   </table>

效果 1

3.表格的宽和高

属性

属性	描述
width	规定表格的宽度
height	规定表格的高度

代码 

<table border="1" width="300" height="400">
	  	<tr>
	   	    <td>序号</td>
	   		<td>姓名</td>
	   		<td>学号</td>
	   	</tr>
	   	<tr>
	   		<td>1</td>
	   		<td>雨</td>
	   		<td>123555656</td>
	   	</tr>
	   </table>

4.表格对齐的方式

属性

align标签

align标签取值	描述
center	居中
left	居左
right	居右

表格默认left------居左

代码

	<table border="1" width="300" height="400" align="center">
	  	<tr>
	   	    <td>序号</td>
	   		<td>姓名</td>
	   		<td>学号</td>
	   	</tr>
	   	<tr>
	   		<td>1</td>
	   		<td>雨</td>
	   		<td>123555656</td>
	   	</tr>
	   </table>

5.表格的背景

属性

属性	描述
bgcolor	背景颜色
background	背景图片

代码

<table border="1" width="300" height="400" align="center" bgcolor="#ccc">
	  	<tr>
	   	    <td>序号</td>
	   		<td>姓名</td>
	   		<td>学号</td>
	   	</tr>
	   	<tr>
	   		<td>1</td>
	   		<td>雨</td>
	   		<td>123555656</td>
	   	</tr>
	   </table>

效果 2

 

6.表格的间距和边距

间距：单元格与单元格之间的距离

边距：单元格内元素与单元格之间的距离

属性

属性	描述
cellspacing	调整间距
cellpadding	调整边距

cellspacing、cellpadding单位都是像素。

当table和tr同时设置不同高度,tr优先级高。

当tr与td同时设置不同高度,谁数值高取谁。

代码

<table border="1" width="300" align="center" bgcolor="#ccc"  cellspacing="5" cellpadding="20">
	  	<tr height="200">
	   	    <td>序号</td>
	   		<td>姓名</td>
	   		<td>学号</td>
	   	</tr>
	   	<tr height="200">
	   		<td>1</td>
	   		<td>雨</td>
	   		<td>123555656</td>
	   	</tr>
	   </table>

效果 3

 

7.表格的嵌套

代码

	<table border="1" width="300px"> 
		<tr>
			<td><table border="1" width="100px" align="center"> 
				<tr>
					<td>&nbsp;</td> 
					<td>&nbsp;</td> 
				</tr>
				</table> 
			</td>   
			</tr> 
	</table>

效果

 

8.表格的合并

属性

属性	描述
rowspan	列---垂直方向跨行
colspan	行---水平方向跨列

rowspan的代码

	<table border="1" width="300" height="200" align="center">
	 <tr>
	 	<td rowspan="3">&nbsp;</td> 
	 	<td>&nbsp;</td> 
	 	<td>&nbsp;</td> 
	 	<td>&nbsp;</td> 
	 </tr> 
	 <tr>
	 	<td>&nbsp;</td>
	    <td>&nbsp;</td> 
	    <td>&nbsp;</td> 
	</tr> 
	<tr>
		<td>&nbsp;</td> 
		<td>&nbsp;</td> 
		<td>&nbsp;</td> 
	</tr> 
</table>

colspan 的代码

	<table border="1" width="300" height="200" align="center">
	 <tr>
	 	<td colspan="3">&nbsp;</td>
	 </tr>
	 <tr> 
	 	<td>&nbsp;</td> 
	 	<td>&nbsp;</td> 
	 	<td>&nbsp;</td> 
	 </tr> 
	 <tr>
	 	<td>&nbsp;</td>
	    <td>&nbsp;</td> 
	    <td>&nbsp;</td> 
	</tr> 
	<tr>
		<td>&nbsp;</td> 
		<td>&nbsp;</td> 
		<td>&nbsp;</td> 
	</tr> 
</table>