HTML表格：日常消费账单表格展示网页

最新推荐文章于 2024-02-16 23:45:17 发布

A cup of tea.

最新推荐文章于 2024-02-16 23:45:17 发布

阅读量6.8k

点赞数 4

分类专栏： # Web技术应用基础-HTML 文章标签： html

本文链接：https://blog.csdn.net/qq_45823118/article/details/114853141

版权

HTML表格：日常消费账单表格展示网页

任务描述
相关知识
编程要求
测试说明

任务描述

本关任务是编写一个日常消费账单表格展示网页，你将通过本关学习如何使用HTML编写出简洁清晰的表格。

本关网页显示效果如下图所示：
在这里插入图片描述

相关知识

在日常生活中财务报表、日历等，都常使用表格展示。通常，表格数据都由行和列组成。

最基本的表格

在HTML表中，一个表格(table)由行(tr)组成，每一行由单元格组成，单元格有标题单元格(th)和数据单元格(td)。

一个最基本的表格如下：

<body>
    <table>
        <!-- 第一行 -->
        <tr>
            <td>第一行第一个单元格数据</td>
            <td>第一行第二个单元格数据</td>
        </tr>
        <!-- 第二行 -->
        <tr>
            <td>第二行第一个单元格数据</td>
            <td>第二行第二个单元格数据</td>
        </tr>
    </table>
</body>

显示效果如图：
在这里插入图片描述
这是一个2行2列的表格，可以看到<table>元素中包含了两行，即两个<tr>元素；每行有两列，即每个<tr>中包含两个元素。

提示：

tr: table row；
th: table head；
td: table data。

带边框的表格

在第一个例子中，表格没有边框，看起来不太明显。那么，如何设置带边框的表格呢？

我们可以指定<table>元素的border属性值。

<table border="1">
</table>

显示效果如图：
在这里插入图片描述
但是，这样的边框样式不太好看，我们可以通过编写CSS修改边框样式。此例作为了解，在之后的课程中将会学习。

举例如下：

<!DOCTYPE html>
<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>18012311234</td>
            <td>家人</td>
        </tr