基于HTML表格的课程表

deng_hongbin

已于 2024-05-20 16:36:12 修改

阅读量297

点赞数 4

文章标签： html html5 课程设计

于 2024-05-20 15:43:39 首次发布

本文链接：https://blog.csdn.net/weixin_53598426/article/details/139066868

版权

1.表格里的标签

<table> 定义一个表格
<caption> 定义表格标题
<thead> 定义表格中的表头内容
<tbody> 定义表格中的主体内容
<tfoot> 定义表格中的表注内容（脚注）
<tr> 定义表格中的行
<th> 定义表格中的表头单元格
<td> 定义表格中单元格

2.表格属性设置

为表格设置边框：<table border="1"> </table>
合并表格边框 <table border="1" cellspacing="0"></table>
设置表格宽度 <table border="1" cellspacing="0" width="800"></table>
设置表格对齐方式 <table border="1" cellspacing="0" width="800" align="center"></table>

3.单元格设置

一行单元格对齐 <tr align="center">小明</td>
单元格对齐 <td align="center">小明</td>
设置单元格宽高<td height="100" width="100" align="center">小明</td>
合并单元格：通过设置 <td> 属性可以合并单元格
- colspan 设置单元格可横跨的列数
- rowspan 设置单元格可横跨的行数

4.课程表设计

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
</head>
<body>
      <table border="1" width="800">
       <caption><h2>课程表</h2></caption>
       <thead>
        <tr>
            <th>&nbsp;</th> 
            <th>周一</th>
            <th>周二</th>
            <th>周三</th>
            <th>周四</th>
            <th>周五</th>
            <th>周六</th>
            <th>周日</th>
        </tr>
       </thead>
       <tbody>
        <tr align="center">
            <th>第一节</th>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>政治</td>
            <td>历史</td>
            <td>生物</td>
            <td rowspan="9">放假</td> 
        </tr>
        <tr align="center">
            <th>第二节</th>
            <td>物理</td>
            <td>化学</td>
            <td>生物</td>
            <td>语文</td>
            <td>语文</td>
            <td>数学</td> 
        </tr>
        <tr align="center">
            <th>第三节</th>
            <td>历史</td>
            <td>地理</td>
            <td>美术</td>
            <td>体育</td>
            <td>化学</td>
            <td>数学</td>
        </tr>
        <tr align="center">
            <th>第四节</th>
            <td>生物</td>
            <td>物理</td>
            <td>数学</td>
            <td>数学</td>
            <td>生物</td>
            <td>历史</td>
        </tr>
        <tr align="center">
            <th colspan="6">午休</th>  <!-- 一个“午休”往右占用6个格子（包括自己），多余格子需删除 -->
            <td rowspan="5">放假</td>  <!-- 一个“放假”往下占用5个格子（包括自己），多余格子需删除 -->
        </tr>
        <tr align="center">
            <th>第五节</th>
            <td>物理</td>
            <td>化学</td>
            <td>数学</td>
            <td>语文</td>
            <td>语文</td>
        </tr>
        <tr align="center">
            <th>第六节</th>
            <td>生物</td>
            <td>物理</td>
            <td>生物</td>
            <td>化学</td>
            <td>生物</td>
        </tr>
        <tr align="center">
            <th>第七节</th>
            <td>生物</td>
            <td>数学</td>
            <td>化学</td>
            <td>生物</td>
            <td>数学</td>
        </tr>
        <tr align="center">
            <th>第八节</th>
            <td>生物</td>
            <td>物理</td>
            <td>数学</td>
            <td>数学</td>
            <td>生物</td>
        </tr>
</tbody>
<tfoot>某某学校

</tfoot>
      </table>

</body>
</html>