HTML 中的Table标签
Table 标签的介绍
在网页中如果要类似于Excel的方式进行展示数据则需要用到Table标签,在web早期,Table还承担着页面布局的责任,但现在几乎没人再使用Table进行页面布局了,虽然不再使用Table进行布局,但在日常网站对数据进行展示、操作时Table仍占有很高的地位。
Table 标签的书写格式
<table>
<thead>
<tr>
<th>第一列</th>
<th>第二列</th>
<th>第三列</th>
<th>第四列</th>
</tr>
</thead>
<tbody>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
<td>34</td>
</tr>
</tbody>
</table>
如上HTML代码我们可以得到一个这种样式的表格
不难发现,这和我们平常所见到的表格不一样,不过先别着急,接下来我们介绍 Table 标签的属性,让我们加上属性后再来观察一下。
Table 及其子标签的属性
-
Table 的属性
- border:表示表格边框宽度
- width:表示表格宽度
- height:表示表格高度
- align:表示水平方向的对齐方式
- bgcolor:表示背景色
- cellspacing:表示单元格与单元格之间的间距
- cellpadding:标识单元格与内容的填充
-
tr 的属性
- bgcolor:表示背景色
- align:表示本行文本对齐方式
- height:标识行高
-
td 的属性(与 tr 的属性类似,不再另做介绍)
-
单元格合并
- 跨列:colspan=“value”
- 跨行:rowspan=“value”
接下来看一下使用属性后的 Table 吧 :
<!DocType html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>table的用法</title>
</head>
<body>
<!--
1. align="center" : 表格相较于父容器进行居中对齐
2. heght="200" :表格高度为200px
3. width="500" : 表格高度为500px
4. border="1" : 边框为宽度为1px
-->
<table align="center" height="200" width="500" border="1">
<tr>
<td>11</td>
<!-- “12”代表标签内容为12的标签; colspan="2" : 在同一行上(同一个tr中)以12为起点,
向后合并13(即两个td合并成一个td),所以13需要被注释掉
因为13被合并成了12的一部分 -->
<td colspan="2">12</td>
<!--<td>13</td>-->
<td>14</td>
</tr>
<tr>
<td>21</td>
<!-- “22”代表标签内容为22的标签; rowspan="2" : 在同一列上(不同个tr中)以22为起点,
向后合32(即两个td合并成一个td),所以32需要被注释掉
因为32被合并成了22的一部分 -->
<td rowspan="2">22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>31</td>
<!--<td>32</td>-->
<td>33</td>
<td>34</td>
</tr>
</table>
</body>
</html>
现在我们得到了这样一个表格:
不错,这样已经具备了表格的几分神韵。
使用Table 进行网页布局
虽不常用,但可以了解一下,我们先来看代码示例
- 左右两栏布局,右侧再分为上下两部分,上部为菜单栏,下部为内容区
<!DocType html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>使用Table进行网页布局</title>
</head>
<body>
<table border="1" width="1024" height="600" bgcolor="lightgray" align="center">
<tr height="40" align="center">
<td rowspan="2">左侧导航栏</td>
<td>王者荣耀</td>
<td>首页</td>
<td>S28赛季</td>
<td>新英雄戈娅</td>
<td>新战令</td>
<td>新体验</td>
</tr>
<tr>
<td colspan="6" rowspan="2" align="center">内容区</td>
</tr>
</table>
</body>
</html>
网页上的实际效果如下图
表格的边框有两条线,看这好难受啊,怎么解?
嗯哼,不妨在Table中加入这条属性试试 cellspacing="0"
Table 的基本用法就介绍到这里,千里之行始于足下,更多 Table 的用法,不妨实际动手操作一下,说不定会有收获呢 /doge