表格重点总结 - HTML学习 - php中文网博客

首页 > 博客列表 > 表格重点总结

博主信息

博文 47

粉丝 0

访问量 31322

专题推荐

更多>

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

表格重点总结

P粉036614676

原创

1201人浏览过

<!DOCTYPE html>
<html lang="en">
<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">
    <!-- <link rel="stylesheet" href="E:\PHP Web1\HTML\CH-1\1017\1017\static\css\cart.css"> -->
    <title>表格</title>
    <style>
        table{
            width: 2000px;
            height: 800px;
            border-collapse: collapse;/* 表格间距合并*/
            text-align: center;
        }
        table th,
table td {
  border: thin solid #888;
  padding: 5px;
}
table caption {
  font-size: 1.2em;
  margin-bottom: 0.5em;
  letter-spacing: 0.5em;
}
table thead,
table tfoot tr [colspan] {
  background-color: lightcyan;
}
table + button {
  padding: 5px 20px;
  letter-spacing: 5px;
  margin: 10px 10px 10px 320px;
  background-color: violet;
  border: none;
  cursor: pointer;
}
table + button:hover {
  cursor: pointer;
  background-color: orangered;
  color: #fff;
  transition: 0.5s;
}
.green {
  background-color: lightgreen;
}
.wheat {
  background-color: wheat;
}
    </style>
</head>
<body>
    <table border="1">
        <caption>购物车</caption>
        <thead>
            <tr>
                <th>分类</th>
                <th>ID</th>
                <th>名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>金额</th>
            </tr>
        </thead>
        <tbody>
            <tr>
              <td rowspan="3">数码</td>
              <th>5010</th>
              <td>电脑</td>
              <td>9000</td>
              <td>2</td>
              <td>18000</td>
            </tr>
            <tr>
              <th>5012</th>
              <td>手机</td>
              <td>5000</td>
              <td>4</td>
              <td>20000</td>
            </tr>
            <tr>
              <th>5013</th>
              <td>相机</td>
              <td>15000</td>
              <td>2</td>
              <td>30000</td>
            </tr>
            <tr>
              <td rowspan="2">服装</td>
              <th>3030</th>
              <td>男装</td>
              <td>500</td>
              <td>2</td>
              <td>1000</td>
            </tr>
            <tr>
              <th>3031</th>
              <td>女装</td>
              <td>1000</td>
              <td>5</td>
              <td>5000</td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <th colspan="4">总计:</th>
              <th>15</th>
              <th>74000</th>
            </tr>
          </tfoot>
    </table>
    <button>结算</button>
</body>
</html>

批改老师：

PHPz

批改状态：合格

老师批语：

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

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

0条评论

作者最新博文

仿PHP中文网右侧布局

2022-07-18 14:56:59