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

2022年6月29日

テーブルタグの入力を高速でできるようにしたいと思い、アイデアを整理してまとめてみました。
Visual Studio CodeなどのコードエディタであればEmmetが使えますが、Emmet非対応のテキストエディタやブラウザ上でのことを考えると、やはりスニペットになります。

スニペットに関する考え方は過去に記事にしているのでそちらをご覧ください。

Webrandum

コードスニペットの管理方法や命名規則について

https://webrandum.net/code-snippet

今回の記事では、スニペットアプリはDashを使うことを想定しています。

Webrandum

スニペットとしてもドキュメント検索としても使える「Dash 6」でコードや定型文を管理する

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で検索するときに、ルールに従って絞り込むと効率よく展開ができます。