# テーブルタグ一式をすばやく・ラクに入力するためのスニペットサンプル

URL: https://webrandum.net/html-table-snippets/
公開日: 2022-06-29
更新日: 2022-06-29
カテゴリー: 作業効率化
タグ: HTML, スニペット
出典: Webrandum（著者: サイトウ マサカズ）

テーブルタグの入力を高速でできるようにしたいと思い、アイデアを整理してまとめてみました。

Visual Studio CodeなどのコードエディタであればEmmetが使えますが、Emmet非対応のテキストエディタやブラウザ上でのことを考えると、やはりスニペットになります。

スニペットに関する考え方は[過去に記事](https://webrandum.net/code-snippet/)にしているのでそちらをご覧ください。

[![](https://www.google.com/s2/favicons?domain=webrandum.net)Webrandum![](//webrandum.net/mskz/wp-content/uploads/2022/04/eyecatch-23.jpg)コードスニペットの管理方法や命名規則についてhttps://webrandum.net/code-snippetこのブログでは過去にスニペットに関して何度か取り上げてきました。今回はスニペットの中でも、コーディング時に使用する「コードスニペット」にフォーカスして、自分なりのルールや使い方を改めて整理します。スニペットの種類テキストスニペット「メールのテンプレート」「課題展開時に使う文章」など、ある程度決まったフォーマットをスニペットとして保存しておきつつ、必要に応じて呼び出して使います。 毎回考えたり、入力する時間が削減できる 手入力によるタイプミス・抜け漏れが減る 決まったフォーマットで来た方が受け取る...](https://webrandum.net/code-snippet)

今回の記事では、スニペットアプリは[Dash](https://webrandum.net/dash6/)を使うことを想定しています。

[![](https://www.google.com/s2/favicons?domain=webrandum.net)Webrandum![](//webrandum.net/mskz/wp-content/uploads/2021/04/eyecatch-3.jpg)スニペットとしてもドキュメント検索としても使える「Dash 6」でコードや定型文を...https://webrandum.net/dash6スニペットとしてもドキュメント検索としても使えるMacユーザーにオススメのアプリ、「Dash」ですが、過去に記事にしたことがあります。ただ、時間も経ってメジャーアップデートもあったので、今回改めてまとめ直します。スニペットアプリは必須「スニペット（snippet）」は断片という意味があり、何度も再利用して繰り返し使うコードや定型文のことです。スニペット(英語: snippet)とは、「断片」という意味で、再利用可能なソースコード、マシンコード、またはテキストの小さな領域を表すプログラミング用語である。スニペット - Wik...](https://webrandum.net/dash6)

## 前提の考え方

ルールを決めて、全てのパターンを片っ端からスニペットに登録していくのは面倒ですし、1度も使わないスニペットが量産されてしまいます。

そこで、ルールはかなりしっかり決めますが、すべて登録はせずに使うタイミングになって「あ、まだこれ登録してないんだ」となったら登録します。

これを繰り返していくことで徐々によく使うテーブルタグの入力がラクになっていきます。

## テーブルタグのルール

まず最初にテーブルタグであると分かるために`t`（tableの頭文字）を接頭辞として入力するようにします。

そのあと、列数 → 行数の順に数字を`x（エックス）`区切りで入力します。これは乗算記号に見えるのと、キーボードの位置的にも押しやすいからです。

そして最後に接尾辞（自分の場合はセミコロン2つ`;;`）を入力します。

例として「t3x2;;」とすると下記のテーブルタグが入力されます。

```
<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>
```

ExcelやGoogle Spreadsheetが、列（横の数）を選んでから行（縦の数）を選ぶので、同じように「列数×行数」に揃えました。

### thに対応させる

このままだと`<td>`タグだけになってしまうので、`<th>`にも対応させたくなってきます。

数字を`<th>`の数と`<td>`の数でハイフン区切りにします。

例として「t1-2×2;;」の場合は列の方が最初の1つが`<th>`で2つ`<td>`となります。

```
<table>
  <tr>
    <th></th>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <th></th>
    <td></td>
    <td></td>
  </tr>
</table>
```

全部`<th>`にしたい場合は「3-0」のようにします。

### theadとtbodyとtfootに対応させる

今度はtheadとtbodyにも対応させたくなりました。

括弧内にそれぞれ頭文字の「`h`（thead）」「`b`（tbody）」「`f`（tfoot）」を入力して区別できるようにします。

例として「t(h3-0x1)(b1-2×2)(f3x1)」とした場合は下記のようになります。

```
<table>
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th></th>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th></th>
      <td></td>
      <td></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tfoot>
</table>
```

少し複雑になってきましたが、文字列を見てどんなテーブルが展開されるかはある程度分かります。

最初にも説明した通り、あらゆるパターンを作るというよりも、ルールだけきちんと整理しておいて、あとはそれに従ってよく使うものを登録して使います。

また、このレベルのテーブルであれば、入力して展開するよりもDashで検索して展開する方がラクです。

Dashで検索するときに、ルールに従って絞り込むと効率よく展開ができます。