Contoh HTML+CSS Komprehensif HTML+CSS untuk Mudah Bermula (1)

Contoh 1: Rancangan Pembelajaran

Kodnya adalah seperti berikut

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>php中文网 实例一</title>
  <style type="text/css">
        table{
          width:600px;
          border:1px solid #ccc;
          text-align:center;
          margin:0 auto;
          margin-top:30px;
        }
        th{
          border:1px solid #999;
          background-color:#f60
        }
        td{
          border:1px solid #999;
          background-color:#f66
        }
  </style>
</head>
<body>
      <table>
          <tr>
            <th>星期</th>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
            <th>星期六</th>
            <th>星期日</th>
          </tr>

          <tr>
            <td rowspan="3">上午</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>数学</td>
            <td>生物</td>
            <td>化学</td>
            <td>历史</td>
          </tr>
          <tr>
           
            <td>政治</td>
            <td>美术</td>
            <td>语文</td>
            <td>数学</td>
            <td>化学</td>
            <td>语文</td>
            <td>生物</td>
          </tr>
          <tr>
            <td>历史</td>
            <td>语文</td>
            <td>数学</td>
            <td>语文</td>
            <td>历史</td>
            <td>生物</td>
            <td>语文</td>
          </tr>
          <tr>
            <td rowspan="3">下午</td>
            <td>语文</td>
            <td>数学</td>
            <td>历史</td>
            <td>语文</td>
            <td>化学</td>
            <td>生物</td>
            <td>语文</td>
          </tr>
          <tr>
            <td>历史</td>
            <td>化学</td>
            <td>生物</td>
            <td>政治</td>
            <td>物理</td>
            <td>地理</td>
            <td>体育</td>
          </tr>
          <tr>
            <td>历史</td>
            <td>物理</td>
            <td>化学</td>
            <td>体育</td>
            <td>地理</td>
            <td>物理</td>
            <td>化学</td>
          </tr>

      </table>
</body>
</html>

Di sini kami menggunakan sel yang digabungkan,

jalur baris untuk menggabungkan sel menegak, anda Untuk menggabungkan beberapa sel , anda perlu memadam sel berikut td dan menolak satu, kerana sel itu sendiri tidak boleh dipadamkan. Contohnya, jika saya ingin menggabungkan 3 sel, tuliskan rowspan dalam sel pertama ="3" Kemudian keluarkan dua sel seterusnya

colspan menggabungkan sel mendatar, yang serupa dengan menggabungkan sel menegak

Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网 实例一</title> <style type="text/css"> table{ width:600px; border:1px solid #ccc; text-align:center; margin:0 auto; margin-top:30px; } th{ border:1px solid #999; background-color:#f60 } td{ border:1px solid #999; background-color:#f66 } </style> </head> <body> <table> <tr> <th>星期</th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> <th>星期六</th> <th>星期日</th> </tr> <tr> <td rowspan="3">上午</td> <td>语文</td> <td>数学</td> <td>英语</td> <td>数学</td> <td>生物</td> <td>化学</td> <td>历史</td> </tr> <tr> <td>政治</td> <td>美术</td> <td>语文</td> <td>数学</td> <td>化学</td> <td>语文</td> <td>生物</td> </tr> <tr> <td>历史</td> <td>语文</td> <td>数学</td> <td>语文</td> <td>历史</td> <td>生物</td> <td>语文</td> </tr> <tr> <td rowspan="3">下午</td> <td>语文</td> <td>数学</td> <td>历史</td> <td>语文</td> <td>化学</td> <td>生物</td> <td>语文</td> </tr> <tr> <td>历史</td> <td>化学</td> <td>生物</td> <td>政治</td> <td>物理</td> <td>地理</td> <td>体育</td> </tr> <tr> <td>历史</td> <td>物理</td> <td>化学</td> <td>体育</td> <td>地理</td> <td>物理</td> <td>化学</td> </tr> </table> </body> </html>
  • Cadangan kursus
  • Muat turun perisian kursus