011---表格table

一、基本的语法

<table>
	<tr>
		<td>。。。</td>
		<td>。。。</td>
		<td>。。。</td>
	</tr>
	<tr>
		<td>。。。</td>
		<td>。。。</td>
		<td>。。。</td>
	</tr>
	<tr>
		<td>。。。</td>
		<td>。。。</td>
		<td>。。。</td>
	</tr>
</table>

这是一个三行三列的表格，且每一个tr>td*3都代表一行。应注意的是，table里面只能存放tr，不能放其他的标签，同样，tr里只能放td标签，不能放其它标签，但是td里面可以存放p、span等标签。类比列表标签。

1.表格标签的属性：（如下面的表单）

有几项需要注意的：

比如这一段代码：

<table width="500" height="300"  border="1" cellspacing="0" cellpadding="">
	<tr>
		<td>姓名</td>
		<td>性别</td>
		<td>年龄</td>
	</tr>
	<tr>
		<td>小明</td>
		<td>男</td>
		<td>16</td>
	</tr>
	<tr>
		<td>小红</td>
		<td>女</td>
		<td>15</td>
	</tr>
</table>

它的效果是：

如果把cellpadding的值改为50,则每一个格的大小就会发生变化，如下图，上面两个是指为空的姓名的那一格的宽高与空间分布图，下面两个为cellpadding值为50的时候，姓名那一格的宽高与空间分布图。可以明显的观察到当值为50时它的高明显增高了，再看右边的两个图，就会发现padding（内边距）值不一样，并且（姓名）文本的的大小发生了变化，所以可以得出，cellpadding值的改变会导致<td>姓名</td>的padding值的增加，从而撑大了标签<td>姓名</td>，但不是按照cellpadding的大小做出等大的改变，而是在文本的大小进行压缩的前提下再进行的改变。所以这种方法不大提倡，因为改变的我们预先定义的表格的大小。

如果标签<td>姓名</td>的cellpadding的属性值为空，而在td内添加属性align的center值，达到文本水平居中的效果，从下面的两张图中可以发现标签td的大小并没有受到相应的影响，并且在CSS里可以对td进行大量的处理，很方便。

<td align="center">姓名</td>

如果在table里添加属性align的center属性值，代表该表格在网页中，进行水平居中。如下图：

2. 表头

如果该表格需要用到表头就可以用如下的语法：

	<table width="500" height="300"  border="1" cellspacing="0" cellpadding="" align="center">
		<tr>
			<th>姓名</th>
			<th>性别</th>
			<th>年龄</th>
		</tr>
		<tr>
			<td>小明</td>
			<td>男</td>
			<td>16</td>
		</tr>
		<tr>
			<td>小红</td>
			<td>女</td>
			<td>15</td>
		</tr>
	</table>

此处的th就是代表表头的意思，并且文本有自动水平居中、加粗的效果：

还可以使用另一种方式：

        <table width="500" height="300"  border="1" cellspacing="0" cellpadding="" align="center">
		<thead>
			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>小明</td>
				<td>男</td>
				<td>16</td>
			</tr>
			<tr>
				<td>小红</td>
				<td>女</td>
				<td>15</td>
			</tr>
		</tbody>
	</table>

这里添加了thead、tbody，其中thead代表表格的头部，tbody代表表格的主体部分。

他们得效果也发生了相应的变化：

表头与表体分的更明确，在CSS里可以对他进行调样式。

3. 表格标题

<caption>标题内容</caption>

它与thead、tbody并列.

<table>
	<caption>标题内容</caption>
	<thead>
		。。。。。
	</thead>
	<tbody>
		。。。。。。
	</tbody>
</table>

如果把它加在小明的那个表格里就会有如下的效果：

用红框框起来的就是标题，它会随着表格运动而运动，是与表格一体的。

4. 合并单元格

①跨行合并

rowspan  ,它的值是数字，代表一下有几个一起合并

如下面的代码：

	<table width="500" height="300"  border="1" cellspacing="0" cellpadding="" align="center">
		<caption>班级成员统计</caption>
		<thead>
			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>小明</td>
				<td>男</td>
				<td rowspan="2">16</td>
			</tr>
			<tr>
				<td>小红</td>
				<td>女</td>
			</tr>
		</tbody>
	</table>

效果如下：

②跨列合并

colspan  值是数字，代表有几列一起合并

如上。

合并的时候要把它的要合并的那一格删掉，合并的顺序：先左、先上。

公式：删除的个数=合并的个数-1

总结：表格没有列，列是由单元格组成的。