html table 表格标签

        刚开始学习前端的,看老师非常轻而易举的就能写出一个表格的架构,然后对表格的边框、间距、背景色等进行非常熟练的操作。自己羡慕的同时,翻阅html的文档,刚开始也看的云里雾里。但后面自己多加练习也能做到了得心应手的地步,特此记录下各个标签的用法:

首先我们看下html文档对<table> 标签定义

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。

更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

<table border="1" cellspacing="20" cellpadding="20" align="center" width="500">
		<caption>个人信息</caption>
		<tr>
			<th align="left">编号</th>
			<th>姓名</th>
			<th align="right">年龄</th>
			<th>性别</th>
			<th colspan="2">电话</th>
		</tr>
		<tr>
			<td bgcolor="#008000" >1</td>
			<td>张三</td>
			<td>24</td>
			<td>男</td>
			<td>&nbsp;</td>
			<td>112</td>
		</tr>
		<tr>
			<td>2</td>
			<td>李四</td>
			<td>25</td>
			<td>男</td>
			<td>110</td>
			<td>112</td>
		</tr>
		<tr>
			<td rowspan="2">4</td>
			<td>王二</td>
			<td>30</td>
			<td>男</td>
			<td>110</td>
			<td>112</td>
			
		</tr>
		<tr>
			<td>王二</td>
			<td>30</td>
			<td>男</td>
			<td><img width="100px" height="80px" src="images/01.jpg" ></td>
			<td>112</td>
		</tr>
	</table>

 cellpadding :主要是对每个边框内边距的调节

align: 如果定义在table上面就可以控制表格的对齐，如果定义在td或者th标签上面则是控制所属单元格文字的对齐方向

bgcolor:可以在table 、th 、上面使用。定义在td、th上面则单独填充所属表格，如果定义在table标签则是定义全部表格的背景颜色

rowspan、colspan则是对表格的纵向、横向的合并

boder:设置表格的边框的宽度

从上面的代码可以看出td也可以填充图片 或者空白内容 用&nbsp; 去占位

所以上图的效果如下：