読者です 読者をやめる 読者になる 読者になる

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

久しく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」というツール

divtable.com

「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タグを作らないといけない人に、ぜひオススメです!