Community Learn Tools Library Leisure
search
English
Home > List of blog posts > HTML用emmet快速编写一个简单表格
Blogger Information
Blog 17
fans 1
comment 0
visits 8740
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
HTML用emmet快速编写一个简单表格
P粉933302309
Original
573 people have browsed it

用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>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post