HTML基础——表格

一、绘制表格

<!--	操作表格-->
<!--	表格居中，背景图案为img.jpeg,背景色为"#3A9734"边框宽5个px，颜色为"#B41012"，表格高200px，宽度为300px-->
	<table align="center" background="../demo/img.jpeg" bgcolor="#3A9734" border="5" bordercolor="#B41012" height="200" width="300"> 
		<caption>翻译</caption>
		<tr>
			<td>苹果：</td>
			<td>apple</td>
		</tr>
		<tr>
			<td>香蕉</td>
			<td>banana</td>
		</tr>
	</table>

网页截图为：

二、行标记< tr >及属性

	<table border="" align="center" width="300">
<!--	操作行-->
<!--	设置首行背景色，文字水平垂直均居中，行高为60px-->
		<tr bgcolor="#82B5CB" align="center" valign="middle" height="60" >
			<td>姓名</td>
			<td>数学成绩</td>
		</tr>
		<tr>
			<td>张三</td>
			<td>97分</td>
		</tr>
		<tr>
			<td>李四</td>
			<td>93分</td>
		</tr>
		<tr>
			<td>王五</td>
			<td>71分</td>
		</tr>
	</table>

网页截图为：

三、单元格标记< td >属性、表头标记< th >属性

	<table border="" align="center" height="250" width="500">
		<tr align="center">
<!--	操作单元格-->
<!--	重点关注一下单元格格式，知道怎么构成的;注意一下下面是表头-->
			<th rowspan="4" width="50" bgcolor="#C8ADD9"> 电<br>子<br>信<br>息<br>工<br>程<br>图<br>书</th>
			<td>图书类别</td>
			<td>图书名称</td>
			<td>图书价格</td>
		</tr>
		<tr align="center">
			<td rowspan="3">硬件相关</td>
			<td>电路分析</td>
			<td>79.8</td>
		</tr>
		<tr align="center">
			<td>模拟电子电路基础</td>
			<td>99.8</td>
		</tr>
		<tr align="center">
			<td>数字电路基础</td>
			<td>66.9</td>
		</tr>
	</table>

网页截图为：

四、表格的结构标记

<!--	注意一下thead、tbody和tfoot的用法-->
	<table align="center" border="" width="200">
		<thead align="center" bgcolor="#DD898B">
			<tr>
				<td colspan="2">xx年级xx班数学成绩</td>
			</tr>
		</thead>
		<tbody align="left" bgcolor="#C9C4C4">
			<tr>
				<td>姓名</td>
				<td>成绩</td>
			</tr>
			<tr>
				<td>张三</td>
				<td>91</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>95</td>
			</tr>
		</tbody>
		<tfoot align="right">
			<tr>
				<td colspan="2">教师：xx</td>
			</tr>
		</tfoot>
	</table>

网页截图为：