简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 2022.10.17第三课：table表格学习
Blogger Information
Blog 14
fans 0
comment 0
visits 7470
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
2022.10.17第三课：table表格学习
启动未来
Original
425 people have browsed it

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

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

  1. <table >
  2.         <caption><b>实验中学高一<四>班2022-2023学年课程表</b></caption>
  3.         <thead>
  4.             <th>ID</th>
  5.             <th>分类</th>
  6.             <th>科目</th>
  7.             <th>上学期课时</th>
  8.             <th>下学期课时</th>
  9.             <th>总课时</th>
  10.         </thead>
  11.         <tbody>
  12.             <tr>
  13.                 <td>1</td>
  14.                 <td>公共科目</td>
  15.                 <td>语文</td>
  16.                 <td>100</td>
  17.                 <td>100</td>
  18.                 <td>200</td>
  19.             </tr>
  20.             <tr>
  21.                 <td>2</td>
  22.                 <td>公共科目</td>
  23.                 <td>数学</td>
  24.                 <td>100</td>
  25.                 <td>100</td>
  26.                 <td>200</td>
  27.             </tr>
  28.             <tr>
  29.                 <td>3</td>
  30.                 <td>公共科目</td>
  31.                 <td>英语</td>
  32.                 <td>100</td>
  33.                 <td>100</td>
  34.                 <td>200</td>
  35.             </tr>
  36.             <tr>
  37.                 <td>4</td>
  38.                 <td>理科</td>
  39.                 <td>物理</td>
  40.                 <td>90</td>
  41.                 <td>90</td>
  42.                 <td>180</td>
  43.             </tr>
  44.             <tr>
  45.                 <td>5</td>
  46.                 <td>理科</td>
  47.                 <td>化学</td>
  48.                 <td>90</td>
  49.                 <td>90</td>
  50.                 <td>180</td>
  51.             </tr>
  52.             <tr>
  53.                 <td>6</td>
  54.                 <td>理科</td>
  55.                 <td>生物</td>
  56.                 <td>90</td>
  57.                 <td>90</td>
  58.                 <td>180</td>
  59.             </tr>
  60.             <tr>
  61.                 <td>7</td>
  62.                 <td>文科</td>
  63.                 <td>历史</td>
  64.                 <td>90</td>
  65.                 <td>90</td>
  66.                 <td>180</td>
  67.             </tr>
  68.             <tr>
  69.                 <td>8</td>
  70.                 <td>文科</td>
  71.                 <td>地理</td>
  72.                 <td>90</td>
  73.                 <td>90</td>
  74.                 <td>180</td>
  75.             </tr>
  76.             <tr>
  77.                 <td>9</td>
  78.                 <td>文科</td>
  79.                 <td>政治</td>
  80.                 <td>90</td>
  81.                 <td>90</td>
  82.                 <td>180</td>
  83.             </tr>
  84.             <tr>
  85.                 <td>10</td>
  86.                 <td>体育</td>
  87.                 <td>篮球</td>
  88.                 <td>30</td>
  89.                 <td>30</td>
  90.                 <td>60</td>
  91.             </tr>
  92.             <tr>
  93.                 <td>11</td>
  94.                 <td>体育</td>
  95.                 <td>足球</td>
  96.                 <td>30</td>
  97.                 <td>30</td>
  98.                 <td>60</td>
  99.             </tr>
  100.             <tr>
  101.                 <td>12</td>
  102.                 <td>体育</td>
  103.                 <td>排球</td>
  104.                 <td>30</td>
  105.                 <td>30</td>
  106.                 <td>60</td>
  107.             </tr>
  108.             <tr>
  109.                 <td>13</td>
  110.                 <td>音乐</td>
  111.                 <td>钢琴</td>
  112.                 <td>30</td>
  113.                 <td>30</td>
  114.                 <td>60</td>
  115.             </tr>
  116.             <tr>
  117.                 <td>14</td>
  118.                 <td>音乐</td>
  119.                 <td>手提琴</td>
  120.                 <td>30</td>
  121.                 <td>30</td>
  122.                 <td>60</td>
  123.             </tr>
  124.             <tr>
  125.                 <td>15</td>
  126.                 <td>音乐</td>
  127.                 <td>葫芦丝</td>
  128.                 <td>30</td>
  129.                 <td>30</td>
  130.                 <td>60</td>
  131.             </tr>
  132.             <tr>
  133.                 <td>16</td>
  134.                 <td>美术</td>
  135.                 <td>绘画</td>
  136.                 <td>30</td>
  137.                 <td>30</td>
  138.                 <td>60</td>
  139.             </tr>
  140.             <tr>
  141.                 <td>17</td>
  142.                 <td>美术</td>
  143.                 <td>素描</td>
  144.                 <td>30</td>
  145.                 <td>30</td>
  146.                 <td>60</td>
  147.             </tr>
  148.             <tr>
  149.                 <td>18</td>
  150.                 <td>美术</td>
  151.                 <td>建筑艺术</td>
  152.                 <td>30</td>
  153.                 <td>30</td>
  154.                 <td>60</td>
  155.             </tr>
  156.             <tr>
  157.                 <td>19</td>
  158.                 <td>特长</td>
  159.                 <td>书法</td>
  160.                 <td>30</td>
  161.                 <td>30</td>
  162.                 <td>60</td>
  163.             </tr>
  164.             <tr>
  165.                 <td>20</td>
  166.                 <td>计算机</td>
  167.                 <td>php编程</td>
  168.                 <td>30</td>
  169.                 <td>30</td>
  170.                 <td>60</td>
  171.             </tr>
  172.         </tbody>
  173.         <tfoot>
  174.             <tr>
  175.                 <td>课时总计</td>
  176.                 <td></td>
  177.                 <td></td>
  178.                 <td></td>
  179.                 <td></td>
  180.                 <td></td>
  181.             </tr>
  182.         </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代码如下：

  1. <table border="1" cellpadding="0" cellspacing="0" text-align="center" width="600">
  2.         <caption><b>实验中学高一<四>班2022-2023学年课程表</b></caption>
  3.         <thead>
  4.             <th>ID</th>
  5.             <th>分类</th>
  6.             <th>科目</th>
  7.             <th>上学期课时</th>
  8.             <th>下学期课时</th>
  9.             <th>总课时</th>
  10.         </thead>
  11.         <tbody>
  12.             <tr>
  13.                 <td>1</td>
  14.                 <td rowspan="3">公共科目</td>
  15.                 <td>语文</td>
  16.                 <td>100</td>
  17.                 <td>100</td>
  18.                 <td>200</td>
  19.             </tr>
  20.             <tr>
  21.                 <td>2</td>
  22.                 <!-- <td>公共科目</td> -->
  23.                 <td>数学</td>
  24.                 <td>100</td>
  25.                 <td>100</td>
  26.                 <td>200</td>
  27.             </tr>
  28.             <tr>
  29.                 <td>3</td>
  30.                 <!-- <td>公共科目</td> -->
  31.                 <td>英语</td>
  32.                 <td>100</td>
  33.                 <td>100</td>
  34.                 <td>200</td>
  35.             </tr>
  36.             <tr>
  37.                 <td>4</td>
  38.                 <td rowspan="3">理科</td>
  39.                 <td>物理</td>
  40.                 <td>90</td>
  41.                 <td>90</td>
  42.                 <td>180</td>
  43.             </tr>
  44.             <tr>
  45.                 <td>5</td>
  46.                 <!-- <td>理科</td> -->
  47.                 <td>化学</td>
  48.                 <td>90</td>
  49.                 <td>90</td>
  50.                 <td>180</td>
  51.             </tr>
  52.             <tr>
  53.                 <td>6</td>
  54.                 <!-- <td>理科</td> -->
  55.                 <td>生物</td>
  56.                 <td>90</td>
  57.                 <td>90</td>
  58.                 <td>180</td>
  59.             </tr>
  60.             <tr>
  61.                 <td>7</td>
  62.                 <td rowspan="3">文科</td>
  63.                 <td>历史</td>
  64.                 <td>90</td>
  65.                 <td>90</td>
  66.                 <td>180</td>
  67.             </tr>
  68.             <tr>
  69.                 <td>8</td>
  70.                 <!-- <td>文科</td> -->
  71.                 <td>地理</td>
  72.                 <td>90</td>
  73.                 <td>90</td>
  74.                 <td>180</td>
  75.             </tr>
  76.             <tr>
  77.                 <td>9</td>
  78.                 <!-- <td>文科</td> -->
  79.                 <td>政治</td>
  80.                 <td>90</td>
  81.                 <td>90</td>
  82.                 <td>180</td>
  83.             </tr>
  84.             <tr>
  85.                 <td>10</td>
  86.                 <td rowspan="3">体育</td>
  87.                 <td>篮球</td>
  88.                 <td>30</td>
  89.                 <td>30</td>
  90.                 <td>60</td>
  91.             </tr>
  92.             <tr>
  93.                 <td>11</td>
  94.                 <!-- <td>体育</td> -->
  95.                 <td>足球</td>
  96.                 <td>30</td>
  97.                 <td>30</td>
  98.                 <td>60</td>
  99.             </tr>
  100.             <tr>
  101.                 <td>12</td>
  102.                 <!-- <td>体育</td> -->
  103.                 <td>排球</td>
  104.                 <td>30</td>
  105.                 <td>30</td>
  106.                 <td>60</td>
  107.             </tr>
  108.             <tr>
  109.                 <td>13</td>
  110.                 <td rowspan="3">音乐</td>
  111.                 <td>钢琴</td>
  112.                 <td>30</td>
  113.                 <td>30</td>
  114.                 <td>60</td>
  115.             </tr>
  116.             <tr>
  117.                 <td>14</td>
  118.                 <!-- <td>音乐</td> -->
  119.                 <td>手提琴</td>
  120.                 <td>30</td>
  121.                 <td>30</td>
  122.                 <td>60</td>
  123.             </tr>
  124.             <tr>
  125.                 <td>15</td>
  126.                 <!-- <td>音乐</td> -->
  127.                 <td>葫芦丝</td>
  128.                 <td>30</td>
  129.                 <td>30</td>
  130.                 <td>60</td>
  131.             </tr>
  132.             <tr>
  133.                 <td>16</td>
  134.                 <td rowspan="3">美术</td>
  135.                 <td>绘画</td>
  136.                 <td>30</td>
  137.                 <td>30</td>
  138.                 <td>60</td>
  139.             </tr>
  140.             <tr>
  141.                 <td>17</td>
  142.                 <!-- <td>美术</td> -->
  143.                 <td>素描</td>
  144.                 <td>30</td>
  145.                 <td>30</td>
  146.                 <td>60</td>
  147.             </tr>
  148.             <tr>
  149.                 <td>18</td>
  150.                 <!-- <td>美术</td> -->
  151.                 <td>建筑艺术</td>
  152.                 <td>30</td>
  153.                 <td>30</td>
  154.                 <td>60</td>
  155.             </tr>
  156.             <tr>
  157.                 <td>19</td>
  158.                 <td>特长</td>
  159.                 <td>书法</td>
  160.                 <td>30</td>
  161.                 <td>30</td>
  162.                 <td>60</td>
  163.             </tr>
  164.             <tr>
  165.                 <td>20</td>
  166.                 <td>计算机</td>
  167.                 <td>php编程</td>
  168.                 <td>30</td>
  169.                 <td>30</td>
  170.                 <td>60</td>
  171.             </tr>
  172.         </tbody>
  173.         <tfoot>
  174.             <tr>
  175.                 <td colspan="3">课时总计</td>
  176.                 <td>1170</td>
  177.                 <td>1170</td>
  178.                 <td>2340</td>
  179.             </tr>
  180.         </tfoot>
  181.     </table>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：总结的很好，要是加上一个运行示例图就完美了，还有下次要在https://www.php.cn/member/courses/work.html中提交作业
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！