定义和用法
标签用于定义 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是内边距,是盒子的边与盒子内部元素的距离。具体见下示意图: