学习CSS表格小项目

最新推荐文章于 2024-11-21 23:50:17 发布

馒头宝贝

最新推荐文章于 2024-11-21 23:50:17 发布

阅读量184

点赞数 1

分类专栏：前端三件套之CSS 文章标签： css html

本文链接：https://blog.youkuaiyun.com/qq_60407617/article/details/119169710

版权

前端三件套之CSS 专栏收录该内容

6 篇文章 ¥69.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了如何使用CSS来美化HTML表格，包括改变边框、设置border-collapse属性、添加颜色、调整对齐方式以及设置单元格间距，从而创建出美观的表格。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大家好，我又来写博客了！今天我们学习CSS表格。

---------------------------------------------------------------------------------------------------------------------------------

首先，一样，敲好基本框架：

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>dangsiyuan</title>
    <style>

今天来编辑表格：

以下是表格的最终效果（参见菜鸟教程）：

Company	Contact	Country
Alfreds Futterkiste	Maria Anders	Germany
Berglunds snabbköp	Christina Berglund	Sweden
Centro comercial Moctezuma	Francisco Chang	Mexico
Ernst Handel	Roland Mendel	Austria
Island Trading	Helen Bennett	UK
Königlich Essen	Philip Cramer	Germany
Laughing Bacchus Winecellars	Yoshi Tannamuri	Canada
Magazzini Alimentari Riuniti	Giovanni Rovelli	Italy
North/South	Simon Crowther	UK
Paris spécialités	Marie Bertrand	France
The Big Cheese	Liz Nixon	USA
Vaffeljernet	Palle Ibsen	Denmark

上面就是一个漂亮的，用HTML做出来的列表。喜欢吗？

要实现这个效果，我们首先要对表格的边框(border)进行改变：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>dangsiyuan</title>
    <style>
        table,th,td
        {
            border: 1px solid black;
        }
    </style>
    </head>
    <body>
        <table>
        <tr>
            <th>name</th>
            <th>address</th>
            <th>age</th>
            <th>money per month</th>
        </tr>
        <tr>
            <td>me</td>
            <td>Earth</td>
            <td>10</td>
            <td>100000000</td>
        </tr>
        </table>
        </body>
        </html>

这样，就给列表做了基本的设定。但如果有同学试了的话，会发现边框还是不好看。怎么办呢？那我们还要再设置一下：

这里，我们要用到border-collapse:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>dangsiyuan</title>
    <style>
        table
        {
            border-collapse:collapse;
        }
        table,th,td
        {
            border: 1px solid black;
        }
    </style>
    </head>
    <body>
        <table>
        <tr>
            <th>name</th>
            <th>address</th>
            <th>age</th>
            <th>money per month</th>
        </tr>
        <tr>
            <td>me</td>
            <td>Earth</td>
            <td>10</td>
            <td>100000000</td>
        </tr>
        </table>
        </body>
        </html>

注：在某些游览器border-collapse没用，请谨慎操作。

这样，我们的表格的边框就跟上面的表格的边框一样了。

可列表不能没有颜色啊？

于是下面我们来设置颜色：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>dangsiyuan</title>
    <style>
        table
        {
            border-collapse:collapse;
        }
        table,th,td
        {
            border: 1px solid black;
        }
        th
        {
            background-color: cornflowerblue;
            color: cornsilk;
        }
    </style>
    </head>
    <body>
        <table>
        <tr>
            <th>name</th>
            <th>address</th>
            <th>age</th>
            <th>money per month</th>
        </tr>
        <tr>
            <td>me</td>
            <td>Earth</td>
            <td>10</td>
            <td>100000000</td>
        </tr>
        </table>
        </body>
        </html>

这样，我们就修改好了表头。但现在的表格并不美观，让我们让它左对齐：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>dangsiyuan</title>
    <style>
        table
        {
            border-collapse:collapse;
        }
        table,th,td
        {
            border: 1px solid black;
        }
        th
        {
            background-color: cornflowerblue;
            color: cornsilk;
        }
        td
        {
            text-align: left;
        }
    </style>
    </head>
    <body>
        <table>
        <tr>
            <th>name</th>
            <th>address</th>
            <th>age</th>
            <th>money per month</th>
        </tr>
        <tr>
            <td>me</td>
            <td>Earth</td>
            <td>10</td>
            <td>100000000</td>
        </tr>
        </table>
        </body>
        </html>

现在的表格全部左对齐了，可距离不同。看着很别扭。那我们来设置一下间距：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>dangsiyuan</title>
    <style>
        table
        {
            border-collapse:collapse;
        }
        table,th,td
        {
            border: 1px solid black;
        }
        th
        {
            background-color: cornflowerblue;
            color: cornsilk;
        }
        td
        {
            text-align: left;
            padding: 10px;
        }
    </style>
    </head>
    <body>
        <table>
        <tr>
            <th>name</th>
            <th>address</th>
            <th>age</th>
            <th>money per month</th>
        </tr>
        <tr>
            <td>me</td>
            <td>Earth</td>
            <td>10</td>
            <td>100000000</td>
        </tr>
        </table>
        </body>
        </html>

表头有了颜色，其他部分也不能少：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>dangsiyuan</title>
    <style>
        table
        {
            border-collapse:collapse;
        }
        table,th,td
        {
            border: 1px solid black;
        }
        th
        {
            background-color: cornflowerblue;
            color: cornsilk;
        }
        td
        {
            text-align: left;
            padding: 10px;
        }
        #people tr.alt td
        {
            color: white;
            background-color: rgb(199, 147, 52);
        }
        #people tr.css td
        {
            color: white;
            background-color: rgb(214, 193, 98);
        }
    </style>
    </head>
    <body>
        <table id="people">
        <tr>
            <th>name</th>
            <th>address</th>
            <th>age</th>
            <th>money per month</th>
        </tr>
        <tr class="css">
            <td>me</td>
            <td>Earth</td>
            <td>10</td>
            <td>100</td>
        </tr>
        <tr class="alt">
            <td>mom</td>
            <td>Earth</td>
            <td>31</td>
            <td>10000</td>
        </tr>
        <tr class="css">
            <td>dad</td>
            <td>Earth</td>
            <td>45</td>
            <td>100000</td>
        </tr>
        <tr class="alt">
            <td>brother</td>
            <td>Earth</td>
            <td>0</td>
            <td>10</td>
        </tr>
        </table>
        </body>
        </html>

一个漂亮的表格就做好啦！

搞个活动：只要打赏十元，就能免费读我的专辑！仅限前十！