如何使用 Emmet 快速產生 <table> ?

<table> 是 HTML 用來描述 Data 最常用的 Tag，由於還要伴隨 <thead> 、 <tbody> 、 <tr> 、 <th> 、 <td> 等 Tag，若由手工建立非常沒有效率，是否能使用 Emmet 快速產生呢 ?

Version

VS Code 1.33.1

Bootstrap 4.3.1

Table

<table class="table table-striped table-hover" border="1">
  <thead>
    <tr>
      <th>desc</th>
      <th>desc</th>
      <th>desc</th>
      <th>desc</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
    </tr>
    <tr>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
    </tr>
    <tr>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
    </tr>
  </tbody>
</table>

<table> 使用了 Bootstrap 的 table 、 table-striped 與 table-hover 三個 class，且設定 border 為 1 。

另外產生一行 header，3 x 4 data。

一段式寫法

table.table.table-striped.table-hover[border="1"]>thead>tr>th{desc}*4^^tbody>tr*3>td{data}*4

產生 table

table.table.table-striped.table-hover[border="1"]

<table> 需包含 table 、 table-striped 與 table-hover 3 個 class，故使用 table.table.table-striped.table-hover 連起來，由於還有 attribute border="1" ，所以再加上 [border="1"] 描述。

• . ：如同 CSS 的 class selector，描述 element 有 CSS class

• [] ：如同 CSS 的 attribute selector，描述 element 有 attribute

產生 thead

>thead>tr>th{desc}*4

<thead> 與 <tr> 只有 1 個，但都是一層一層往下，所以使用 >thead>tr 。

th 則有 4 個，顯示都是 desc ，所以為 th{desc}*4 。

• > ：如同 CSS 的 child combinator，描述 element 有 child element

• {} ：用於 binding，描述 element 的 data

產生 tbody

^^tbody>tr*3>td{data}*4

<tbody> 與 <thead> 同層，但之前已經進入 <th> ，所以要往上退兩層，使用 ^^ 。

要產生 3 x 4 data，所以為 tr*3>td{data}*4 。

• ^ ：CSS 目前還沒有 parent combinator，但 ^ 很容易聯想成 parent combinator

三段式寫法

table.table.table-striped.table-hover[border="1"]>thead+tbody
tr>th{desc}*4
tr*3>td{data}*4

若覺得一段式寫法太難，也可以使用三段式寫法。

產生 table

table.table.table-striped.table-hover[border="1"]>thead+tbody

<table> 需包含 table 、 table-striped 與 table-hover 3 個 class，故使用 table.table.table-striped.table-hover 連起來，由於還有 attribute border="1" ，所以再加上 [border="1"] 描述。

接下來順便描述 <thead> 與 <tbody> ，由於 <thead> 與 <tbody> 在同一層，因此使用 thead+tbody 。

.
[]
+

產生 thead

tr>th{desc}*4

<thead> 已經產生，接下來只要產生 <tr> 與 <th> 即可。

<tr> 只有 1 個，而 <thead> 有 4 個，且 <th> 在 <tr> 之下，所以使用 tr>th{desc}*4 。

>
{}

產生 tbody

tr*3>td{data}*4

<tbody> 已經產生，接下來只要產生 <tr> 與 <td> 即可。

<tr> 有 3 個，而 <td> 有 4 個，且 <td> 在 <tr> 之下，所以使用 tr*3>td{data}*4 。

Conclusion

• Emmet 乍看很玄，但其實 syntax 很有邏輯，又與 CSS 相似，只要心中已經有 HTML 的模樣，就能使用 Emment 描述
• ^ 雖然不是 CSS 任何 combinator，但語意很容易聯想ˊ
• ^^ 回退兩層算最 tricky 部分，這關能過，就很容易產生出所要的 <table>
• 若覺得一段式寫法有難度，兩段式寫法比較容易寫出來，也不必使用 ^^ 回到上兩層，開發效率也不差

Reference

Emmet , Cheat sheet