简单表格示例
简单表格示例
HTML表格是一种将数据按行和列组织排列的结构,用于在网页中呈现复杂的数据集。HTML表格具有以下2种主要用途:
- 显示数据:最常见的用途是以表格形式展示数据,如产品价格、学生成绩、电影时间表等。表格可以清晰地展示数据的结构和关系。
- 创建表单:表格可以用于创建网页表单,通过在表格单元格中放置表单控件(如文本框、复选框、下拉菜单等),用户可以方便地输入数据。
HTML表格由多个标签组成,主要包括以下几个核心标签:
<table>
:定义表格的整体结构。<tr>
:定义表格中的行。<th>
:定义表格中的表头单元格(标题单元格)。<td>
:定义表格中的数据单元格(普通单元格)。每个单元格可以包含各种类型的内容,包括文本、图像、链接等。此外,单元格还可以包含其他HTML元素,如段落、列表、表单等。<caption>
:定义表格的标题。
这些标签一起构成了一个完整的HTML表格结构,用于在网页中呈现数据和信息。
案例
1. 基础表格
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>简单表格示例</title>
</head>
<body>
<h2>学生成绩</h2>
<table border="1">
<thead>
<tr>
<th>学生编号</th>
<th>姓名</th>
<th>数学成绩</th>
<th>科学成绩</th>
<th>英语成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>90</td>
<td>85</td>
<td>88</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>95</td>
<td>92</td>
<td>90</td>
</tr>
</tbody>
</table>
</body>
</html>
效果如下:
上面表格效果双线的有点丑,对不对,怎么变成单线的呢?只需要,在table
上,加一个设置表格边框合并为单线的CSS,加载在head
标签里面。如下代码。
<style>
table {
border-collapse: collapse; /* 设置表格边框合并为单线 */
}
</style>
效果如图。
然而,有时候,为了使得表格内容更加清晰、易读,基础表格无法满足,这时候,跨行,跨列就起作用了。
2. 单元格跨行 & 单元格跨列 实例
当我们在设计表格时,有时候需要让单元格横跨多行或多列,这就是rowspan
和colspan
的作用。
rowspan
表示纵向跨度,用于指定一个单元格要横跨的行数。
colspan
表示横向跨度,用于指定一个单元格要横跨的列数。
通过这两个属性,我们可以控制单元格的跨度,使得表格布局更加灵活,能够满足不同的设计需求。比如:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>学生信息表格</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
</style>
</head>
<body>
<h2>学生信息表格</h2>
<table>
<thead>
<tr>
<th>姓名</th>
<th colspan="3">地址</th>
<!-- 地址单元格跨三列,所以后面不需要再写了 -->
</tr>
<tr>
<th></th>
<th>省份</th>
<th>市区</th>
<th>详细地址</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>广东省</td>
<td>深圳市</td>
<td>南山区某某街道</td>
</tr>
<tr>
<td>李四</td>
<td>北京市</td>
<td>北京市</td>
<td>朝阳区某某路</td>
</tr>
</tbody>
</table>
</body>
</html>
这里呢,姓名的下一行空着,地址的右边空着,如图。如果姓名能和下边合并是不是更好看,地址单元格和右边合并是不是更合理?
所以这时候,就要用到上面提到的2个属性了。怎么写呢?
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>学生信息表格</title>
<style>
table {
border-collapse: collapse;
width: 800px;
}
th,
td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
</style>
</head>
<body>
<h2>学生信息表格</h2>
<table>
<thead>
<tr>
<th rowspan="2">姓名</th>
<!-- 姓名单元格占2行 -->
<th colspan="3">地址</th>
<!-- 表头单元格跨越3列,用于显示地址信息 -->
</tr>
<tr>
<!-- <th></th> 这个注释掉,因为,姓名单元格跨行已经占住这一个单元格了-->
<th>省份</th>
<th>市区</th>
<th>详细地址</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>广东省</td>
<td>深圳市</td>
<td>南山区某某街道</td>
</tr>
<tr>
<td>李四</td>
<td>北京市</td>
<td>北京市</td>
<td>朝阳区某某路</td>
</tr>
</tbody>
</table>
</body>
</html>
以上,对于我们新手呢,在学习的时候,要注意一下3点:
- 在编写HTML代码时,注意
colspan
和rowspan
的位置和属性值,确保语法正确。 - 注意合并单元格后的布局和样式,确保合并后的表格仍然清晰易读。
- 确保合并的单元格数不超过实际存在的单元格数,避免出现错位或错列的情况。
尤其最后1点,一定要数清占用的行数,被占用,该去掉的一定要去掉,否则,表格就有bug了,如图。
表格格式设置
案例讲完了,现在呢,详细学习关于HTML表格格式设置的属性,这些还是比较简单的。
单元格对齐(align)属性:用于控制表格中单元格内容的水平对齐方式。
可选取值:left(左对齐)、right(右对齐)、center(居中对齐)。
示例代码:
<td align="center">内容</td>
表格和单元格的背景颜色(bgcolor)属性:用于设置表格或单元格的背景颜色。
可以使用颜色名称、十六进制值或RGB值。
示例代码:
<table bgcolor="#f0f0f0">
或
<td bgcolor="lightblue">内容</td>
单元格内边距(cellpadding)属性:用于设置单元格内部内容与边框之间的间距。
取值为像素值或百分比值,项目里通常都是0,扁平化的。
示例代码:
<table cellpadding="10">
或
<td cellpadding="5">内容</td>
单元格间距(cellspacing)属性:用于设置单元格之间的间距。
取值为像素值或百分比值,项目里通常都是0。
示例代码:
<table cellspacing="5">
表格框架形态(frame)属性:用于设置表格边框的框架规则,包括以下几种取值:
可选取值:
void(无边框,默认值)
above(在表格上方显示边框)
below(在表格下方显示边框)
hsides(显示上部和下部的外侧边框)
vsides(显示左边和右边的外侧边框)
lhs(在左侧显示边框)
rhs(在右侧显示边框)
border(显示完整边框)
示例代码:
<table frame="void">
或
<table frame="hsides">
好,那一起来看个案例吧。
<table cellpadding="10" cellspacing="0" frame="vsides">
<!-- 表格的边框为1个像素 -->
<!-- 单元格的内边距为10像素 -->
<!-- 单元格之间的间距为0像素 -->
<!-- 边框规则为两侧边框 -->
<caption>
学生表
</caption>
<!-- 表头 -->
<thead>
<tr>
<th bgcolor="#777" align="center">学号</th>
<th bgcolor="#777" align="center">姓名</th>
<th bgcolor="#777" align="center">年龄</th>
<th bgcolor="#0f0" align="center">性别</th>
</tr>
</thead>
<!-- 表格内容 -->
<tbody>
<tr>
<td align="center">1001</td>
<td align="center">张三</td>
<td align="center">20</td>
<td align="center">男</td>
</tr>
<tr>
<td bgcolor="#0ff" align="center">1002</td>
<td align="right">李四</td>
<td align="center">22</td>
<td align="center">女</td>
</tr>
</tbody>
</table>
效果如下图:
需要注意的是,这里面的属性,最不常用的就是frame属性。为什么呢?
虽然frame属性可以控制表格边框的显示方式,但是它的功能相对简单,无法实现复杂的边框效果。如果更具体的的样式,还是要依托于CSS会更好,这个后续会详细写到。
虽然frame属性可以控制表格边框的显示方式,但是它的功能相对简单,无法实现复杂的边框效果。如果更具体的的样式,还是要依托于CSS会更好,这个后续会详细写到。