HTML表格布局

1.table标签

1.1table标签中的属性

1.border ------------ table标签 >=0正整数 默认值是0 没有边框

2.width------------表格的宽

3.height------------表格的高

4.align-----------表格的对齐方式（可取center left right 默认是left）

5.bgcolor----------背景颜色

6.background---------背景图片

7.cellspacing---------表格的间距（单位是像素）

8.cellpading ---------表格的边距（单位是像素）

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

 

2.tr和td标签

2.1tr为表格的行（写在table标签里）

1.诺table和tr同时设置不同高度，tr的优先级高

2.2td为表格的列（写在table标签里）

1.诺td和tr同时设置不同高度，td的优先级高

3.表格的嵌套

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

4.表格的合并

1.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>

2.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>

5.个人练习

目录

1.table标签

1.1table标签中的属性

2.tr和td标签

2.1tr为表格的行（写在table标签里）

2.2td为表格的列（写在table标签里）

3.表格的嵌套

4.表格的合并

1.rowspan --------- 列 -------垂直方向跨行

2.colspan ---------- 行 --------------水平方向跨列

5.个人练习

---

<table border="1">
		<tr>
		    <td><img src="C:\Users\lhy\Desktop\呀呼\图片音频视频\1.png" width="200px"></td>
		     <td><img src="C:\Users\lhy\Desktop\呀呼\图片音频视频\2.png" width="200px"></td>
		      <td><img src="C:\Users\lhy\Desktop\呀呼\图片音频视频\3.png" width="200px"></td>
		       <td><img src="C:\Users\lhy\Desktop\呀呼\图片音频视频\4.png" width="200px"></td>
		       </tr>
		       <tr>
		       	<td>中国医生</td>
		       	<td>中国警察</td>
		       	<td>中国机长</td>
		       	<td>中国厨师</td>
		       </tr>
	</table>