前端技巧你真的了解html中的表格table标签吗

你真的了解html中的表格table标签吗

很多人认为,使用div+css布局的网页里不能出现table标签,甚至还有人用div+css去模拟表格的效果,这样的思维方式本身就有问题。table作为html的一个重要标签,用于表示表格,在div+css网页布局流行之前,很多人用table进行布局,比如网页有左中右三个部分,就先做一个1行3列的表格,然后在这3个单元格里再创建新的表格来区分每个部分。这样的做法其优点是可以在网页编辑软件中通过所见即所得的方式快速布局页面,但缺点相对比较多,因为这样会导致网页的源代码十分复杂,进而影响加载的速度,而且还不利于网页的改版。因此,table不建议用于网页的布局,但从没说这个标签要被抛弃。当网页中出现需要表格展示的数据时,请务必使用table来展示,用div+css模拟表格是完全没有必要的,也是毫无意义的做法。

下面我们来做一个简单的表格,如下图所示:

简单表格.png

这个表格的主要html结构为:

<table>
 <tr>
  <td>周杰伦专辑</td>
  <td>第一主打歌</td>
  <td>第二主打歌</td>
 </tr>
 <tr>
  <td>范特西</td>
  <td>爱在西元前</td>
  <td>双截棍</td>
 </tr>
 <tr>
  <td>八度空间</td>
  <td>半兽人</td>
  <td>半岛铁盒</td>
 </tr>
 <tr>
  <td>叶惠美</td>
  <td>以父之名</td>
  <td>晴天</td>
 </tr>
 <tr>
  <td>七里香</td>
  <td>七里香</td>
  <td>我的地盘</td>
 </tr>
</table>

上面的html表格标签目前是没有定义表格边框的,所以我们先给table元素做一下CSS定义:

table {width:500px;margin:20px;
border-collapse:collapse;
border-spacing:0;
border:1px solid #aaa;
}

以上CSS定义了表格的宽度,设置外边距便于在浏览器中预览效果。使用border-collapse属性将相邻的边框合并,使用border-spacing设置相邻边框的距离为0,然后设置整个表格的外部边框样式。

td {border:1px solid #aaa;padding:10px;}
tr {border:1px solid #aaa;}

以上CSS定义了单元格的边框样式,并为单元格增加了内部填充距离,这样更美观,这样以来,整个表格就完成了,总体代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
table,td,tr {margin:0;padding:0;font-size:100%;}
table {width:500px;margin:20px;
border-collapse:collapse;
border-spacing:0;
border:1px solid #aaa;
}
td {border:1px solid #aaa;padding:10px;}
tr {border:1px solid #aaa;}
</style>
</head>
<body>
<table>
 <tr>
  <td>周杰伦专辑</td>
  <td>第一主打歌</td>
  <td>第二主打歌</td>
 </tr>
 <tr>
  <td>范特西</td>
  <td>爱在西元前</td>
  <td>双截棍</td>
 </tr>
 <tr>
  <td>八度空间</td>
  <td>半兽人</td>
  <td>半岛铁盒</td>
 </tr>
 <tr>
  <td>叶惠美</td>
  <td>以父之名</td>
  <td>晴天</td>
 </tr>
 <tr>
  <td>七里香</td>
  <td>七里香</td>
  <td>我的地盘</td>
 </tr>
</table>
</body>
</html>

这是最常见的表格的结构,大家注意上面这个表格,第一行的三个单元格具有表头标题的语义,我们可以对第一行的三个单元格运用th标签,th标签表示表头单元格,也就是第一行可以写为:

 <tr>
  <th>周杰伦专辑</th>
  <th>第一主打歌</th>
  <th>第二主打歌</th>
 </tr>

默认的情况下,如果不对th标签做CSS定义,它会显示加粗的文字以表示表头,当然我们还得在CSS里为th定义与td相同的边框样式和内边距才行。

我们还可以在table标签之后定义整个表格的标题,需要使用caption标签,例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
table,td,tr,th {margin:0;padding:0;font-size:100%;}
table {width:500px;margin:20px;
border-collapse:collapse;
border-spacing:0;
border:1px solid #aaa;
}
td,th {border:1px solid #aaa;padding:10px;}
tr {border:1px solid #aaa;}
caption {padding:10px;} /*--为了美观,我们也给它加上内边距--*/
</style>
</head>
<body>
<table>
<caption>我喜欢的周杰伦专辑</caption>
 <tr>
  <th>周杰伦专辑</th>
  <th>第一主打歌</th>
  <th>第二主打歌</th>
 </tr>
 <tr>
  <td>范特西</td>
  <td>爱在西元前</td>
  <td>双截棍</td>
 </tr>
 <tr>
  <td>八度空间</td>
  <td>半兽人</td>
  <td>半岛铁盒</td>
 </tr>
 <tr>
  <td>叶惠美</td>
  <td>以父之名</td>
  <td>晴天</td>
 </tr>
 <tr>
  <td>七里香</td>
  <td>七里香</td>
  <td>我的地盘</td>
 </tr>
</table>
</body>
</html>

这里的caption标签(表格标题)如果不定义CSS的话,一般会默认居中显示。

简单表格2.png

表格元素除了基本的行和列之外,还可以通过thead,tbody和tfoot来定义表格的开头部分,中间部分和表格尾部,如果你的表格数据比较复杂,则可以用这几个标签来区分,对于简单的表格,这三个标签基本用不到。

表格的单元格还可以实现跨行和跨列显示,其属性为rowspan和colspan,下面我们在示例中看看它们所表现的效果:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
table,td,tr,th {margin:0;padding:0;font-size:100%;}
table {width:500px;margin:20px;
border-collapse:collapse;
border-spacing:0;
border:1px solid #aaa;
}
td,th {border:1px solid #aaa;padding:10px;}
tr {border:1px solid #aaa;}
caption {padding:10px;}
</style>
</head>
<body>
  <table>
    <tr>
     <td colspan="2">《倚天屠龙记》主演</td>
     <td colspan="2">《天龙八部》演员</td>
    </tr>
    <tr>
     <td>周芷若</td>
     <td>佘诗曼</td>
     <td>乔峰</td>
     <td>黄日华</td>
    </tr>
    <tr>
     <td rowspan="2">张无忌</td>
     <td>邓一君(少年)</td>
     <td>段誉</td>
     <td>陈浩民</td>
    </tr>
    <tr>
     <td>吴启华(成年)</td>
     <td>虚竹</td>
     <td>樊少皇</td>
    </tr>
  </table>
</body>
</html>

表格单元格跨行和跨列.png

在colspan和rowspan属性后面的数字,分别表示单元格所跨行数和列数,如果你并不熟悉colspan和rowspan的用法也没关系,完全可以通过网页编辑软件(如DW)通过所见即所得的方式来进行单元格的合并。

使用传统的网页编辑工具编辑表格的时候,往往会产生那些表格样式有关的属性标签,例如单元格间距,文本对齐方式,表格边框及背景等,在编辑工具中设置这些属性非常的方便,但使用这些属性并不符合当下网页设计内容和样式分离的基本标准,因此大家如果使用网页编辑工具制作表格,只需使用表格的基本框架即可,关于样式表现的部分,全都交给CSS去处理吧。

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/skill/55.html