HTML表格总结

1.表格布局

table     

thead-------------------表头     

tr------------行     

td----------列     

tbody---------定义的主干的内容      

tfoot-----------表尾

<table>
		<tr>
			<td >序号</td>
   			<td>姓名</td>
   			<td>学号</td>
   		</tr>
   	<tr>
   		<td>1</td>
   		<td>张三</td>
   		<td>1234</td>
   	</tr>
</table>

---

2.表格的边框

属性：border ------------ table标签，取值 >=0的正整数，默认值是0没有边框

<table border="10" >
		<tr>
			<td>序号</td>
   			<td>姓名</td>
   			<td>学号</td>
   		</tr>
   	<tr>
   		<td>1</td>
   		<td>张三</td>
   		<td>1234</td>
   	</tr>

	</table>

---

3.表格的宽和高

width	宽
height	高

<table border="1" width="200" height="100" >
		<tr>
			<td >序号</td>
   			<td>姓名</td>
   			<td>学号</td>
   		</tr>
   	<tr>
   		<td>1</td>
   		<td>张三</td>
   		<td>1234</td>
   	</tr>

	</table>

补充：

如果 table 和 tr 同时设置不同高度， tr 的优先级高

如果 tr 和 td 同时设置了不同的高度，哪个高取哪个（哪个值大取哪个）

table和tr的高度	tr>table
tr和td的高度	哪个大取哪个

---

4.表格的对齐方式

属性： align

名称：

center	居中
left	居左（默认）
right	居右

<table border="1" width="200" height="100" align=" center">
		<tr>
			<td>序号</td>
   			<td>姓名</td>
   			<td>学号</td>
   		</tr>
   	<tr>
   		<td>1</td>
   		<td>张三</td>
   		<td>1234</td>
   	</tr>
	</table>

---

5.表格的背景

属性：

bgcolor	背景颜色
background	背景图片

注意：当bgcolor和background同时存在是优先为background

<table border="1" width="200" height="100" align=" center" bgcolor="red" background="图片2.gif">
		<tr>
			<td>序号</td>
   			<td>姓名</td>
   			<td>学号</td>
   		</tr>
   	<tr>
   		<td>1</td>
   		<td>张三</td>
   		<td>1234</td>
   	</tr>
	</table>

---

6.表格的间距和边距

间距：单元格和单元格之间的距离 cellspacing 单位像素

边距：单元格内元素距离单元格的距离 cellpading 单位像素

cellspacing	间距
cellpading	边距

<table border="1" width="300" height="200" align=" center" cellpadding="10">
		<tr>
			<td>序号</td>
   			<td>姓名</td>
   			<td>学号</td>
   		</tr>
   	<tr>
   		<td>1</td>
   		<td>张三</td>
   		<td>1234</td>
   	</tr>
	</table>


<table border="1" width="300" height="200" align=" center" cellspacing="10">
		<tr>
			<td>序号</td>
   			<td>姓名</td>
   			<td>学号</td>
   		</tr>
   	<tr>
   		<td>1</td>
   		<td>张三</td>
   		<td>1234</td>
   	</tr>
	</table>

---

7.表格的嵌套

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

---

3.7表格的合并

rowspan	列	垂直方向跨行（左右合并）
colspan	行	水平方向跨列（上下合并）

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




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

---