HTML+CSS 轻松入门之HTML+CSS综合实例（一）

实例一：学习计划表

代码如下所示

<!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" 然后把后面的俩个单元格给去掉

colspan 合并横向单元格，与合并竖向单元格差不多

Weiter lernen

neue Datei

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

einreichen Code zurücksetzen

Automatische Operation

HTML+CSS 轻松入门之HTML+CSS综合实例（一）

GrundschuleTutorial zur Imitation einer Imperial CMS-Unternehmenswebsite

GrundschuleNeulinge ohne WordPress-Grundkenntnisse erstellen persönliche Blogs und Unternehmenswebsites

GrundschuleUltimatives CMS-zertifiziertes Anleitungsvideo zum Erstellen von Websites

GrundschuleFront-End-Projekt-Shangyou [umfassende Praxis der HTML/CSS/JS-Technologie]

DazwischenliegendVue3.0 von 0 zum Aufbau einer universellen Backend-Managementsystem-Projektpraxis

GrundschuleNullbasierter Front-End-Kurs [Vue fortgeschrittenes Lernen und praktische Anwendung]

GrundschuleWEB-Frontend-Tutorial [HTML5+CSS3+JS]

GrundschuleKurze Einführung in Apipost

DazwischenliegendVue3 + TypeScript praktische Tutorial-Projektpraxis auf Unternehmensebene

GrundschuleLassen Sie uns kurz über die Gründung eines Unternehmens in PHP sprechen

DazwischenliegendVUE E-Commerce-Projekt (Front-End- und Back-End-Doppelprojekt, tatsächlicher Kampf)

GrundschulePraktische Anwendung von Apipost [API, Schnittstelle, automatisiertes Testen, Mock]