博客列表 >精典表格写法

精典表格写法

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

    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. }
  24. table caption {
  25. font-size: 1.5rem;
  26. margin-bottom: 15px;
  27. color: darkgreen;
  28. }
  29. table th {
  30. font-weight: lighter;
  31. color: white;
  32. background-color: rgb(23, 175, 109);
  33. }
  34. /* 鼠标悬停 */
  35. tr:hover {
  36. background-color: salmon;
  37. }
  38. /* 隔行变色 */
  39. table tbody tr:nth-of-type(even) {
  40. background-color: aqua;
  41. }
  42. table tfoot td {
  43. border-bottom: none;
  44. }
  45. </style>
  46. </head>
  47. <body>
  48. <table>
  49. <!-- 标题 -->
  50. <caption>
  51. 购物车
  52. </caption>
  53. <!-- 表头 -->
  54. <thead>
  55. <tr>
  56. <th>ID</th>
  57. <th>品名</th>
  58. <th>单价/元</th>
  59. <th>单位</th>
  60. <th>数量</th>
  61. <th>金额/元</th>
  62. </tr>
  63. </thead>
  64. <!-- 主体 -->
  65. <tbody>
  66. <tr>
  67. <td>1000</td>
  68. <td>电脑</td>
  69. <td>2000.00</td>
  70. <td></td>
  71. <td>2</td>
  72. <td>4000</td>
  73. </tr>
  74. <tr>
  75. <td>1001</td>
  76. <td>水杯</td>
  77. <td>1000</td>
  78. <td></td>
  79. <td>3</td>
  80. <td>3000</td>
  81. </tr>
  82. <tr>
  83. <td>1001</td>
  84. <td>水杯</td>
  85. <td>5000</td>
  86. <td></td>
  87. <td>3</td>
  88. <td>15000</td>
  89. </tr>
  90. <tr>
  91. <td>1001</td>
  92. <td>水杯</td>
  93. <td>3000</td>
  94. <td></td>
  95. <td>3</td>
  96. <td>9000</td>
  97. </tr>
  98. </tbody>
  99. <!-- 表尾 -->
  100. <tfoot>
  101. <td colspan="2">总计:</td>
  102. <td>11000</td>
  103. <td>总数:</td>
  104. <td>11</td>
  105. <td>总计:5200</td>
  106. </tfoot>
  107. </table>
  108. </body>
  109. </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>
  69. <!-- 表头 thead-->
  70. <div class="table-thead">
  71. <!-- 行 -->
  72. <div class="table-row">
  73. <div class="table-cell">ID</div>
  74. <div class="table-cell">姓名</div>
  75. <div class="table-cell">职务</div>
  76. </div>
  77. </div>
  78. <div class="table-tbody">
  79. <div class="table-row">
  80. <div class="table-cell">1</div>
  81. <div class="table-cell">小王8</div>
  82. <div class="table-cell">运维</div>
  83. </div>
  84. <div class="table-row">
  85. <div class="table-cell">2</div>
  86. <div class="table-cell">小张</div>
  87. <div class="table-cell">开发</div>
  88. </div>
  89. <div class="table-row">
  90. <div class="table-cell">3</div>
  91. <div class="table-cell">小朱</div>
  92. <div class="table-cell">美工</div>
  93. </div>
  94. </div>
  95. <!-- 底部 -->
  96. <div class="table-tfoot">
  97. <div class="table-row">
  98. <div class="table-cell">a</div>
  99. <div class="table-cell">b</div>
  100. <div class="table-cell">c</div>
  101. </div>
  102. </div>
  103. </div>
  104. </body>
  105. </html>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议