6.1表格的主要作用
表格主要用于显示展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够多熟练运用表格就显得很重要。一一个清爽简约的表格能够把繁杂的数据表现得很有条理。
总结:表格不是用来布局页面的，而是用来展示数据的.
6.2表格的基本语法
<table>
<tr>
<td>単元格内的文字</td>
…
</tr>
…
</table>
- < table> < /table> 是用于定义表格的标签
- < tr> < /tr>标签用于定义表格中的行，必须嵌套在< table> < /table>标签中。
- < td> < /td>用于定义表格中的单元格，必须嵌套在< tr> < /tr>标签中。
- 字母td 指表格数据( table data) , 即数据单元格的内容
代码：
<!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>Document</title>
</head>
<body>
<table>
<tr><td>姓名</td> <td>性别</td> <td>年龄</td></tr>
<tr><td>王俊凯</td> <td>男</td> <td>23</td></tr>
<tr><td>杨颖</td> <td>女</td> <td>34</td></tr>
</table>
</body>
</html>
形成一个三行三列的表格：
6.3表头单元格标签
一般表头单元格位于表格的第一 行或第一列，表头单元格里面的文本内容加粗居中显示
< th>标签表示HTML表格的表头部分(table head的缩写)
例如将上述第11行改为：
<tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
此时显示为：
总结：表头单元格也是单元格，常用于表格第一行，突出重要性，表头单元格里面的文字会加粗居中显示
6.4表格属性
表格标签这部分属性实际开发我们不常用，后面通过CSS来设置
目的有2个:
1.记住这些英语单词，后面CSS会使用！
2.直观感受表格的外观形态
注意：这些属性要写在表格标签table里面
例如：
1.居中显示：
<body>
<table align="center">
<tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
<tr><td>王俊凯</td> <td>男</td> <td>23</td></tr>
<tr><td>杨颖</td> <td>女</td> <td>34</td></tr>
</table>
</body>
2.设置边框，我们将上面第2行改为：
<table align="center" border="1">
3.设置像素值
（1）设置单元格边框与文字之间的距离：
<table align="center" border="1" cellpadding="20">
（2）将单元格之间的空白设置为0
<table align="center" border="1" cellpadding="20" cellspacing="0">
（3）设置宽度（也可以设置高度height）
<table align="center" border="1" cellpadding="20" cellspacing="0" width="400">
3.小说排行榜案例
例如做一个如下图所示的表格
我们可以先制作表格的结构：
1.第一行里面是th表头单元格
2.第二行开始里面是td普通单元格
3.单元格里面可以放任何元素，文字链接图片等都可以
后书写表格属性：
1.用到宽度、高度、边框、cellpadding 和cellspacing
2.表格在浏览器中对齐align
代码：
<!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">
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相关</th>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>345</td>
<td>123</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>2</td>
<td>盗墓笔记</td>
<td><img src="down.jpg"></td>
<td>124</td>
<td>675432</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>3</td>
<td>西游记</td>
<td><img src="up.jpg"></td>
<td>212</td>
<td>7654</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>4</td>
<td>东游记</td>
<td><img src="up.jpg"></td>
<td>23</td>
<td>75645</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>5</td>
<td>甄嬛传</td>
<td><img src="down.jpg"></td>
<td>121</td>
<td>7676</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>6</td>
<td>水浒传</td>
<td><img src="up.jpg"></td>
<td>576576</td>
<td>1231421</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>7</td>
<td>三国演义</td>
<td><img src="up.jpg"></td>
<td>234</td>
<td>7686</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
</table>
</body>
</html>
6.5表格结构标签
使用场景:因为表格可能很长，为了更好的表示表格的语义,可以将表格分割成表格头部和表格主体两大部分.
在表格标签中,分别用: < thead>标签表格的头部区域、< tbody> 标签表格的主体区域这样可以更好的分清表格结构。
注意：
- < thead> < /thead> :用于定义表格的头部。< thead> 内部必须拥有< tr>标签。一般是位于第一行。
- < tbody> < /tbody> :用于定义表格的主体,主要用于放数据本体。
- 以上标签都是放在< table> < /table>标签中。
比如上一个小说案例，我们可以把表头的第一行包含在< thead> < /thead>中
把其余几行放在< tbody> < /tbody>中，这样代码的结构看起来更加清晰
6.6合并单元格
1.合并单元格的方式
●跨行合并: rowspan="合并单元格的个数”
●跨列合并: colspan="合并单元格的个数”
2.目标单元格
●跨行:最上侧单元格为目标单元格,写合并代码
●跨列:最左侧单元格为目标单元格，写合并代码
3.合并单元格三步曲:
●先确定是跨行还是跨列合并。
●找到目标单元格. 写上合并方式=合并的单元格数量。比如: < td colspan= "2” > .
●删除多余的单元格
如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="widtd=device-widtd, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table cellpadding="10" cellspacing="0" border="1" width="400" height="200">
<tr>
<td></td> <td colspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td> <td></td> <td></td>
</tr>
<tr>
<td></td> <td></td>
</tr>
</table>
</body>
</html>
6.7表格总结
1.表格的相关标签
我们学习了table 标签、tr行标签、td单元格标签、th表头单元格标签、thead表格头部区域标签、tbody表格主体区域标签
2.表格的相关属性
3.合并单元格
1883
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
