html程序实现

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表格</title>
    <style>
      table {
        border: 1px solid blue;
      }
      td {
        border: 1px solid blue;
        text-align: center;
      }
      th {
        border: 1px solid yellow;
        text-align: center;
      }
      .order.cap {
        color: red;
        font-size: larger;
        font-weight: bold;
        background-color: lightblue;
      }
      .order.head {
        background-color: yellowgreen;
      }
      .total {
        background-color: aquamarine;
      }
    </style>
  </head>
  <body>
    <table>
      <caption class="order cap">
        2023.3.12 订单
      </caption>
      <thead class="order head">
        <th>ID</th>
        <th>PO</th>
        <th>ITEM</th>
        <th>DESCRIPTION</th>
        <th>QTY</th>
        <th>PRICE</th>
        <th>TOTAL PRICE</th>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td rowspan="2">PO#001</td>
          <td>PN001</td>
          <td>apple</td>
          <td>10</td>
          <td>1</td>
          <td>10</td>
        </tr>
        <tr>
          <td>2</td>
          <td>PN002</td>
          <td>banana</td>
          <td>100</td>
          <td>1</td>
          <td>100</td>
        </tr>
        <tr>
          <td colspan="4" class="total">Total:</td>
          <td class="total">110</td>
          <td></td>
          <td colspan="2" class="total">110</td>
        </tr>
        <tr>
          <td>3</td>
          <td rowspan="2">PO#002</td>
          <td>PN003</td>
          <td>TV SET</td>
          <td>2</td>
          <td>1000</td>
          <td>2000</td>
        </tr>
        <tr>
          <td>4</td
          <td>PN004</td>a
          <td>Frige</td>
          <td>5</td>
          <td>2000</td>
          <td>10000</td>
        </tr>
        <tr>
          <td colspan="4" class="total">Total:</td>
          <td class="total">7</td>
          <td></td>
          <td colspan="2" class="total">12000</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

效果图

订单效果图

注意点

自定义class style的实现最前面要添加’.’
style 里定义border需要设置类型，譬如’solid’，才可以显现出来
td 的border和table 的border 是两个部分，在style里需要分别设置:border: 1px solid blue; ，在table标签里只需要设置宽度就可以:border="1"

批改老师：

PHPz

批改状态：合格

老师批语：完成的很好，继续加油

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

开学第一课

2023-03-10 16:14:27

首页

最新更新

视频教程

学习路径

资源下载

技术文章

社区

微信公众号

html程序实现

效果图

注意点