search

博客列表 >精典表格写法

精典表格写法

霏梦
霏梦原创
2020年06月16日 23:01:49722浏览
  • 作者：霏梦

    table写法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>购物车</title>
  7.     <style>
  8.       html {
  9.         font-size: 14px;
  10.       }
  11.       table {
  12.         border-collapse: collapse;
  13.         width: 70%;
  14.         margin: auto;
  15.         color: coral;
  16.         font-weight: lighter;
  17.         text-align: center;
  18.       }
  19.       th,
  20.       td {
  21.         border-bottom: 1px solid blue;
  22.         padding: 10px;
  23.       }
  25.       table caption {
  26.         font-size: 1.5rem;
  27.         margin-bottom: 15px;
  28.         color: darkgreen;
  29.       }
  31.       table th {
  32.         font-weight: lighter;
  33.         color: white;
  34.         background-color: rgb(23, 175, 109);
  35.       }
  37.       /* 鼠标悬停 */
  38.       tr:hover {
  39.         background-color: salmon;
  40.       }
  41.       /* 隔行变色 */
  42.       table tbody tr:nth-of-type(even) {
  43.         background-color: aqua;
  44.       }
  45.       table tfoot td {
  46.         border-bottom: none;
  47.       }
  48.     </style>
  49.   </head>
  50.   <body>
  51.     <table>
  52.       <!-- 标题 -->
  53.       <caption>
  54.         购物车
  55.       </caption>
  56.       <!-- 表头 -->
  57.       <thead>
  58.         <tr>
  59.           <th>ID</th>
  60.           <th>品名</th>
  61.           <th>单价/元</th>
  62.           <th>单位</th>
  63.           <th>数量</th>
  64.           <th>金额/元</th>
  65.         </tr>
  66.       </thead>
  67.       <!-- 主体 -->
  68.       <tbody>
  69.         <tr>
  70.           <td>1000</td>
  71.           <td>电脑</td>
  72.           <td>2000.00</td>
  73.           <td>台</td>
  74.           <td>2</td>
  75.           <td>4000</td>
  76.         </tr>
  77.         <tr>
  78.           <td>1001</td>
  79.           <td>水杯</td>
  80.           <td>1000</td>
  81.           <td>个</td>
  82.           <td>3</td>
  83.           <td>3000</td>
  84.         </tr>
  85.         <tr>
  86.           <td>1001</td>
  87.           <td>水杯</td>
  88.           <td>5000</td>
  89.           <td>个</td>
  90.           <td>3</td>
  91.           <td>15000</td>
  92.         </tr>
  93.         <tr>
  94.           <td>1001</td>
  95.           <td>水杯</td>
  96.           <td>3000</td>
  97.           <td>个</td>
  98.           <td>3</td>
  99.           <td>9000</td>
  100.         </tr>
  101.       </tbody>
  102.       <!-- 表尾 -->
  103.       <tfoot>
  104.         <td colspan="2">总计：</td>
  105.         <td>11000</td>
  106.         <td>总数：</td>
  107.         <td>11</td>
  108.         <td>总计：5200</td>
  109.       </tfoot>
  110.     </table>
  111.   </body>
  112. </html>

div写法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>换个姿势玩表格</title>
  7.     <style>
  8.       /* 表格 */
  9.       .table {
  10.         display: table;
  11.         border: 1px solid rgb(5, 5, 5);
  12.         width: 300px;
  13.         text-align: center;
  14.         margin: auto;
  15.       }
  16.       /* 标题 */
  17.       .table-caption {
  18.         display: table-caption;
  19.         margin-bottom: 10px;
  20.         font-size: 1.5rem;
  21.       }
  22.       /*  表头 */
  23.       .table-thead {
  24.         display: table-header-group;
  25.         background-color: grey;
  26.       }
  27.       /* 行 */
  28.       .table-row {
  29.         display: table-row;
  30.       }
  31.       /* 列 */
  32.       .table-cell {
  33.         display: table-cell;
  34.         border: 1px solid black;
  35.         padding: 5px;
  36.       }
  37.       /* 主体 */
  38.       .table-tbody {
  39.         display: table-row-group;
  40.       }
  41.       .table-tfoot {
  42.         display: table-footer-group;
  43.       }
  44.       /* 列分组 */
  45.       .table-colgroup {
  46.         display: table-column-group;
  47.       }
  48.       .table-colgroup .table-col:first-of-type {
  49.         display: table-column;
  50.         background-color: lightgreen;
  51.       }
  52.       .table-colgroup .table-col {
  53.         display: table-column;
  54.         background-color: lightpink;
  55.       }
  56.     </style>
  57.   </head>
  58.   <body>
  59.     <!-- 表格 -->
  60.     <div class="table">
  61.       <!-- 标题 -->
  62.       <div class="table-caption">员工信息表</div>
  63.       <!-- 列分组 -->
  64.       <div class="table-colgroup">
  65.         <div class="table-col"></div>
  66.         <div class="table-col"></div>
  67.         <div class="table-col"></div>
  68.       </div>
  70.       <!-- 表头 thead-->
  71.       <div class="table-thead">
  72.         <!-- 行 -->
  73.         <div class="table-row">
  74.           <div class="table-cell">ID</div>
  75.           <div class="table-cell">姓名</div>
  76.           <div class="table-cell">职务</div>
  77.         </div>
  78.       </div>
  79.       <div class="table-tbody">
  80.         <div class="table-row">
  81.           <div class="table-cell">1</div>
  82.           <div class="table-cell">小王8</div>
  83.           <div class="table-cell">运维</div>
  84.         </div>
  85.         <div class="table-row">
  86.           <div class="table-cell">2</div>
  87.           <div class="table-cell">小张</div>
  88.           <div class="table-cell">开发</div>
  89.         </div>
  90.         <div class="table-row">
  91.           <div class="table-cell">3</div>
  92.           <div class="table-cell">小朱</div>
  93.           <div class="table-cell">美工</div>
  94.         </div>
  95.       </div>
  96.       <!-- 底部 -->
  97.       <div class="table-tfoot">
  98.         <div class="table-row">
  99.           <div class="table-cell">a</div>
  100.           <div class="table-cell">b</div>
  101.           <div class="table-cell">c</div>
  102.         </div>
  103.       </div>
  104.     </div>
  105.   </body>
  106. </html>
上一条：前端选择器之常规选择器、伪类选择器与伪元素下一条：webpack系列(4)--处理html
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多