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>
运行结果:
希望有所帮助!
关注我,持续更新。