2022.10.17第三课：table表格学习

2022.10.17第三课：table表格学习

一、table表格建立：

1、实验中学高一<四>班2002-2023学年课程表

首先以emment语法建立表格，语法如下table>caption{实验中学高一<四>班2022-2023学年课程表}+(thead>th{ID}+th{分类}+th{科目}+th{上学期课时}+th{下学期课时}+th{总课时})+(tbody>tr>td*5)*20+tfoot>tr>td*5

建立表格之后填充内容，呈现的效果如下所示：

<table >
        <caption><b>实验中学高一<四>班2022-2023学年课程表</b></caption>
        <thead>
            <th>ID</th>
            <th>分类</th>
            <th>科目</th>
            <th>上学期课时</th>
            <th>下学期课时</th>
            <th>总课时</th>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>公共科目</td>
                <td>语文</td>
                <td>100</td>
                <td>100</td>
                <td>200</td>
            </tr>
            <tr>
                <td>2</td>
                <td>公共科目</td>
                <td>数学</td>
                <td>100</td>
                <td>100</td>
                <td>200</td>
            </tr>
            <tr>
                <td>3</td>
                <td>公共科目</td>
                <td>英语</td>
                <td>100</td>
                <td>100</td>
                <td>200</td>
            </tr>
            <tr>
                <td>4</td>
                <td>理科</td>
                <td>物理</td>
                <td>90</td>
                <td>90</td>
                <td>180</td>
            </tr>
            <tr>
                <td>5</td>
                <td>理科</td>
                <td>化学</td>
                <td>90</td>
                <td>90</td>
                <td>180</td>
            </tr>
            <tr>
                <td>6</td>
                <td>理科</td>
                <td>生物</td>
                <td>90</td>
                <td>90</td>
                <td>180</td>
            </tr>
            <tr>
                <td>7</td>
                <td>文科</td>
                <td>历史</td>
                <td>90</td>
                <td>90</td>
                <td>180</td>
            </tr>
            <tr>
                <td>8</td>
                <td>文科</td>
                <td>地理</td>
                <td>90</td>
                <td>90</td>
                <td>180</td>
            </tr>
            <tr>
                <td>9</td>
                <td>文科</td>
                <td>政治</td>
                <td>90</td>
                <td>90</td>
                <td>180</td>
            </tr>
            <tr>
                <td>10</td>
                <td>体育</td>
                <td>篮球</td>
                <td>30</td>
                <td>30</td>
                <td>60</td>
            </tr>
            <tr>
                <td>11</td>
                <td>体育</td>
                <td>足球</td>
                <td>30</td>
                <td>30</td>
                <td>60</td>
            </tr>
            <tr>
                <td>12</td>
                <td>体育</td>
                <td>排球</td>
                <td>30</td>
                <td>30</td>
                <td>60</td>
            </tr>
            <tr>
                <td>13</td>
                <td>音乐</td>
                <td>钢琴</td>
                <td>30</td>
                <td>30</td>
                <td>60</td>
            </tr>
            <tr>
                <td>14</td>
                <td>音乐</td>
                <td>手提琴</td>
                <td>30</td>
                <td>30</td>
                <td>60</td>
            </tr>
            <tr>
                <td>15</td>
                <td>音乐</td>
                <td>葫芦丝</td>
                <td>30</td>
                <td>30</td>
                <td>60</td>
            </tr>
            <tr>
                <td>16</td>
                <td>美术</td>
                <td>绘画</td>
                <td>30</td>
                <td>30</td>
                <td>60</td>
            </tr>
            <tr>
                <td>17</td>
                <td>美术</td>
                <td>素描</td>
                <td>30</td>
                <td>30</td>
                <td>60</td>
            </tr>
            <tr>
                <td>18</td>
                <td>美术</td>
                <td>建筑艺术</td>
                <td>30</td>
                <td>30</td>
                <td>60</td>
            </tr>
            <tr>
                <td>19</td>
                <td>特长</td>
                <td>书法</td>
                <td>30</td>
                <td>30</td>
                <td>60</td>
            </tr>
            <tr>
                <td>20</td>
                <td>计算机</td>
                <td>php编程</td>
                <td>30</td>
                <td>30</td>
                <td>60</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>课时总计</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tfoot>

2、然后我们分析发现：

（1）语文、数学、英语都属于公共科目，在分类上可以合并，在第14行td标签的起始标签中使用合并行的属性rowspan= "3"，同时注释掉第22\30行的td单元格;
(2) 物理、化学、生物都属于理科科目，在分类上可以合并，在第38行td标签的起始标签中使用合并行的属性rowspan= "3"，同时注释掉第46\54行的td单元格;
(3) 历史、地理、政治都属于文科科目，在分类上可以合并，在第62行td标签的起始标签中使用合并行的属性rowspan= "3"，同时注释掉第70\78行的td单元格;
（4）篮球、足球、排球都属于体育科目，在分类上可以合并，在第86行td标签的起始标签中使用合并行的属性rowspan= "3"，同时注释掉第94\102行的td单元格;
(5) 钢琴、手提琴、葫芦丝都属于音乐科目，在分类上可以合并，在第110行td标签的起始标签中使用合并行的属性rowspan= "3"，同时注释掉第118\126行的td单元格;
(6) 绘画、素描、建筑艺术都属于美术科目，在分类上可以合并，在第134行td标签的起始标签中使用合并行的属性rowspan= "3"，同时注释掉第132\150行的td单元格;，
（7）最后我们通过分析发现，最后一行是总的统计，因为第一列的序号、第二列的分类、第三列的科目，都将被合并，所以我们在第175行的td单元格中需要使用列合并属性colspan=3。同时注释掉第179、180行的td单元格，最终呈现的html5代码如下：

<table border="1" cellpadding="0" cellspacing="0" text-align="center" width="600">
        <caption><b>实验中学高一<四>班2022-2023学年课程表</b></caption>
        <thead>
            <th>ID</th>
            <th>分类</th>
            <th>科目</th>
            <th>上学期课时</th>
            <th>下学期课时</th>
            <th>总课时</th>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td rowspan="3">公共科目</td>
                <td>语文</td>
                <td>100</td>
                <td>100</td>
                <td>200</td>
            </tr>
            <tr>
                <td>2</td>
                <!-- <td>公共科目</td> -->
                <td>数学</td>
                <td>100</td>
                <td>100</td>
                <td>200</td>
            </tr>
            <tr>
                <td>3</td>
                <!-- <td>公共科目</td> -->
                <td>英语</td>
                <td>100</td>
                <td>100</td>
                <td>200</td>
            </tr>
            <tr>
                <td>4</td>
                <td rowspan="3">理科</td>
                <td>物理</td>
                <td>90</td>
                <td>90</td>
                <td>180</td>
            </tr>
            <tr>
                <td>5</td>
                <!-- <td>理科</td> -->
                <td>化学</td>
                <td>90</td>
                <td>90</td>
                <td>180</td>
            </tr>
            <tr>
                <td>6</td>
                <!-- <td>理科</td> -->
                <td>生物</td>
                <td>90</td>
                <td>90</td>
                <td>180</td>
            </tr>
            <tr>
                <td>7</td>
                <td rowspan="3">文科</td>
                <td>历史</td>
                <td>90</td>
                <td>90</td>
                <td>180</td>
            </tr>
            <tr>
                <td>8</td>
                <!-- <td>文科</td> -->
                <td>地理</td>
                <td>90</td>
                <td>90</td>
                <td>180</td>
            </tr>
            <tr>
                <td>9</td>
                <!-- <td>文科</td> -->
                <td>政治</td>
                <td>90</td>
                <td>90</td>
                <td>180</td>
            </tr>
            <tr>
                <td>10</td>
                <td rowspan="3">体育</td>
                <td>篮球</td>
                <td>30</td>
                <td>30</td>
                <td>60</td>
            </tr>
            <tr>
                <td>11</td>
                <!-- <td>体育</td> -->
                <td>足球</td>
                <td>30</td>
                <td>30</td>
                <td>60</td>
            </tr>
            <tr>
                <td>12</td>
                <!-- <td>体育</td> -->
                <td>排球</td>
                <td>30</td>
                <td>30</td>
                <td>60</td>
            </tr>
            <tr>
                <td>13</td>
                <td rowspan="3">音乐</td>
                <td>钢琴</td>
                <td>30</td>
                <td>30</td>
                <td>60</td>
            </tr>
            <tr>
                <td>14</td>
                <!-- <td>音乐</td> -->
                <td>手提琴</td>
                <td>30</td>
                <td>30</td>
                <td>60</td>
            </tr>
            <tr>
                <td>15</td>
                <!-- <td>音乐</td> -->
                <td>葫芦丝</td>
                <td>30</td>
                <td>30</td>
                <td>60</td>
            </tr>
            <tr>
                <td>16</td>
                <td rowspan="3">美术</td>
                <td>绘画</td>
                <td>30</td>
                <td>30</td>
                <td>60</td>
            </tr>
            <tr>
                <td>17</td>
                <!-- <td>美术</td> -->
                <td>素描</td>
                <td>30</td>
                <td>30</td>
                <td>60</td>
            </tr>
            <tr>
                <td>18</td>
                <!-- <td>美术</td> -->
                <td>建筑艺术</td>
                <td>30</td>
                <td>30</td>
                <td>60</td>
            </tr>
            <tr>
                <td>19</td>
                <td>特长</td>
                <td>书法</td>
                <td>30</td>
                <td>30</td>
                <td>60</td>
            </tr>
            <tr>
                <td>20</td>
                <td>计算机</td>
                <td>php编程</td>
                <td>30</td>
                <td>30</td>
                <td>60</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">课时总计</td>
                <td>1170</td>
                <td>1170</td>
                <td>2340</td>
            </tr>
        </tfoot>
    </table>