HTML学习笔记（四）——表格

关于表格

众所周知，表格是日常生活中常用的一种表现形式，在HTML5中，不再提倡在table中添加过多的属性，来定义表格的样式，例如：背景色，文字位置等样式属性，只建议保留一个属性border（边框），而表格的样式则使用CSS来实现设计。

创建表格

一个表格的基本结构如下图所示：

表格的基本结构

一个最基本的HTML表格常用的标记如下图所示，它们是创建表格最常用的标记，在一起配合使用就可以生成最简单的表格了。其中table即是表格的本体，tr是表格的行，td和th是表格的列，但不同的是th默认为加粗字体，常用于表头，caption为表格的标题，位于整个表格的上方。

其基本用法如下：

		<table>                       <!--表格开始-->
			<caption>...</caption>        <!--表题目-->
			<tr>                      <!--行开始-->
				<th>...</th>          <!--单元格，内容默认居中加粗-->
			</tr>                     <!--行结束-->
			<tr>		              <!--行开始-->
				<td>…</td>	          <!--单元格-->
			</tr>		              <!--行结束-->
		</table>		              <!--表格结束-->

这种书写方法实现的表格是没有边框的，示例效果图如下：

表格的边框

在HTML5以前版本里面，table标记支持很多属性，但为了新的标准希望网页样式用CSS设计，table中规定样式的属性被去掉了，只保留了"border"属性。border属性：表示是否显示表格的边框，只使用值 “1” 或 "0 “；如果修改border属性值为"0”，表示无边框，和默认效果一样。其基本语法如下：

		<table border="属性值">        <!--属性值为0或1-->

当属性值为1时，表格带有边框，示例效果图如下：

表格的图像显示

对于HTML表格，还可以在其单元格中添加图像。将图片放到单元格中的img标签中，并为其设定宽高，就可以将图片在网页上排列整齐。示例代码如下：

		<table>
			<caption>理子</caption>
			<tr> 
				<td><img src="img/li.jpg" width="100" height="100"/></td> 
				<td><img src="img/li.jpg" width="100" height="100"/></td> 
				<td><img src="img/li.jpg" width="100" height="100"/></td>
		    </tr>
			<tr> 
				<td><img src="img/li.jpg" width="100" height="100"/></td> 
				<td><img src="img/li.jpg" width="100" height="100"/></td> 
				<td><img src="img/li.jpg" width="100" height="100"/></td>
			</tr>
		</table>

生成的结果即为不带边框的图片序列，示例效果图如下：

合并单元格

当然，我们不可能每次都是刚好只用到一个单元格，有时需要对单元格进行合并，可以通过colspan 和rowspan 属性让th或td 跨越一个以上的列或行。对该属性指定的数值表示的是跨越的单元格的数量。

设置跨列—colspan

如果要对表格使用列合并，即让同一行上的不同列上的单元格合并为一个单元格，那么要找到被合并的几个单元格中处于最左侧的那个单元格，并为其加上colspan属性，在同一行中的其它单元格的标记要删除掉。其基本语法如下：

		<td colspan="#"></td>		<!-- #为需要合并的单元格数 -->

设置跨行—rowspan

如果要对表格使用行合并，即让同一列上的不同行上的几个单元格合并为一个单元格，那么要找到被合并的几个单元格中处于最上面的那个单元格，并加上rowspan属性，然后将其它行中对应的其它单元格的标记删除掉。 其基本语法如下：

		<td rowspan="#"></td>		<!-- #为需要合并的单元格数 -->

设置跨列与跨行

有时需要对单元格同时进行列与行的合并，就要让一个区域的几个单元格合并为一个单元格，那么要找到被合并的几个单元格中处于最上面且最左侧的那个单元格，同时加上colspan和rowspan属性，然后将其它对应的单元格的标记删除掉。 其基本语法如下：

        <td rowspan="#" colspan="#"></td>      <!-- #为需要合并的单元格数 -->

合并单元格示例

其中进行了行合并，列合并，行列合并，示例代码部分如下：

		<table border="1">
			<caption>行列合并</caption>
		    <tr>
		        <td>A00</td> 
				<td>A01</td>
		        <td colspan="2">A02A03</td>   <!-- 列合并 -->
		    </tr>
		    <tr>
		        <td rowspan="2">B10<br />C20</td>   <!-- 行合并 -->
		        <td>B11</td>
		        <td rowspan="2" colspan="2">B12B13<br/>C22C23</td>   <!-- 行列合并 -->
		    </tr>
			<tr>
                <td>C21</td>
            </tr>
         </table>

生成的结果为带边框的合并示例，示例效果图如下：

表格的嵌套

嵌套表格就是在一个大的表格中，再嵌进去一个或几个小的表格。即插入到表格单元格中的表格。如果用一个表格布局页面，并希望用另一个表格组织信息，则可以插入一个嵌套表格。其基本用法即为在td或th中嵌入一个完整的表格，示例代码如下：

		<table border="1">
			<tr>
				<td>1</td>
				<td rowspan="2">2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
			</tr>
			<tr>
				<td>6</td>
				<td>7</td>
				<td>8</td>
				<td>9</td>
			</tr>
			<tr>
				<td rowspan="2" colspan="2">10<br />
					<table border="1">
						<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>
				</td>
				<td>11</td>
				<td>12</td>
				<td>13</td>
			</tr>
			<tr>
				<td>14</td>
				<td colspan="2">15</td>
			</tr>
		</table>

生成的结果为带边框的嵌套示例，示例效果图如下：

表格的分组显示——thead、tfoot以及tbody

与body一样，表格也可以分为三个部分，thead、tfoot以及tbody元素使您有能力对表格中的行进行分组。 tfoot标记定义表格的页脚（脚注或表注），其永远在表格的最下行。tfoot元素应该与thead和tbody元素结合起来使用。thead元素用于对 HTML 表格中的表头内容进行分组，而tbody元素用于对 HTML 表格中的主体内容进行分组。在默认情况下这些元素不会影响到表格的布局。不过，仍可以使用 CSS 使这些元素改变表格的外观。示例代码如下：

		<table border="1">
			<thead>
				<tr>
					<th>月份</th>
					<th>收入（￥）</th>
				</tr>
			</thead>
			<tfoot>
				<tr>
					<td>总计</td>
					<td>5800</td>
				</tr>
			</tfoot>
			<tbody>
				<tr>
					<td>一月</td>
					<td>1800</td>
				</tr>
				<tr>
					<td>二月</td>
					<td>2000</td>
				</tr>
				<tr>
					<td>三月</td>
					<td>2000</td>
				</tr>
			</tbody>
		</table>

生成的结果为带边框的分组示例，可见tfoot标签在最下方显示，示例效果图如下：

综合实例

在本例的表格上显示了当天的主要市场上部分蔬菜的市场价格信息。在设计时，主要用到了分组、表头，以及单元格合并，加入单元格文字和图片信息等，其代码如下所示：

		<table border="1">
			<caption>蔬菜市场价格表</caption>
			<thead>
				<tr>
					<td>蔬菜图片</td>
					<td>计量单位</td>
					<td>东市厂</td>
					<td>西市场</td>
					<td>南市场</td>
					<td>北市场</td>
				</tr>
			</thead>
			<tfoot>
				<tr>
					<th colspan="6">日期：2020年2月25日</th>
				</tr>
			</tfoot>
			<tbody>
				<tr>
					<th>
						<img src="img/西红柿.jpg" width="100px" height="100px">
					</th>
					<th>500克</th>
					<th>2.5</th>
					<th>2.3</th>
					<th>2.1</th>
					<th>2.3</th>
				</tr>
				<tr>
					<th>
						<img src="img/茄子.jpg" width="100px" height="100px">
					</th>
					<th>500克</th>
					<th>1.6</th>
					<th>1.7</th>
					<th>1.9</th>
					<th>1.6</th>
				</tr>
				<tr>
					<th>
						<img src="img/辣椒.jpg" width="100px" height="100px">
					</th>
					<th>500克</th>
					<th>2.7</th>
					<th>2.7</th>
					<th>3.0</th>
					<th>2.8</th>
				</tr>
				<tr>
					<th>
						<img src="img/白菜.jpg" width="100px" height="100px">
					</th>
					<th>500克</th>
					<th>2.1</th>
					<th>2.5</th>
					<th>2.4</th>
					<th>2.3</th>
				</tr>
			</tbody>
		</table>

综合实例效果图如下：

结语

记录仓促，遗漏之处日后补充，如有错误或不足之处，还望指正