上期文章:
panda456:有序列表&无序列表zhuanlan.zhihu.comHTML支持插入表格,下面我们就来看看如何插入表格。
注意:上期文章中我们知道了如何插入有序列表和无序列表,这个「列表」和我要讲的「表格」是一个不一样的东西。表格是有行和列的。
创建表格
我们要用到<table>
标签,里面要嵌套行标签<tr>
,每行要嵌套表头单元格标签<th>
,以及每个普通单元格标签<td>
。下面是一个例子:
<!DOCTYPE html>
<html>
<body>
<h2>一个表格</h2>
<table style="width:100%">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>李华</td>
<td>男</td>
<td>30岁</td>
</tr>
<tr>
<td>张伟</td>
<td>男</td>
<td>17岁</td>
</tr>
<tr>
<td>李芳</td>
<td>女</td>
<td>26岁</td>
</tr>
</table>
</body>
</html>
效果如下图:
从上面的例子中,我们知道<table>
是一个表格的总标签,tr
表示表格的每一行,<th>
和<td>
都表示一个单元格,但前者是表头的单元格,后者是表格下面部分的单元格。每个单元格里可以包含几乎所有的HTML元素,例如文本、链接,甚至是另一个表格。
为什么要style="width:100%"
?这是因为我想让表格对齐网页两边,如果没有这个属性的话,那么表格将会按照内容自动调整宽度,这时候表格会很窄。这是为了美观考虑。
添加边框
默认的表格是没有边框的,我们可以根据需要,用CSS设置表格的边框。我更喜欢将每个单元格设置边框,然后将整个表格围起来,因此我这样写代码:
table,th,td {
border:1px solid black;
}
效果如下:
通过上图,你会发现,这样的代码所展现出来的表格边框会有两行,也就是说边框并没有重合在一起。怎么办呢?我们可以用CSS中的border-collapse
来设置:
table,th,td {
border:1px solid black;
border-collapse:collapse;
}
调整表头的对齐方向
默认情况下,表头会显示为粗体,并居中。我们依旧可以用我们之前讲过的方法,调整表头的对齐方向,让它左对齐、右对齐或两端对齐。例如:
th {
text-align:left;
}
设置边框间距
如果你不喜欢将边框重合在一起,那么你还有一个选择:设置两条边框之间的间距。很简单,只需添加CSS中的border-spacing
属性即可:
table {
border:1px solid black;
border-spacing:10px;
}
注意:如果已设置边框重叠,那么边框间距不起作用。
合并单元格
如果想使其中一个单元格跨越多行(或多列),也就是我们在Excel中说的合并单元格,那么就需要用到元素的colspan
和rowspan
属性,它们的属性值表示合并多少个单元格。前者用于横向合并,后者用于纵向合并。我举一个例子,大家就明白了:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border:1px solid black;
border-collapse:collapse;
}
th, td {
padding:5px;
text-align: left;
}
</style>
</head>
<body>
<h2>示例</h2>
<table style="width:100%">
<tr>
<th>姓名</th>
<th colspan="2">电话</th>
</tr>
<tr>
<td>张三</td>
<td>88888888</td>
<td>77777777</td>
</tr>
<tr>
<td>李四</td>
<td colspan="2" rowspan="2">66666666</td>
</tr>
<tr>
<td>王五</td>
</tr>
</table>
</body>
</html>
效果如下图:
在上面这张表格中,张三拥有两个电话号码,分别是88888888和77777777,而李四和王五共用一个电话66666666。
给表格添加标题
表格的标题可以说是一张表格不可或缺的部分。添加表格的标题,需要用到<caption>
标签:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border:1px solid black;
border-collapse:collapse;
}
th, td {
padding:5px;
text-align: left;
}
</style>
</head>
<body>
<h2>示例</h2>
<table style="width:100%">
<caption>三人的电话号码</caption>
<tr>
<th>姓名</th>
<th colspan="2">电话</th>
</tr>
<tr>
<td>张三</td>
<td>88888888</td>
<td>77777777</td>
</tr>
<tr>
<td>李四</td>
<td colspan="2" rowspan="2">66666666</td>
</tr>
<tr>
<td>王五</td>
</tr>
</table>
</body>
</html>
效果如下:
注意:<caption>
标签必须紧跟着<table>
标签。
这篇文章讲的内容比较多,可以先点赞+收藏将这篇文章放进收藏夹中备用,可以当做工具性文章,日后再反复琢磨。
下期文章:
panda456:块级元素&内联元素zhuanlan.zhihu.com