HTML表格：日常消费账单表格展示网页
HTML表格：日常消费账单表格展示网页
- 任务描述
- 相关知识
-
- 最基本的表格
- 带边框的表格
- 带表头的表格
- scope属性
- 结构更清晰的表格
- 单元格跨越多行多列的表格
- 编程要求
- 测试说明
任务描述
本关任务是编写一个日常消费账单表格展示网页，你将通过本关学习如何使用HTML编写出简洁清晰的表格。
本关网页显示效果如下图所示：
相关知识
在日常生活中财务报表、日历等，都常使用表格展示。通常，表格数据都由行和列组成。
最基本的表格
在HTML表中，一个表格(table)由行(tr)组成，每一行由单元格组成，单元格有标题单元格(th)和数据单元格(td)。
一个最基本的表格如下：
<body>
<table>
<tr>
<td>第一行第一个单元格数据td>
<td>第一行第二个单元格数据td>
tr>
<tr>
<td>第二行第一个单元格数据td>
<td>第二行第二个单元格数据td>
tr>
table>
body>
显示效果如图： 提示： 在第一个例子中，表格没有边框，看起来不太明显。那么，如何设置带边框的表格呢？ 我们可以指定 显示效果如图： 举例如下： 显示效果如图： 一般情况下，我们都会指定表格的表头信息，可以使用标题单元格进行定义。 举例如下： 显示效果如下： 其他的一些值含义如下： 为了使表格的整体结构更加的清晰，我们还能够使用、和元素来定义表格。 举例如下： 显示效果如图： 此例中，我们将列值的总和行作为表格的尾部。通常，我们都会建议大家使用这三种元素来定义表格，因为这样做表格的总体结构更为清晰。 我们经常会看到这样的表格： 我们可以设定 上述表格代码如下： 在此例中，表格头部第7行， 所以， 请在右侧的编辑器中直接编辑修改HTML页面，具体要求是：
这是一个2行2列的表格，可以看到元素中包含了两行，即两个
元素；每行有两列，即每个 中包含两个元素。
tr: table row；th: table head；td: table data。带边框的表格
元素的
border属性值。
<table border="1">
table>
但是，这样的边框样式不太好看，我们可以通过编写CSS修改边框样式。此例作为了解，在之后的课程中将会学习。
<head>
<meta charset="UTF-8" />
<title>HTML – 简单表格title>
<style type="text/css">
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid #000;
}
style>
head>
<body>
<table border="1">
<tr>
<td>第一行第一个单元格数据td>
<td>第一行第二个单元格数据td>
tr>
<tr>
<td>第二行第一个单元格数据td>
<td>第二行第二个单元格数据td>
tr>
table>
body>
html>
在之后的示例中，我们都默认添加了表格边框样式。带表头的表格
<body>
<table width="400">
<caption>通讯录caption>
<tr>
<th scope="col">姓名th>
<th scope="col">电话th>
<th scope="col">备注th>
tr>
<tr>
<td>李雯td>
<td>18012311234td>
<td>家人td>
tr>
<tr>
<td>王谦td>
<td>17812311234td>
<td>同事td>
tr>
<tr>
<td>周佳td>
<td>17413511234td>
<td>高中同学td>
tr>
table>
body>
其中，
元素的
width属性，改变了表格的宽度；
元素中，使用 元素指定了表头。本例中有三列信息，所以包含了三个 元素；
元素的属性 scope的值为col。
scope属性
元素的 scope属性用于定义表头数据与单元数据关联的方法。本例中值为col，表示规定的是列的表头。
列组和行组的概念将在单元格跨越多行或多列的表格小节中讲述和使用。结构更清晰的表格
<body>
<table width="400">
<caption>运动会跑步成绩caption>
<thead>
<tr>
<th scope="col">长度th>
<th scope="col">李雯th>
<th scope="col">王谦th>
<th scope="col">周佳th>
tr>
thead>
<tbody>
<tr>
<th scope="row">100米th>
<td>14std>
<td>16std>
<td>13std>
tr>
<tr>
<th scope="row">200米th>
<td>26std>
<td>23std>
<td>25std>
tr>
<tr>
<th scope="row">400米th>
<td>70std>
<td>73std>
<td>69std>
tr>
tbody>
<tfoot>
<tr>
<th scope="row">总用时th>
<td>110std>
<td>112std>
<td>107std>
tr>
tfoot>
table>
顾名思义，元素标记表格第6行到第10行为头部； 元素包围了第15行到第32行的所有数据行；最后，元素标记表格的尾部。
单元格跨越多行多列的表格
其中的单元格，跨越了多行或者多列。在HTML中要如何实现呢？colspan 和 rowspan 属性让 或 单元格跨越多行或多列。
<body>
<table>
<caption>彩排安排caption>
<thead>
<tr>
<th scope="rowgroup">时间th>
<th scope="col">周一th>
<th scope="col">周二th>
<th scope="col">周三th>
tr>
thead>
<tbody>
<tr>
<th scope="row">上午8点th>
<td>开场舞td>
<td colspan="2">歌曲串烧td>
tr>
<tr>
<th scope="row">上午9点th>
<td>小品td>
<td>相声td>
<td rowspan="2">大型魔术td>
tr>
<tr>
<th scope="row">上午10点th>
<td>杂艺表演td>
<td>乐队歌曲td>
tr>
tbody>
table>
body>
scope="rowgroup"指定了该单元格是行组的表头。表格中，第3行的第3列和第4列为合并单元格，我们设置第18行colspan="2"，表示该单元格跨越两列；同理，第24行设置rowspan="2"表示该单元格跨越两行。
rowspan="n"；colspan="n"。编程要求
scope属性，值设置为col；元素，将总计一行作为表尾。
测试说明
代码文件：
<html>
<head>
<meta charset="utf-8">
<title>HTML表格title>
<meta name="description" content="HTML表格知识讲解">
<meta name="keywords" content="HTML,表格, Table">
<style type="text/css">
table {
border-collapse: collapse;
}
caption {
font-weight: bold;
margin-bottom: .5em;
}
th,
td {
padding: .5em .75em;
border: 1px solid #000;
}
tfoot {
font-weight: bold;
}
style>
head>
<body>
<table border="1" style="margin:auto" width="400">
<caption>日常消费账单caption>
<thead>
<tr>
<th align="left" scope="col">消费项目th>
<th align="right" scope="col">一月th>
<th align="right" scope="col">二月th>
tr>
thead>
<tbody>
<tr>
<th align="left" scope="row">食品烟酒th>
<td align="right">￥1241.00td>
<td align="right">￥1250.00td>
tr>
<tr>
<th align="left" scope="row">衣物th>
<td align="right">￥330.00td>
<td align="right">￥594.00td>
tr>
<tr>
<th align="left" scope="row">居住th>
<td align="right">￥2100td>
<td align="right">￥2100td>
tr>
<tr>
<th align="left" scope="row">生活用品及服务th>
<td align="right">￥700.00td>
<td align="right">￥650.00td>
tr>
<tr>
<th align="left" scope="row">医疗保健th>
<td align="right">￥150.00td>
<td align="right">￥50.00td>
tr>
<tr>
<th align="left" scope="row">教育、文化和娱乐th>
<td align="right">￥1030.00td>
<td align="right">￥1250.00td>
tr>
<tr>
<th align="left" scope="row">交通和通信th>
<td align="right">￥230.00td>
<td align="right">￥650.00td>
tr>
<tr>
<th align="left" scope="row">其他用品和服务th>
<td align="right">￥130.40td>
<td align="right">￥150.00td>
tr>
tbody>
<tfoot>
<tr>
<th align="left" scope="row">总计th>
<th align="right">￥5911th>
<th align="right">￥6694th>
tr>
tfoot>
table>
body>
html>
你可能感兴趣的:(#,Web技术应用基础-HTML,html)