10、HTML表格（table 、th、tr、td、合并单元格）的简单认识

1、表格的定义

表格的定义是通过 table 标签来定义的，当然了，如果只是写一个 table 标签，是看不见任何内容的，一个表格是由行和列组成，而在HTML中，行的定义又是由 tr 标签来定义的，列是由 td 标签来定义的。
例如：

	<table >
			<tr>
				<td>1-1</td>
				<td>1-2</td>
			</tr>
			<tr>
				<td>2-1</td>
				<td>2-2</td>
			</tr>
		</table>

代码效果：

---

这怎么看都不想是表格吧？不急，那是因为HTML表格默认是不显示边框的，所以，我们还要设置表格的边框，如下：（在table标签添加border属性，属性值为边框的宽度，单位是像素）

		<table border="1px">
			<tr>
				<td>1-1</td>
				<td>1-2</td>
			</tr>
			<tr>
				<td>2-1</td>
				<td>2-2</td>
			</tr>
		</table>

---

现在效果如下：

通过上面可以看出：定义一个简单的表格，先用 table 标签确定好代码范围，按照自己想要的效果，确定想要几行几列，比如需要一行两列，就在 table 标签里面定义一个 tr 标签，然后再在 tr 标签里面定义 两个 td 标签就可以了。td 标签的意思 table data ，即表格数据。td 标签中间就是显示的内容。

---

2、表头单元格th标签

th 标签是与 td 标签同级的，是用来定义表头单元格的，默认是加粗显示的。在上面的代码的基础上增加一个 th 标签 ，如下：

	<table border="1">
			<tr>
				<th>aaa</th>
				<th>bbb</th>
			</tr>
			<tr>
				<td>1-1</td>
				<td>1-2</td>
			</tr>
			<tr>
				<td>2-1</td>
				<td>2-2</td>
			</tr>
		</table>

---

效果如下：

可以看出是默认加粗显示的。

3、调整整体表格大小

前面提到表格是默认不显示表框的，需要设置 table 标签的 border 属性，同样的，我们还可以通过设置 table 标签的 width 以及 height 属性，用来调整表格的整体大小。如下：

	<table border="1" width="220" height="220">
			<tr>
				<th>aaa</th>
				<th>bbb</th>
			</tr>
			<tr>
				<td>1-1</td>
				<td>1-2</td>
			</tr>
			<tr>
				<td>2-1</td>
				<td>2-2</td>
			</tr>
	</table>

---

效果如下：

这里并不是我将图片放大的，而是表格整体尺寸变大了，是不是又发现了 th 标签的秘密呢？没错，th 标签默认是居中于单元格的。

---

4、合并单元格

如果要将两个或多个列合并为一个列，将使用colspan属性
如果要合并两行或更多行，则将使用rowspan属性。
这两个属性都是针对单元格的，也就是 td 标签 或 th 标签。
这两个属性的值就是需要合并的单元格的个数。

---

例子如下：

<table border="1" width="220" height="220">
			<tr>
				<th rowspan="2">aaa</th>
				<th>bbb</th>
			</tr>
			<tr>
				<td>1-2</td>
			</tr>
			<tr>
				<td colspan="2">2-1</td>
			</tr>
		</table>

---

效果如下：

5、后续学习

1、这些只是一些简单的用法，还有很多的知识，但是对于我而言，这些已经够用了，比如设置表格的背景颜色，边框颜色，这些都是可以的，但是官方已经指出，在HTML5中尽量不要使用。详情请点击。
2、诸如 thead、tbody、tfoot 等标签也是相差不大。不再赘述。
3、后面自己动手，使用表格标签写一个课程表当做练习。