HTML+CSS 轻松入门之H...LOGIN

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    合并横向单元格,与合并竖向单元格差不多

下一节
<!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>
提交重置代码
章节课件