表格

最基本的表格：

有4个元素，table，tr，td

table:定义表格

tr : table row，定义表格里面的行

th : table header cell ,定义表头单元格

td : table data cell,定义数据单元格

默认情况下，浏览器会对表头单元格（th）里面的内容进行加粗居中的处理，td中的内容可以是文本，图像，列表，和表格。

<!DOCTYPE>
<html>
<head>
	<meta charset="utf-8">
</head>
<body>
	<table>
		<tr>
			<th>姓名</th>
			<th>年龄</th>
		<tr>
		<tr>
			<td>太阳骑士</th>
			<td>25</td>
		</tr>
		<tr>
			<td>洋葱骑士</td>
			<td>28</td>
		</tr>
	</table>
</body>
</html>

有边框的表格：

边框需要用css来实现，border属性

border-collapse: 用于合并重叠的边框线

表格标题：

caption元素：用于给表格添加标题，默认为居中

caption元素必须紧挨着table元素的开始标签

设置内边距：

padding：CSS属性，

<!DOCTYPE>
<html>
<head>
	<meta charset="utf-8">
	<style>
		table,th,td{
			border: 1px solid black;
			border-collapse: collapse;
			padding: 5px;
		}
	</style>
</head>
<body>
	<table>
		<caption>
			黑魂小鲜肉汇总
		</caption>
		<tr>
			<th>姓名</th>
			<th>年龄</th>
		<tr>
		<tr>
			<td>太阳骑士</th>
			<td>25</td>
		</tr>
		<tr>
			<td>洋葱骑士</td>
			<td>28</td>
		</tr>
	</table>
</body>
</html>

背景颜色：

background

thead、tbody、tfoot：

这三个元素可以将表格更严密的分为上中下三部分，对应表头，主体和表尾，tfoot会自动将该段的内容放到表格末尾。

colspan:

th和td元素的属性，用来设置单元格横跨的列数

rowspan：

th和td元素的属性，用来设置单元格跨行的列数

colgroup和col：

可以以列为单位批量的处理单元格。

<!DOCTYPE>
<html>
<head>
	<meta charset="utf-8">
	<style>
		table,th,td{
			border: 1px solid black;
			border-collapse: collapse;
			padding: 5px;
		}
		th {
			background: grey;
			color:white;
		}
		thead th {
			color: red;
		}
		tbody th {
			color: yellow;
		}
		tfoot th {
			color: blue;
		}
	</style>
</head>
<body>
	<table>
	
		<caption>
			黑魂小鲜肉汇总
		</caption>
		
		<thead>
			<tr>
				<th>姓名</th>
				<th>年龄</th>
			<tr>
		</thead>
		
		<tbody>
			<tr>
				<th>太阳骑士</th>
				<td>25</td>
			</tr>
		</tbody>
		
		<tfoot>
			<tr>
				<th>洋葱骑士</th>
				<td>28</td>
			</tr>
		</tfoot>	
		<tr>
			<td colspan="2">哈哈哈</td>
		</tr>
	</table>
</body>
</html>