WebDesigner's Memorandumウェブデザイナーの備忘録

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

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

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

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

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

前提の考え方

ルールを決めて、全てのパターンを片っ端からスニペットに登録していくのは面倒ですし、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で検索するときに、ルールに従って絞り込むと効率よく展開ができます。

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね