国产成人综合亚洲亚洲国产第一页,最近中文字幕高清中文字幕第一,久久久精品人妻一区二区三区蜜桃

首頁 > 博客列表 > html 制作課程表行與列的合并

博主信息

博文 9

粉絲 0

評論 0

訪問量 11714

專題推薦

更多>

相關(guān)推薦

熱門教程

更多>

相關(guān)教程

課表截圖

實(shí)驗(yàn)小學(xué)課程表 "課表截圖"

html源代碼

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>實(shí)驗(yàn)小學(xué)課程表</title>
    <link rel="stylesheet" href="style/table.css">
  </head>
  <body>
    <table class="lesson">
      <caption>
        實(shí)驗(yàn)小學(xué)課程表
      </caption>
      <thead>
        <tr>
         <th colspan="2"></th>
         <th>周一</th>
         <th>周二</th>
         <th>周三</th>
         <th>周四</th>
         <th>周五</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td rowspan="4">上午</td>
          <td>1</td>
          <td>英語</td>
          <td>數(shù)學(xué)</td>
          <td>語文</td>
          <td>語文</td>
          <td>數(shù)學(xué)</td>
        </tr>
        <tr>
          <td>2</td>
          <td>英語</td>
          <td>數(shù)學(xué)</td>
          <td>語文</td>
          <td>語文</td>
          <td>數(shù)學(xué)</td>
        </tr>
        <tr>
          <td>3</td>
          <td>英語</td>
          <td>數(shù)學(xué)</td>
          <td>語文</td>
          <td>語文</td>
          <td>數(shù)學(xué)</td>
        </tr>
        <tr>
          <td>4</td>
          <td>英語</td>
          <td>數(shù)學(xué)</td>
          <td>語文</td>
          <td>語文</td>
          <td>數(shù)學(xué)</td>
        </tr>
        <tr class="rest">
          <td colspan="7">午間休息</td>
        </tr>
        <tr>
          <td rowspan="3">下午</td>
          <td>5</td>
          <td>英語</td>
          <td>數(shù)學(xué)</td>
          <td>語文</td>
          <td>語文</td>
          <td>數(shù)學(xué)</td>
        </tr>
        <tr>
          <td>6</td>
          <td>英語</td>
          <td>數(shù)學(xué)</td>
          <td>語文</td>
          <td>語文</td>
          <td>數(shù)學(xué)</td>
        </tr>
        <tr>
          <td>7</td>
          <td>課外活動:</td>
          <td colspan="4">各班自行安排</td>
        </tr>
      </tbody>
  </body>
</html>

樣式表源代碼

/* 商品信息表 */
.product {
  border-collapse: collapse;
  width: 30em;
  margin: auto;
  text-align: center;
}
.product caption {
  font-size: 1.2rem;
  margin-bottom: 0.5em;
}
.product thead tr,
.product tr:hover {
  background-color: lightcyan;
  cursor: pointer;
}
.product td,
.product th {
  border: 1px solid #000;
  padding: 5px;
}
.page {
  text-align: center;
}
.page a {
  text-decoration: none;
  color: #666;
  padding: 2px 5px;
  border: 1px solid #000;
}
.page a.active,
.page a:hover {
  background-color: lightcyan;
}
/* --------------------------------------- */
/* 課程表: 行與列的合并 */
.lesson {
  border-collapse: collapse;
  width: 40em;
  text-align: center;
  margin: auto;
}
.lesson caption {
  font-size: 1.2rem;
  margin: 1em;
}
.lesson thead {
  background-color: lightcyan;
}
.lesson th,
.lesson td {
  border: 1px solid;
  padding: 0.5em;
}
.lesson .rest {
  background-color: #efefef;
}
.lesson td[rowspan="4"],
.lesson td[rowspan="3"] {
  background-color: rgb(186, 245, 213);
}

批改老師：

天蓬老師

批改狀態(tài)：合格

老師批語：

本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報(bào)處理！

全部評論文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議

0條評論

作者最新博文

html基本標(biāo)簽

2020-12-12 15:43:22

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

課表截圖

html源代碼

樣式表源代碼