HTML+CSS 簡単に始められるHTML+CSSの総合例(1)

例 1: 学習計画

コードは次のとおりです

<!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>

ここでは、垂直セルを結合するために結合セル

rowspan を使用します。以下のいくつかのセル td を削除する必要があります。セル自体は削除できないため、たとえば、3 つのセルを結合する場合、最初のセルに rowspan="3" と書き込み、次の 2 つのセルを削除します。これは、垂直セルを結合するのと似ています。

学び続ける

新しいファイル

<!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>

提出するリセットコード

自動運転