用table表格建立一个课程表

最新推荐文章于 2024-05-20 15:43:39 发布

Adrian503

最新推荐文章于 2024-05-20 15:43:39 发布

阅读量2k

点赞数

分类专栏： HTML 文章标签： table 表格

本文链接：https://blog.csdn.net/Adrian503/article/details/48754549

版权

HTML 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

用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>

效果图：