对于表格,使用table来声明,可以设置它的间隔背景颜色等等;table节点下依靠tr标签来实现一行行从上而下的显示;table标签之下使用th或者td来自左往右的显示,其中th标签的字是加粗的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<!-- 使用方法:table标签标示这是一个表;caption标签表述这个表的名字;对于表每行每列标题的粗体显示,依靠于th标签;
对于表内容的填充,使用一行一行的填充,即使用tr标签,一个tr表示一行,然后在tr标签内使用th或者td标签来表示这一行从左到右的数值信息 -->
<body background="/Practice_Project/test.jpg">
<!-- 两行三列的表格,居中显示,不带边框 -->
<table align="center" style="color: red;" bgcolor="yellow">
<!-- 第一行,row -->
<tr>
<td>第一行第1列</td>
<td>第一行第2列</td>
<td>第一行第3列</td>
</tr>
<!-- 第二行,row -->
<tr>
<td>第二行第1列</td>
<td>第二行第2列</td>
<td>第二行第3列</td>
</tr>
</table>
<br />
<!-- 两行三列的表格,居中显示(新方法),带边框,添加表头 。-->
<!-- 设置边距使用cellpadding:表示一个表格内的文字距离边框的距离 -->
<!-- 设置间距使用cellspacing:表示两个表格之间的距离 -->
<!-- 对于表和表格的背景颜色设置方法如下: -->
<!-- 设置背景颜色使用bgcolor,设置背景图片使用background -->
<!-- 设置显示位置,居中还是左右 -->
<!-- 表可以使用:align或者下面的margin -->
<!-- 表格只能使用align -->
<table style="color: red; margin: 0px auto;" border="1" cellpadding="5" cellspacing="5">
<!-- 加上一个标题吧 -->
<caption>统计表表名</caption>
<!-- 列标题,标题是加粗的,这也是th和td标签的区别之一-->
<tr>
<th>列1</th>
<th>列2</th>
<th>列3</th>
</tr>
<!-- 第一行,row 注意,为了使行名粗体,使用th标签写名称-->
<tr>
<th>第一行</th>
<td align="center">一行1列</td>
<td>第一行第2列</td>
</tr>
<!-- 第二行,row -->
<tr>
<th>第二行</th>
<td>第二行第1列</td>
<td>第二行第2列</td>
</tr>
<!-- 实现两行公用一个行名,列也类似,只是需要把rowspan换做colspan="1"-->
<tr>
<th rowspan="2">公用一个</th>
<td>第三行第1列</td>
<td>第三行第2列</td>
</tr>
<tr>
<td>第四行第1列</td>
<td>第四行第2列</td>
</tr>
<!-- 表的单个表格里面也可以包含一个表 -->
<tr>
<th>第五行</th>
<td>第五行第1列</td>
<td>第五行第2列: <!-- 内部包含的那个表 -->
<table style="color: blue; margin: 0px auto;" border="1">
<caption style="font-size: 10px;">内部包含的表</caption>
<!-- 列名字 -->
<tr>
<th>头1
</td>
<th>头1
</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td>31</td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
实际显示效果: