【博学谷学习记录】超强总结，用心分享 | 制作一个表格

最新推荐文章于 2024-08-24 13:47:49 发布

吉三去雪山

最新推荐文章于 2024-08-24 13:47:49 发布

阅读量144

点赞数

文章标签： html5 css

本文链接：https://blog.csdn.net/scjiji/article/details/125548195

版权

本文详细介绍了如何使用HTML和CSS创建一个具有样式的课程表，包括设置表格的基本结构、合并单元格、调整边框样式、添加表头以及美化表格的方法。通过设置表格的宽度、高度、边框合并以及背景颜色，实现了课程表的清晰展示，并提供了完整的HTML代码示例。

摘要由CSDN通过智能技术生成

用表格做一个好看的课程表

和表格相关的标签，大家第一反应就是:

<table>
    <tr>

        <td></td>

        <td></td>

    </tr>
</table>

首先，table标签指的是一个表格的整体，tr代表的是行。td代表的是列，上面代码形成的效果就是一个一行两列的表格，再加上具体的内容，就可以实现一个简单的表格,如图所示：

为了让表格的效果更加明显，所以我们需要给表格加上边框，以及设置表格的宽高

<style>
        table{
            width: 600px;
            height: 400px;
                
        }
        tr td{
            border: 1px solid #000000;
        }
             
</style>

现在表格已经具有雏形，接下来就是对表格的美化，首先在表格的边框交接的地方都是有两根实线，这是默认的1像素的间距，想要取消掉，需要消除表格之间的间距

table{
  width: 600px;
  height: 400px;
  border-collapse: collapse;
                
}

border-collapse 用于表格属性, 表示表格的两边框的状态。取值有三种：

1.separate：

默认值。边框会被分开。不会忽略border-spacing 和 empty-cells 属性。

2.collapse：

如果可能，边框会合并为一个单一的边框。会忽略border-spacing 和 empty-cells 属性。

3.inherit：

规定应该从父元素继承border-collapse属性的值。

设置好border-collapse后的效果如图所示：

在上方的表格中，我们可以发现，上午，下午，午休这类词在某一块区域重复出现，那么我们可以直接将其合并成一个单元格，

        <tr>
            <td rowspan="2">上午</td>
            <td>语文</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>英语</td>
        </tr>
        <tr>
            <!-- <td>上午</td> -->
            <td>数学</td>
            <td>英语</td>
            <td>语文</td>
            <td>英语</td>
            <td>语文</td>
        </tr>
        <tr>
            <td rowspan="3">下午</td>
            <td colspan="5">午休</td>
        </tr>

在html中，合并单元格用colspan和rowspan来实现

colspan 属性规定单元格可横跨的列数。比如午休是五列合成一列，那么colspan就在第一列里设置属性值为5，则接下来的5列的位置就被一个表格占据

rowspan属性规定单元格可横跨的行数。比如上午是两行合成一行，那么rowspan就在第一行里设置属性值为2，则接下来的两行的位置就被一个表格占据

设置完成之后的效果如图所示：

表格的第一行为表头，所以要突出表现出来，在这就不得不说一个很容易让大家忽略的标签表头标签<th>

<th> 元素中的文本通常呈现为粗体并且居中。

<td> 元素中的文本通常是普通的左对齐文本。

所以我们表格的第一行一般用th

        <tr>
            <th>时间</th>
            <th>周一</th>
            <th>周二</th>
            <th>周三</th>
            <th>周四</th>
            <th>周五</th>
        </tr>

不要忘了设置th的边框，最后的效果是：

最后设置字体大小，颜色，以及背景颜色即可

最后加表格标题：

全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
            table{
                width: 600px;
                height: 400px;
                border-collapse: collapse;
                text-align: center;
                font-size: 20px;
                margin: 0 auto;
            }
            tr td,th{
                border: 1px solid #000000;
            }
            .pink{
                background-color: rgba(168, 111, 154, 0.3);
            }
            .blue{
                background-color: rgba(106, 139, 170, 0.3);
            }
            .dark{
                background-color: rgba(63, 102, 104, 0.3);
            }
            
    </style>
</head>

<body>
    <table>
        <caption><h2>最理想的课程表</h2></caption>
        <tr class="dark">
            <th>时间</th>
            <th>周一</th>
            <th>周二</th>
            <th>周三</th>
            <th>周四</th>
            <th>周五</th>
        </tr>
        <tr class="pink">
            <td rowspan="2" class="dark">上午</td>
            <td>语文</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>英语</td>
        </tr>
        <tr class="blue">
            <!-- <td>上午</td> -->
            <td>数学</td>
            <td>英语</td>
            <td>语文</td>
            <td>英语</td>
            <td>语文</td>
        </tr>
        <tr class="dark">
            <td rowspan="3">下午</td>
            <td colspan="5">午休</td>
        </tr>
        <tr class="pink">
            
            <td>数学</td>
            <td>体育</td>
            <td>数学</td>
            <td>音乐</td>
            <td>写作</td>
        </tr>
        <tr class="blue">
            
            <td>体育</td>
            <td>绘画</td>
            <td>数学</td>
            <td>围棋</td>
            <td>计算机</td>
        </tr>
    </table>
</body>
</html>