1.表格标签
1.1表格的作用
表格主要用于显示、展示数据,它可以让数据显示的非常规整,可读性非常好。特别是后台展示数据的时候,能够熟练运用表格就显得很重要,一个清爽简约的表格能够把繁杂的书表现的十分有条理。
1.2表格的基本语法
<table>
<tr>
<td>单元格里面的文本</td>
...
</tr>
...
</table>
<!--
1.<table></table>标签是用于定义表格的标签。
2.<tr></tr>标签用于定于表格中的行,必须嵌套在<table></table>标签中。
3.<td></td>标签用于定义表格中的单元格,必须嵌套在<tr></tr>标签中。
4.字母td是指表格数据(table data),即单元格内的内容。
-->
先举个栗子:
<table>
<tr><td>姓名</td> <td>性别</td> <td>年龄</td></tr>
<tr><td>美杜莎</td> <td>女</td> <td>180</td></tr>
<tr><td>熏儿</td> <td>女</td> <td>18</td></tr>
<tr><td>云韵</td> <td>女</td> <td>28</td></tr>
<tr><td>小医仙</td> <td>女</td> <td>18</td></tr>
</table>
1.3表头单元格标签
一般表头单元格位于表格的第一行或第一列,表头单元格里面的文本内容加粗且居中显示。
加上表头
<th>(table head的缩写)标签表示HTML表格的表头部分。
現在我们把刚才的表格做一个优化
<table>
<tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
<tr><td>美杜莎</td> <td>女</td> <td>180</td></tr>
<tr><td>熏儿</td> <td>女</td> <td>18</td></tr>
<tr><td>云韵</td> <td>女</td> <td>28</td></tr>
<tr><td>小医仙</td> <td>女</td> <td>18</td></tr>
</table>
这样一来,我们的表格就有了表头
1.4表格属性(如边框和大小)
表格标签这个部分我们实际不常用,在网页开发中一般通过CSS来设置。
属性名 属性值 描述
align left、center、right规定表格相对周围元素的对齐方式。
border 1或"" 规定表格单元是否拥有边框,默认为"",表示没有边框
cellpadding 像素值 规定单元边沿与其内容之间的空白,默认1像素
cellspacing 像素值 规定单元格之间的空白,默认2像素
width 像素值 规定表格的宽度
height 像素值 规定表格的高度
这些属性要写到表格标签的里面显示。
表格居中:
首先我们加上align属性
<table align="center">
<tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
<tr><td>美杜莎</td> <td>女</td> <td>180</td></tr>
<tr><td>熏儿</td> <td>女</td> <td>18</td></tr>
<tr><td>云韵</td> <td>女</td> <td>28</td></tr>
<tr><td>小医仙</td> <td>女</td> <td>18</td></tr>
</table>
这样一来,我们的表格就居中显示了:
加上边框
我们继续对我们的代码进行优化,这次加上border属性:
<table align="center" border="1">
<tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
<tr><td>美杜莎</td> <td>女</td> <td>180</td></tr>
<tr><td>熏儿</td> <td>女</td> <td>18</td></tr>
<tr><td>云韵</td> <td>女</td> <td>28</td></tr>
<tr><td>小医仙</td> <td>女</td> <td>18</td></tr>
</table>
这样一来我们的表格就有了边框:
消除单元格空隙:
但是,我们可以看到,表格看起来还是有点点奇怪:表格的单元格之间有空隙,而且文本和边框太近了,所以我们加上cellpadding、cellspacing属性:
<table align="center" border="1" cellpadding="10" cellspacing="0">
<tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
<tr><td>美杜莎</td> <td>女</td> <td>180</td></tr>
<tr><td>熏儿</td> <td>女</td> <td>18</td></tr>
<tr><td>云韵</td> <td>女</td> <td>28</td></tr>
<tr><td>小医仙</td> <td>女</td> <td>18</td></tr>
</table>
这样一来,就解决了上面的问题:
宽度和高度完善和完整代码:
最后我们来把表格的宽度和高度设定一下,并且把最终的完整版代码写到这:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格标签</title>
</head>
<body>
<table align="center" border="1" cellpadding="10" cellspacing="0" width="300" height="100">
<tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
<tr><td>美杜莎</td> <td>女</td> <td>180</td></tr>
<tr><td>熏儿</td> <td>女</td> <td>18</td></tr>
<tr><td>云韵</td> <td>女</td> <td>28</td></tr>
<tr><td>小医仙</td> <td>女</td> <td>18</td></tr>
</table>
</body>
</html>
我们得到了最终的完成品:
### (补充)表格结构标签
使用场景:因为表格的代码很长,为了让表格部分的代码更加的条理化,可以将表格分为表格头部标签和表格主体标签:
<table align="center" border="1" cellpadding="10" cellspacing="0" width="300" height="100">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr><td>美杜莎</td> <td>女</td> <td>180</td></tr>
<tr><td>熏儿</td> <td>女</td> <td>18</td></tr>
<tr><td>云韵</td> <td>女</td> <td>28</td></tr>
<tr><td>小医仙</td> <td>女</td> <td>18</td></tr>
</tbody>
</table>
这样,我们的代码就看起来结构更加清晰了。而且,这两个标签里面的内容还可以隐藏:
展开: