表格标签
表格的主要作用
表格主要用于 显示、展示数据，因为它可以让数据展示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把复杂的数据表现的很有条理。
表格的基本语法
-
<table></table>标签用于定义表格的标签。 -
<tr></tr>标签用于定义表格中的行， 必须嵌套在<table></table>标签中。 -
<td></td>标签用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
<!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>01-表格的基本语法</title>
</head>
<body>
<table>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>22</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>26</td>
</tr>
</table>
</body>
</html>
表头单元格标签
一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示。<th></th>标签表示HTML表格的表头部分(table head)的缩写.
<!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>01-表头单元格标签</title>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>叽里咕噜</td>
<td>男</td>
<td>22</td>
</tr>
<tr>
<td>叽里呱啦</td>
<td>男</td>
<td>26</td>
</tr>
</table>
</body>
</html>
表格属性
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left、center、right | 规定表格相对周围元素的对齐方式。 |
| border | 1或"" | 规定表格单元是否拥有边框，默认为""，表示没有边框。 |
| cellpadding | 像素值 | 规定单元格边沿与其内容之间的空白，默认1像素。 |
| cellspacing | 像素值 | 规定单元格之间的空白，默认2像素。 |
| width | 像素值或百分比 | 规定表格的宽度。 |
表格结构标签
使用场景：因为表格可能很长，为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分。
在表格标签中，分别用 <thead></thead> 标签标识表格的头部区域，<tbody></tbody> 标签标识表格的主题区域，这样可以更好的分清表格结构。
以上的标签都是放在 <table></table> 中。
合并单元格
- 跨行合并：rowsspan="合并单元格的个数"，最上侧单元格为目标单元格。
- 夸列合并：colspan="合并单元格的个数"，最左侧单元格为目标单元格。
合并单元格的三个步骤：
- 先确定是跨行还是跨列合并。
- 找到目标单元格，写上合并方式。
- 删除多余的单元格。
<!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 border="1" cellspacing="0" width="500" height="200">
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
<td></td>
</tr>
</table>
</body>
</html>
列表标签
无序列表
<ul></ul> 标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用 <li></li> 标签定义。
特点：
1. 无序列表的各个列表项之间没有顺序级别之分，是并列的。
2. <ul></ul> 中嵌套 <li></li> ，直接 在 <ul></ul> 标签中输入其他标签或者文字的做法是不被允许的。
3. <li></li> 之间相当于一个容器，可以容纳所有元素.
4. 无序列表会带有自己的样式属性，但在实际使用中，我们会使用 css 来设置。
<!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>
<ul>
<li>陈百强</li>
<li>谭咏麟</li>
<li>梅艳芳</li>
<li>张国荣</li>
</ul>
</body>
</html>
有序列表
有序列表即为有排列顺序的列表，其各个列表会按照一定的顺序排列定义。
在HTML标签中，<ol></ol> 标签用于定义有序列表，列表排序以数字来显示，并且使用 <li> 标签来定义列表项。
特点：
1. <ol></ol> 中嵌套 <li></li> ，直接 在 <ol></ol> 标签中输入其他标签或者文字的做法是不被允许的。
2. <li></li> 之间相当于一个容器，可以容纳所有元素.
3. 有序列表会带有自己的样式属性，但在实际使用中，我们会使用 css 来设置。
<!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>
<ol>
<li>陈百强</li>
<li>谭咏麟</li>
<li>梅艳芳</li>
<li>张国荣</li>
</ol>
</body>
</html>
自定义列表
在HTML标签中，<dl></dl> 标签用于定于描述列表，该标签与 <dt></dt>(定义项目/名字) 和 <dd></dd> (描述每一个项目/名字)一起使用。
特点：
1. <dl></dl> 里面只能包含 <dt></dt> <dd></dd>
2. <dt></dt>、<dd></dd> 个数没有限制，经常是一个 <dt></dt> 对应多个 <dd></dd>
<!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>
<dl>
<dt>帮助中心</dt>
<dd>账户管理</dd>
<dd>购物指南</dd>
<dd>订单操作</dd>
</dl>
<dl>
<dt>服务支持</dt>
<dd>售后政策</dd>
<dd>自助服务</dd>
<dd>相关下载</dd>
</dl>
</body>
</html>
362
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
