HTML核心（四）HTML表格及表格系列标签的用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML表格及表格系列标签的用法</title>
</head>
<body>
<table border="2px" cellspacing="10px" width="500px" height="500px" align="center">
<caption>这是表格头</caption>
<th>这是单元格头1</th><th>这是单元格头2</th><th>这是单元格头3</th>
<tr align="center" valign="center"><td>第一行第一列</td><td>第一行第二列</td><td>第一行第三列</td></tr>
<tr align="left" valign="top"><td>第二行第一列</td><td align="right" valign="bottom">第二行第二列</td><td>第二行第三列</td></tr>
<tr align="right" valign="bottom"><td>第三行第一列</td><td>第三行第二列</td><tdrowspan=2>第三行第三列</td></tr>
<tr><td colspan=2>第四行第一列</td></tr>
</table>
</body>
</html>
如果使用css设置细线边框后的效果如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML表格及表格系列标签的用法</title>
</head>
<body>
<table border="2px" cellspacing="10px" width="500px" height="500px" align="center">
<caption>这是表格头</caption>
<th>这是单元格头1</th><th>这是单元格头2</th><th>这是单元格头3</th>
<tr align="center" valign="center"><td>第一行第一列</td><td>第一行第二列</td><td>第一行第三列</td></tr>
<tr align="left" valign="top"><td>第二行第一列</td><td align="right" valign="bottom">第二行第二列</td><td>第二行第三列</td></tr>
<tr align="right" valign="bottom"><td>第三行第一列</td><td>第三行第二列</td><tdrowspan=2>第三行第三列</td></tr>
<tr><td colspan=2>第四行第一列</td></tr>
</table>
</body>
<style>
table{
border-collapse: collapse;
border:1;
}
</style>
</html>
表格常常用来做页面布局，是一个非常重要的知识点，请大家把以上代码复制出去认真理解一下。
以下对HTML中的表格标签元素做一下解释：
table
属性
border边框
cellspacing单元格间距
cellpadding单元格内部的填充
width设置表格宽度
height设置表格高度
align表格在网页中的对齐方式，取值：left/center/right
caption 表格标题
th 表头
tr 行
align设置当前这一行中所有单元格的水平对齐方式
valign设置当前这一行中所有单元格的垂直对齐方式
td 列
align设置当前这一列中所有单元格的水平对齐方式
valign设置当前这一列中所有单元格的垂直对齐方式
合并单元格
左右合并，在左边的td上添加colspan=数量，然后删除右边的td
上下合并，在上面这个td中设置rowspan=数量，然后删除下边的td
单线边框表格语法：
给table加style="border-collapse: collapse;" border="1"
或
<style>
table{
border-collapse: collapse;
border:1;
}
</style>
刚出校门能有如此深刻的感受真不错，一生受用。我虽出门6年却是刚入行程序员，对我的帮助更大，看来不管用什么语言，好的数据基础和算法思想一生受用。谢谢楼主，并希望在成长的路上多多沟通。 谢谢你给我上了一堂编程人生宝贵的一课，真是活到老，学到老。 我想我现在知道自已该做什么了,受益匪浅,谢谢 不错~~~~~~~~~~但是我的水平还没这么高！！！！ 我是初学者,很受益.谢谢 good good studyday day up 不错,这篇文章 感动啊!让我认清了方向,遗憾的是怎么怎么没在多年前就认识到这点 well