博客列表 >HTML用emmet快速编写一个简单表格

HTML用emmet快速编写一个简单表格

P粉933302309
P粉933302309原创
2022年07月04日 13:57:03565浏览

用emmet快速编写一个简单表格

实例代码直接给上,直接下面复制,然后按tab补全即可

<table>caption{表格标题}+(thead>tr>th{表格第一行内容}8)+(tbody>tr5>td{表格内容})

演示

表格

以下代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. </head>
  9. <body>
  10. <style>
  11. table{
  12. border-collapse: collapse;
  13. }
  14. caption{
  15. font-size: 50px;
  16. font-weight: 700;
  17. }
  18. /* 表头颜色 */
  19. thead{
  20. background-color: lightcyan;
  21. }
  22. td{
  23. background-color: bisque;
  24. }
  25. table th,tr td{
  26. /* 表格行间距 */
  27. border: 1px solid;
  28. /* 表格大小 */
  29. padding: 15px;
  30. text-align: center;
  31. }
  32. /* 表格居中和高宽 */
  33. .mytable{
  34. width: 900px;
  35. height: 50px;
  36. margin: 0 auto;
  37. }
  38. /* 单元格高宽 */
  39. .myth{
  40. width: 50px;
  41. height: 30px;
  42. }
  43. </style>
  44. <!-- table>caption{内容}+(thead>tr>th{表格第一行内容}*8)+(tbody>tr*>td{表格内容}*5) -->
  45. <body>
  46. <table class="mytable">
  47. <caption>HTML表格案例</caption>
  48. <thead>
  49. <tr>
  50. <th>序号</th>
  51. <th>日期</th>
  52. <th>收据编号</th>
  53. <th>金额</th>
  54. <th>客户名称</th>
  55. <th>领用签字人</th>
  56. <th>归还日期</th>
  57. <th>备注</th>
  58. </tr>
  59. </thead>
  60. <tbody>
  61. <tr>
  62. <td>1</td>
  63. <td>2022.7.1</td>
  64. <td>455678451</td>
  65. <td>4</td>
  66. <td>php中文网</td>
  67. <td>张飞</td>
  68. <td>2022.7.2</td>
  69. <td>HTML表格案例</td>
  70. </tr>
  71. <tr>
  72. <td>2</td>
  73. <td>2022.7.1</td>
  74. <td>455678451</td>
  75. <td>4</td>
  76. <td>php中文网</td>
  77. <td>张飞</td>
  78. <td>2022.7.2</td>
  79. <td>HTML表格案例</td>
  80. </tr>
  81. <tr>
  82. <td>3</td>
  83. <td>2022.7.1</td>
  84. <td>455678451</td>
  85. <td>4</td>
  86. <td>php中文网</td>
  87. <td>张飞</td>
  88. <td>2022.7.2</td>
  89. <td>HTML表格案例</td>
  90. </tr>
  91. <tr>
  92. <td>4</td>
  93. <td>2022.7.1</td>
  94. <td>455678451</td>
  95. <td>4</td>
  96. <td>php中文网</td>
  97. <td>张飞</td>
  98. <td>2022.7.2</td>
  99. <td>HTML表格案例</td>
  100. </tr>
  101. <tr>
  102. <td>5</td>
  103. <td>2022.7.1</td>
  104. <td>455678451</td>
  105. <td>4</td>
  106. <td>php中文网</td>
  107. <td>张飞</td>
  108. <td>2022.7.2</td>
  109. <td>HTML表格案例</td>
  110. </tr>
  111. </tbody>
  112. </table>
  113. </body>
  114. </html>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议