用table表格建立一个课程表

最新推荐文章于 2023-09-11 13:31:17 发布

原创最新推荐文章于 2023-09-11 13:31:17 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#table #表格

HTML 专栏收录该内容

18 篇文章

订阅专栏

本文将指导您如何使用HTML的<table>标签构建一个简洁明了的课程表，包括基本语法、样式设置以及如何合并单元格以展示时间、日期和课程信息。

用table表格建立一个课程表

首先看看预期效果：

<table>标签的基本语法：

<table>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>       
    </tr>
</table>

其中tr代表行，td代表列（显示两行两列）
单元格的宽高可用pading来控制，合并单元格用 colspan(横着合并列)，rowspan(竖着合并行)

具体程序如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>用table表格建立一个课程表</title>
<meta http-equiv="Content-Type" content="text/html; charset= utf8" />
<style>
table{
    border-collapse: collapse;
}
td{
    border: 1px solid blue;
    padding-right: 100px;
    padding-bottom: 20px;
}

</style>
</head>
    <body>
<table>
    <tr>
        <td>时间日期</td>
        <td>1</td>
        <td>2</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td rowspan="2">7</td>
        <td>8</td>
        <td>9</td>
        <td>0</td>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>

        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
    </tr>
    <tr>
        <td colspan="6">1</td>

    </tr>
    <tr>
        <td rowspan="2">5</td>
        <td>3</td>
        <td>2</td>
        <td>23</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
 
        <td>2</td>
        <td>2</td>
        <td>2</td>
        <td>2</td>
        <td>2</td>
    </tr>
</table>

    </body>

</html>

效果图：