HTML中的标签
定义和用法
标签用于定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
代码执行结果
忍不住吐槽，这哪有一点表格的样子？？？
不要着急，下面介绍一下表格的属性
1、align： 规定表格相对周围元素的对齐方式；可以选的值有 left 、center、right；推荐使用样式；
2、bgcolor：规定表格的背景颜色；可选择的值为颜色的名字，二进制表达等；推荐使用样式；
3、border：规定表格边框的宽度；选择的值单位为px；推荐使用样式；
4、width（height）：规定表格的宽度（高度）；可以选择的值为%或者px；推荐使用样式；
给table加上上边提到的属性
<style>
table{
width：50%
text-align: center;
border:1px solid black;
}
</style>
执行结果
仍然是一个没有灵魂的表格
此时如果给td也加上样式
td{
border: 1px solid black;
}
执行结果为
依旧是不够精致的表格
下边继续介绍table的属性（为了方便观察，没有展示bgcolor，在样式中用background-color代替）
5、cellpadding：规定单元格边沿与其内容的空白；推荐使用样式；
6、cellspacing：规定单元格之间的空白；推荐使用样式；
加上这两个属性后，样式部分的代码如下：
<style>
table{
width:50%;
text-align: center;
border:1px solid black;
border-spacing: 0;
border-collapse: collapse;
}
td{
border: 1px solid black;
}
</style>
执行结果如下
此时这个表格就符合我们的审美了；
下面介绍td,除了已知的align、width（height）、bgcolor可以使用外，td中独有的属性还有
1、colspan和rowspan：分别规定了单元格可以跨越的列数和行数；
2、valign：规定单元格内内容的垂直排列方式；推荐使用样式vertical-align代替
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
table{
width:50%;
text-align: center;
border:1px solid black;
border-spacing: 0;
border-collapse: collapse;
}
td{
padding: 5px;
vertical-align: bottom;
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<td rowspan="2">1</td>
<td colspan="2">2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</body>
</html>
执行结果如下：
tr的属性相对简单，直接给出代码和演示效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table{
border-collapse: collapse;
margin: 0 auto;
border: 1px solid red;
width: 50%;
border-spacing: 0;/*cell-spacing的代替*/
}
td{
border: 1px solid;
}
tr{
background-color: #4169E1;
text-align: center;
height: 55px;
vertical-align: top;/*velign*/
}
</style>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</body>
</html>
效果
最后备注一下：若是想要表格在网页的中间部分显示，给table加上 margin ：0 auto；即可；margin是指外边距
如何区分margin与padding：
margin和padding是在html中的盒模型的基础上出现的，margin是盒子的外边距，即盒子与盒子之间的距离，而padding是内边距，是盒子的边与盒子内部元素的距离。具体见下示意图：