HTML+CSS Comprehensive Example of HTML+CSS for Easy Getting Started (1)

Example 1: Learning Plan

The code is as follows

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

Here we use a merged cell,

rowspan to merge vertical cells, you To merge several cells, you need to delete the following cells td and subtract one, because the cell itself cannot be deleted. For example, if I want to merge 3 cells, write rowspan in the first cell. ="3" Then remove the next two cells

colspan Merging horizontal cells is similar to merging vertical cells

Continuing Learning

new file

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

submit Reset Code

Automatic operation

HTML+CSS Comprehensive Example of HTML+CSS for Easy Getting Started (1)

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]