Makky Blog

これは便利！エクセルやNumbersでできた表を一発でHTMLに変換してくれる「DIV TABLE」

Web / Tech

久しくHTMLのTableタグを書いていませんが、Web制作の仕事をしていると稀にエクセルなどで凄い行数の表をHTML で組まなくてはいけないときがありました。

Tableタグ自体は単純な構造なのでカンタンなので1つ1つを手打ちでつくることもできるんですが、量が多いと途端に時間がかかってしまうので、場合によってはものすごい疲れる作業になっちゃうんですよね。

ちなみにカンタンなTableはこんなかんじ

<table>
  <tbody>
    <tr>
      <th>見出し1</th>
      <th>見出し2</th>
      <th>見出し3</th>
    </tr>
    <tr>
      <td>セル1</td>
      <td>セル2</td>
      <td>セル3</td>
    </tr>
    <tr>
      <td>セル4</td>
      <td>セル5</td>
      <td>セル6</td>
    </tr>
    <tr>
      <td>セル7</td>
      <td>セル8</td>
      <td>セル9</td>
    </tr>
  </tbody>
</table>

見出し1	見出し2	見出し3
セル1	セル2	セル3
セル4	セル5	セル6
セル7	セル8	セル9

この表を手打ちでつくるのでも3分ぐらいはかかりました。これ疲れるー

ちなみに凄い行数っていうのは1つの表が100から200行ぐらいあると思ってもらえると。

例えるなら、200人ぐらい集まるイベント参加者のリスト（名前、職業、年齢、性別など）をエクセルにまとめといたので、これをHTMLにしてくださいね。みたいな。

もうね、10分もしないうちにツラくなりますよ。

DIV TABLE

そういうときに便利なのが「DIV TABLE」というツール

「Div Tableを超簡単につくれる無料のオンラインツール」とでも訳せばいいのかな（だいぶ適当）

「GENERATE」「CONVERT」があって、「GENERATE」は生成したいTableのサイズをマウスで選んでクリックすると、下のエリアに指定したサイズのTableが生成されます。

「CONVERT」はエクセルやNumbersなどでつくった表をコピペすると、その表をそのままHTMLにしてくれるという機能です。すげー便利！

GENERATE機能を試してみる

試しに10×10のセルになるようにTableをつくってみます。

まず10×10になるように範囲を選択します。

選択したら、クリック！

おおおー！指定したサイズで下のエリアに生成されました！

実はTableタグだけじゃなく、このツールはDIVタグでもTableタグと同じ見た目になるように生成できます！使い所が分からないけど気がきいてるー！

生成したタグはHTML上でもビジュアル上でもテキストの入力が可能で、見た目を確認しながらテキストを入れていくこともできます。

CONVERT機能を試してみる

CONVERT機能を試すためにNumbersで簡単な表をつくります。

この表の必要な範囲を一旦コピー。

そして、左側のエリアにペーストすると、瞬時に右側にHTMLタグを生成してくれました！お、これはマジですごいぞ！

意地悪なので、さっきのNumbersの表のセルを接合してみて、正しく生成されるか試してみました！

右側のセル2つを結合してコピー。

さっきと同じようにペーストすると、見事に正しくHTMLを生成してくれました。

これすげー！なかなか結合した表をHTMLにしてくれるツールはなかったので、これは安心してコピペした表を使うことができますね！

ちなみにGoogleスプレッドシートでも試してみましたが、同じように生成されていました！これはいいね！

さいごに

このためだけに初めてNumbersを使ってみましたが、表計算ソフトでつくったものをそのままコピペでHTMLに出来るのはすごい便利ですね。

結合セルまで対応してるのは正直感動しましたよ。いや、マジで。

うんざりするほどのTableタグを作らないといけない人に、ぜひオススメです！