介绍

1、table（表格）可以表示一些格式化数据，例如课程表、人名单、成绩单……

2、在table中使用tr表示表格中的一行，有几个tr就有几行

3、tr中使用td表示一个单元格，有几个td就表示有几个单元格

---

合并单元格

colspan（横向合并单元格）

示例：

<table>
	<tr>
		<td colspan="2">A</td>
	</tr>
</table>			//一行一列的表格

rowspan（纵向合并单元格）

示例：
<table>
	<tr>
		<td rowspan="2">B</td>
	</tr>
</table>			//一行一列的表格

---

长表格

可以将一个表格分成三个部分

	thead		头部
	
	tbody		主体
	
	tfoot		底部

	th			表示头部的单元格（有一个加粗的效果）

示例：

<table>

	<thead>
		<tr>
			<th>日期</th>
			<th>收入</th>
			<th>支出</th>
			<th>合计</th>
		</tr>
	</thead>

		<tbody>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</tbody>

			<tfoot>
				<tr>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
			</tfoot>
</table>			
	

---

表格的样式

border-spacing（指定边框之间的距离）

示例：

	border-spacing:0px;

---

border-collapse（设置边框的合并）

示例：

	border-collapse:collapse;

---

注

1、如果表格中没有使用 tbody ，而是直接使用 tr ，那么浏览器会自动创建一个       tbody ，并且将 tr 全部放到 tbody 中

tr 不是 table 的子元素

2、默认情况下元素在td中是垂直居中的，可以通过vertical-align来修改

---

将元素设置成单元格实现居中（dispaly:table-cell）

示例：

	.box1{
			width:300px;
			
			height:300px;
			
			background-color:orange;


			`display:table-cell;
			vertical-align:middle;`
		//将元素设置为单元格td，然后设置垂直居中（不推荐用来布局）
	}