1.表格标签
表格是实际开发中非常常用的标签：
1.表格的主要作用
2.表格的基本语法
1.1表格的主要作用
8分钟学完
表格主要用于显示、展示数据，因为它可以让数据显示的非常规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。
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),即数据单元格的内容。
1.3表头单元格标签
一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示
<th>标签表示HTML表格的表头部分(table head的缩写)
<table>
<tr>
<th>姓名</th>
...
</tr>
...
</table>
总结：表头单元格也是单元格，常用于表格第一行，突出重要性，表头单元格里面的文字会加粗居中显示。
1.4表格属性
表格标签这部分属性实际开发不常用，后面通过CSS来设置。
目的有2个：
1.记住这些英语单词，后面CSS会使用。
2.直观感受表格的外观形态。
| 属性名 | 属性值 | 描述 |
| align | left、center、right | 规定表格相对周围元素的对齐方式 |
| border | 1或者"" | 规定表格单元是否拥有边框，默认为“”，表示没有边框 |
| cellpadding | 像素值 | 规定单元边沿与其内容岁之间的空白，默认是1px |
| cellspacing | 像素值 | 规定单元格之间的空白，默认是2px |
| width | 像素值或百分比 | 规定表格的宽度 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="250">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>刘德华</td>
<td> 男 </td>
<td> 56 </td>
</tr>
<tr>
<td>张学友</td>
<td> 男 </td>
<td> 58 </td>
</tr>
<tr>
<td>郭富城</td>
<td> 男 </td>
<td> 51 </td>
</tr>
<tr>
<td>黎明</td>
<td> 男 </td>
<td> 57 </td>
</tr>
</table>
</body>
</html>
实现效果：
时间案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>今日小说排行榜</title>
</head>
<body>
<table align="center" width="500" height="249" border="1" cellpadding="0" 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="向下.png" height="10" width="10"></td>
<td>456</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="向下.png" height="10" width="10"></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="向上.png" height="10" width="10"></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="向上.png" height="10" width="10"></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="向下.png" height="10" width="10"></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="向上.png" height="10" width="10"></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="向上.png" height="10" width="10"></td>
<td>234</td>
<td>7686</td>
<td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td>
</tr>
</table>
</body>
</html>
实现效果
1.5表格结构标签
使用场景：因为表格可能很长，为了更好的表示表格语义，可以将表格分割成表格头部和表格主体两大部分，在表格标签中，分别用：<thead>标签表格的头部区域，<tbody>标签表格的主体区域，这样可以更好的分清表格结构。
1.<thead></thead>：用于定义表格的头部,<thead>内部必须拥有<tr>标签，一般是位于第一行。
2.<tbody></tbody>:用于定义表格的主体，主要用于放数据本体。
3.以上标签都是放在<table></table>标签中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>今日小说排行榜</title>
</head>
<body>
<table align="center" width="500" height="249" border="1" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>进入搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="向下.png" height="10" width="10"></td>
<td>456</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="向下.png" height="10" width="10"></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="向上.png" height="10" width="10"></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="向上.png" height="10" width="10"></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="向下.png" height="10" width="10"></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="向上.png" height="10" width="10"></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="向上.png" height="10" width="10"></td>
<td>234</td>
<td>7686</td>
<td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td>
</tr>
</tbody>
</table>
</body>
</html>
1.6合并单元格
特殊情况下，可以把多个单元格合并为一个单元格，这里同学们会最简单的合并单元格即可。
合并单元格方式：
跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan="合并单元格的个数"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>合并单元格</title>
</head>
<body>
<table width="500" height="249" border="1" cellspacing="0">
<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>
实现效果
跨列合并，从左到右，第一行第二个单元格是目标单元格，在目标单元格中写代码，colspan="2"
删除目标单元格后面的单元格。合并几个删几个。
删除第一行第三个单元格
跨行合并，从上到下。第二行第一个单元格是目标单元格，写代码，rowspan="2"
删除第三行第一个单元格
1.7表格总结
1.表格的相关标签
我们学习了table标签
tr行标签
td单元格标签
th表头单元格标签
thead表格头部区域标签
tbody表格主体区域标签
2.表格的相关属性
| 属性名 | 属性值 | 描述 |
| align | left、center、right | 规定表格相对周围元素的对齐方式 |
| border | 1或者"" | 规定单元格是否有边框，默认为“”，表示没有边框 |
| cellpadding | 像素值 | 规定单元边与其内容之间的空白，默认1px |
| cellspacing | 像素值 | 规定单元格之间的距离，默认2px |
| width | 像素值或百分比 | 规定表格的宽度 |
3.合并单元格
690
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
