HTML列表与表格
- HTML篇_第六章、HTML列表与表格
- 一、列表
- 1.1定义
- 1.2列表的分类
- 1.3列表的对比
- 二、表格
- 2.1表格的定义
- 2.2表格的边框
- 2.3表格的表头单元格
- 2.4表格标题 <caption>
- 2.5表格的高度和宽度
- 2.6表格背景
- 2.7表格空间
- 2.8合并单元格
- 2.9表格头部、主题和页脚
- 2.10表格的嵌套
HTML篇_第六章、HTML列表与表格
一、列表
1.1定义
列表就是信息资源的一种展现形式，可以使信息结构化、条理化，并以列表的方式显现出来，以便快速获取相应的信息。
1.2列表的分类
HTML中列表分为三种类型，如下：
- 无序列表
无序列表是一个项目列表，没有顺序，是由<ul>标签内嵌套<li>标签来书写组成，每个<li>标签独占一行。<ul>标签用于声明无序列表，<li>标签用于声明列表项。默认显示为标签项目前有一个粗体圆点，一般用于无顺序类型的列表，例如：导航、侧边栏或者有规律的图文组合模块等。
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无序列表</title>
</head>
<body>
<h1>今日新闻热搜</h1>
<ul>
<li>新闻1</li>
<li>新闻2</li>
<li>新闻3</li>
</ul>
</body>
</html>
运行结果：
- 有序列表
有序列表，顾名思义是一种有一定顺序的列表，是由<ol>标签内嵌套<li>标签来书写组成的，每个<li>标签独占一行。<ol>标签用于声明有序列表，<li>标签用于声明列表项。默认显示为标签项目前有数字顺序标记，一般用于排序类型的列表，例如：试卷、问卷和选项等。
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>有序列表</title>
</head>
<body>
<h1>问卷调查</h1>
<ol>
<li>姓名：</li>
<li>年龄：</li>
<li>自我评价：</li>
</ol>
</body>
</html>
运行结果：
- 定义列表
定义列表与无序列表类似，没有顺序，是由<dl>标签嵌套<dt>标签和<dd>标签来书写组成的，每个
<dt>标签和<dd>标签独占一行。<dl>标签用于声明定义列表，<dt>标签用于声明列表项，而<dd>标签则用于定义列表项内容。定义列表默认显示没有标记，一般用于一个标题下包含一个或者多个列表项的情况。
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>定义列表</title>
</head>
<body>
<h1>定义列表</h1>
<dl>
<dt>手机品牌</dt>
<dd>华为</dd>
<dd>oppo</dd>
<dd>vivo</dd>
</dl>
<dl>
<dt>电脑品牌</dt>
<dd>联想</dd>
<dd>神舟</dd>
<dd>华硕</dd>
</dl>
</body>
</html>
运行结果：
1.3列表的对比
| 类型 | 说明 | 项目符号 |
|---|---|---|
| 无序列表 | · 以<ul>标签来实现·以 <li>标签表示列表项 | 无序列表中的每项都是平级的，没有级别之分，并且列表中的内容一般都是相对简单的标题性质的网页内容 |
| 有序列表 | ·以<ol>标签来实现·以 <li>标签表示列表项 | 有序列表ol-li一般用于显示带有顺序编号的特定场合 |
| 定义列表 | ·以<dl>标签来实现·以 <dt>标签定义列表项·以 <dd>标签定义内容 | 定义列表一般适用于带有标题和标题解释性内容的场合 |
二、表格
2.1表格的定义
表格由<table>标签来定义。每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由<td>标签定义）。字母td指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML表格</title>
</head>
<body>
<table>
<tr>
<td>一行一列</td>
<td>一行二列</td>
<td>一行三列</td>
</tr>
<tr>
<td>二行一列</td>
<td>二行二列</td>
<td>二行三列</td>
</tr>
</table>
</body>
</html>
运行结果：
2.2表格的边框
在定义表格时，如果不定义边框属性则表格不显示边框，如上述代码示例。大多数情况下，我们需要显示边框，这时就需要用到边框属性border来实现，设置了该属性则会显示一个带有边框的表格。
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML表格</title>
</head>
<body>
<table border="1">
<tr>
<td>一行一列</td>
<td>一行二列</td>
<td>一行三列</td>
</tr>
<tr>
<td>二行一列</td>
<td>二行二列</td>
<td>二行三列</td>
</tr>
</table>
</body>
</html>
运行结果：
2.3表格的表头单元格
众所周知，所有的表格都有表头，因为表头的存在，表格的交互性会会更加友好。HTML的中的表格也可以设置表头，这需要使用<th>标签来定义表格的表头单元格。大多数浏览器会将表头显示为居中加粗的文本。表格的表头单元格可以设置一些属性，例如：align（规定表格相对于周围元素的对齐方式）、dir（规定元素内容的文本方向）、width（规定表格的宽度）和height（规定表格的高度）。
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML表格</title>
</head>
<body>
<table border="1">
<tr>
<th>表头一</th>
<th>表头二</th>
</tr>
<tr>
<td>一行一列</td>
<td>一行二列</td>
</tr>
</table>
</body>
</html>
运行结果：
2.4表格标题
在<table>标签内可以使用<caption>标签作为标题，并在表格的顶部显示。（该标签在较新版本的HTML中已经弃用，在这里仅作为了解内容出现）
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML表格</title>
</head>
<body>
<table border="1">
<caption>这是表格的标题</caption>
<tr>
<th>表头一</th>
<th>表头二</th>
</tr>
<tr>
<td>一行一列</td>
<td>一行二列</td>
</tr>
</table>
</body>
</html>
运行结果：
2.5表格的高度和宽度
在定义表格时可以使用width（宽）和height（高）属性设置表格宽度和高度。设置时按像素或可用屏幕区域的百分比来指定表格宽度或高度。
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML表格</title>
</head>
<body>
<table border="1" width = "200" height = "100">
<caption>这是表格的标题</caption>
<tr>
<th>表头一</th>
<th>表头二</th>
</tr>
<tr>
<td>一行一列</td>
<td>一行二列</td>
</tr>
</table>
</body>
</html>
运行结果：
2.6表格背景
在HTML中，我们可以使用属性来为表格设置背景。这里有三个属性可用，分别为可以为整个表格或仅为一个单元格设置背景颜色的bgcolor属性、可以为整个表设置背景图像或仅为一个单元设置背景图像的background属性，可以设置边框颜色的bordercolor属性。但是HTML5中不推荐使用这些属性。
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML表格背景</title>
</head>
<body>
<h1>HTML表格背景</h1>
<table border="1" bordercolor = "red" bgcolor = "yellow" background = "">
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
<tr>
<td>一行一列</td>
<td>一行二列</td>
</tr>
</table>
</body>
</html>
运行结果：
注意：background属性需要提供图像的URL地址
2.7表格空间
使用cellspacing属性和cellpadding属性用于调整HTML表格中单元格的空间。其中cellspacing属性用来定义表格单元格之间的空间，cellpadding属性用于表示单元格边框与单元格内容之间的距离
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML表格与空间</title>
</head>
<body>
<table border="1" cellpadding = "5" cellspacing = "5">
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
<tr>
<td>一行一列</td>
<td>一行二列</td>
<td>一行三列</td>
</tr>
<tr>
<td>二行一列</td>
<td>二行二列</td>
<td>二行三列</td>
</tr>
</table>
</body>
</html>
运行结果：
2.8合并单元格
在使用过程中，若需要合并单元格，则需要用的两个属性来实现。将两个或多个列合并为一个列，将使用colspan属性，如果要合并两行或更多行，则将使用rowspan属性。
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML合并单元格</title>
</head>
<body>
<table border="1">
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
<tr>
<td rowspan="2">一行一列</td>
<td>一行二列</td>
<td>一行三列</td>
</tr>
<tr>
<td>二行二列</td>
<td>二行三列</td>
</tr>
<tr>
<td colspan = "3">三行一列</td>
</tr>
</table>
</body>
</html>
运行结果：
2.9表格头部、主题和页脚
在HTML中表格可以分为三个部分，头部、主体和页脚，如同word文档中页面的页眉、正文、页脚。每个页面保持相同，而正文是表格的主要内容持有者。头部，主体和页脚的对应的三个标签分别是thead、tbody和tfoot。在表格中可以包含多个tbody元素以指示不同的页面，但是thead和tfoot用该出现在tbody之前。
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML表格</title>
</head>
<body>
<table border = "1" width = "300" height = "150">
<thead>
<tr>
<td colspan = "4">单独的表头</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan = "4">单独的表页脚</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>一行一列</td>
<td>一行二列</td>
<td>一行三列</td>
<td>一行四列</td>
</tr>
</tbody>
</table>
</body>
</html>
运行结果：
2.10表格的嵌套
在HTML中可以在一个表中使用另外一个表。在实现表格嵌套时可以使用<table>内的几乎所有标签。
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML表格嵌套</title>
</head>
<body>
<table border = "1" width = "100%">
<tr>
<td>
<table border = "1">
<tr>
<th>表格1表头1</th>
<th>表格1表头2</th>
</tr>
<tr>
<td>表格1一行一列</td>
<td>表格1一行二列</td>
</tr>
<tr>
<td>表格1二行一列</td>
<td>表格2二行二列</td>
</tr>
</table>
</td>
<td>
<table border = "1">
<tr>
<th>表格2表头1</th>
<th>表格2表头2</th>
</tr>
<tr>
<td>表格2一行一列</td>
<td>表格2一行二列</td>
</tr>
<tr>
<td>表格2二行一列</td>
<td>表格2二行二列</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
运行结果：
希望有所帮助！
关注我，持续更新。
