在HTML中的表格可能和大家想的表格组成不太一样，咱们先介绍下在HTML中的表格组成是什么样的
HTML表格组成
基本的表格组成有三个
- table 表格容器(外框)
- tr 一行
- td 一个单元格
如图所示
从图中可以看出一行(tr)包含三个单元格(td)，在实际应用中，单元格与单元格之间是没有缝隙的，这个可以通过属性设置，接下来就介绍，这三个标签的属性
三个标签属性
table(表)属性
<table border="边框粗细 值数字" height="高度 值数字" width="宽度 值数字" cellspacing="单元格到单元格之间的距离 值数字" cellpadding="单元格内容到单元格之间的距离 值数字" align="表格在网页摆放位置" >
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
tr(一行)属性
<tr align="这一行单元格内容水平摆放方式 值为left right center" valign="这一行单元格内容垂直摆放方式 值为left right center" >
<!-- 当然高宽与table的属性一致 -->
</tr>td(单元格)属性
<td align="这一行单元格内容水平摆放方式 值为left right center" valign="这一行单元格内容垂直摆放方式 值为left right center" ></td>注意接下来介绍一个td(单元格)重要知识点
单元格合并
通过以下
- colspan 指明这一个单元格横向占据几个单元格宽度 默认为1
- rowspan 指明这一个单元格纵向占据几个单元格高度 默认为1
两个属性实现
先小试一下牛刀，将下图的内容为“1”的单元格占据两个单元格会是怎样
实现的上图的代码
<table border="1" height="300" width="300" cellpadding="0" cellspacing="0">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
接下来实现将内容为“1”占据两个单元格，代码如下
<table border="1" height="300" width="300" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2">1</td> 将colspan的值改为2
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
效果会是怎样
突然发现3被挤出去了，表格的整体大小没有发生变化，证明表格是有弹性，一个单元格变大，其他都会变小
那么怎么变回原来的，很简单只要把重叠的单元格（上图重叠的单元格为2）删掉就可以了，
<table border="1" height="300" width="300" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2">1</td> 将colspan的值改为2
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
效果变成了下图
这就回来了，当然向下合并也是一样的
再给举一个栗子
将上边的图片，变成下边的
实现的代码如下
<table border="1" height="300" width="300" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2">1</td>
<td rowspan="2">3</td>
</tr>
<tr>
<td rowspan="2">4</td>
<td>5</td>
</tr>
<tr>
<td colspan="2">8</td>
</tr>
</table>
表格的语义化标签
马上收尾了，最后说下其实在表格分为表头，表身，表尾，分别用以下的标签实现
- thead 表头 将第一行的代码放到其下
- tbody 表身 将表中间的代码放到其下
- tfoot 表尾 将最后一行的代码放到其下
写完后会有不一样的效果哦，这就实现HTML表格
