网页设计基础 第十五讲：妙笔生花：CSS样式让表格焕然一新

TechLearn
4,802 阅读3分钟

本文通过实例操作，详细介绍如何利用CSS美化网页中的表格。从基本的HTML表格结构出发，结合CSS样式技巧，实现了一个美观且功能性的学生信息表格。通过实践，读者将学会如何使用CSS控制表格的布局、颜色及交互效果。

任务描述

在本次实践中，您将学习如何使用CSS对网页中表格进行样式美化。我们将创建一个包含学生信息的简单表格，并使用CSS来改善其外观和布局。通过这个实践，您将掌握表格元素的基本用法及其相关CSS样式的应用。

image.png

任务准备

  • 理解HTML表格的基本结构（<table>, <tr>, <th>, <td>，rowspan,colspan等）
  • 理解CSS基本语法及选择器的使用

任务实施

  1. 创建HTML文件： 新建一个index.html文件，输入基本的HTML结构，包括添加以下内容，建立一个学生信息表格：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子布局应用</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<header>
    <h1>学生信息表</h1>
</header>
<main>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>班级</th>
                <th>成绩</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>18</td>
                <td>高一</td>
                <td>95</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>19</td>
                <td>高一</td>
                <td>88</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>17</td>
                <td>高二</td>
                <td>92</td>
            </tr>
        </tbody>
    </table>
</main>
<footer>
    <p>© 2024 学校信息管理系统</p>
</footer>
</body>
</html>

2. 创建CSS文件：

新建一个styles.css文件，链接到HTML文件的<head>中：

在styles.css中，添加以下样式以美化表格： 
     body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
}

header {
  background-color: #4CAF50;
  color: white;
  text-align: center;
  padding: 20px 0;
}

table {
  width: 80%;
  margin: 20px auto;
  border-collapse: collapse;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  background-color: white;
}

th, td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

th {
  background-color: #4CAF50;
  color: white;
}

tr:hover {
  background-color: #f1f1f1;
}

footer {
  text-align: center;
  padding: 10px 0;
  background-color: #333;
  color: white;
  position: relative;
  bottom: 0;
  width: 100%;
}

实验实训

实验一

image.png

要求如下：

1）表格样式全部通过css样式来实现。

2）表格边框颜色为粉红色

3）表格整体在浏览器页面中水平居中。

实验二

image.png

实验三

要求如下： 1）定义列表头

2）要效果图合并行和列

3）表格在页面中水平居中

image.png

实验四

要求如下：

1）在项目中创建网页warehousing-order.html和warehousing-order.css，实现如下图所示入库单

2）标签使用h1标签，水平居中

3）交货单位和时间使用弹性盒两端对齐，年月日的空白处使用span标签，宽度为50

4）表格为8行9列，边框为1，没有单元格间距和内间距，总宽度为800

5）第1行为列头，使用thead定义，名称合并两个单元格

6）tbody中的第一行单元格边框为none，不填写任何内容（相当于不可见）

7）表格最后一行使用tfoot定义，第1和第二个单元格合并，后七个单元格合并

8）大写中各数值使用span标签，宽度为40px，小写span加下边框，宽度100

image.png

avatar
文章
阅读
粉丝