凸 ブロックのつみかさね

デザイン、技術メモ、レビュー中心の雑記ブログ

htmlテーブルを簡単に作成できるTable Tag Generator

htmlにおけるtableタグ周りの記述って面倒&ややこしいですよね。rowspanとcolspanが混在すると手におえませんw。「Table Tag Generator」はテーブルの作成が簡単なので、ご紹介したいと思います。

よくある問題

昔は、DreamWeaverをよく使っていました。DreamWeaverの表組みは非常に直感的で、後から列や行を増やしたりすることも簡単にできます。ですが最近ははめっきり使うこともなくなりました。Adobeの契約はしているものの、わざわざ入れたくないという気持ちがありました。

Table Tag Generatorは、以下のような面倒な作業を解決してくれます。

  • rowspanとcolspanが混在した時にややこしくなってくる
  • 最近のWebフロント制作でよく使われるBEM記法に沿って、tableにクラスを振るのが面倒
  • table内の値を直感的に入力したい

Table Tag Generator

おもむろに「Table Tag Generator | HTMLの表を簡単に作成・結合ツール。テーブルタグジェネレーター」へアクセスします。

説明するほど難しい操作ではないので、公式の操作方法を引用します。

1. まず表の大きさ(行と列)を決めてください。数字をキーボードで入力するか、スピナーをクリックするか、マウスホイールを回してください。
2. td タグの代わりに th タグを使いたい場合(またはその逆)は、変換したいセルをドラッグして選択し、「td ↔ th」 ボタンをクリックしてください。
3. セルを結合する場合は、結合するセルをドラッグして選択し、「結合」ボタンをクリックしてください。結合したセルは「分割」ボタンで元に戻すことができます。rowspanやcolspanで悩む必要はありません。
4. 文字を入力する場合は、「文字」 ボタンをクリックして、入力モードにし、直接表に入力することができます。入力が終わったら、「出力」ボタンをクリックしてください。
5. CSS を適用するために、セルに class を設定することができます。
6. すべての操作は、undo ボタンで元に戻すことができます。
7. 表が完成したら、サイトにコピペしてください。

テーブルを作成してみる

例えば、このような時間割表が簡単に作成できます。科目毎にclassを降ったり、見出し部分にはthを降ったりBEMの記法を考慮したり、表の見た目に合わせて内容を入力するのも、ビジュアルで直感的に作成できます。

Table Tag Generatorで生成されたテーブル

生成されたコード

<table class="time">
    <tbody>
        <tr class="time__even">
            <th class="time__none"></th>
            <th class="time__youbi">月</th>
            <th class="time__youbi">火</th>
            <th class="time__youbi">水</th>
            <th class="time__youbi">木</th>
            <th class="time__youbi">金</th>
            <th class="time__youbi">土</th>
        </tr>
        <tr class="time__odd">
            <th class="time__num">1</th>
            <td class="time__kokugo">国語</td>
            <td class="time__sugaku">数学</td>
            <td class="time__kokugo">国語</td>
            <td class="time__sugaku">数学</td>
            <td class="time__syakai">社会</td>
            <td class="time__sugaku">数学</td>
        </tr>
        <tr class="time__even">
            <th class="time__num">2</th>
            <td class="time__sugaku">数学</td>
            <td class="time__kokugo">国語</td>
            <td class="time__sugaku">数学</td>
            <td class="time__kokugo">国語</td>
            <td class="time__eigo">英語</td>
            <td class="time__kokugo">国語</td>
        </tr>
        <tr class="time__odd">
            <th class="time__num">3</th>
            <td class="time__rika">理科</td>
            <td class="time__rika">理科</td>
            <td class="time__dotoku">道徳</td>
            <td class="time__rika">理科</td>
            <td class="time__sugaku">数学</td>
            <td class="time__rika">理科</td>
        </tr>
        <tr class="time__even">
            <th class="time__num">4</th>
            <td class="time__taiiku">体育</td>
            <td class="time__syakai">社会</td>
            <td class="time__dotoku">道徳</td>
            <td class="time__syakai">社会</td>
            <td class="time__taiiku">体育</td>
            <td class="time__none"></td>
        </tr>
        <tr class="time__odd">
            <th class="time__num">5</th>
            <td class="time__eigo">英語</td>
            <td class="time__gijyutu">技術</td>
            <td class="time__ongaku">音楽</td>
            <td class="time__taiiku">体育</td>
            <td class="time__rika">理科</td>
            <td class="time__none"></td>
        </tr>
        <tr class="time__even">
            <th class="time__num">6</th>
            <td class="time__syakai">社会</td>
            <td class="time__gijyutu">技術</td>
            <td class="time__eigo">英語</td>
            <td class="time__eigo">英語</td>
            <td class="time__ongaku">音楽</td>
            <td class="time__none"></td>
        </tr>
    </tbody>
</table>

今回のつみかさね

最近はレイアウトのためにtable表を使わなくなった反面、表として正しく使う部分に使われるようになりました。表は上手く使えば情報をコンパクトにまとめることができる表現ですから、こういうツールを使って、効率よく作っていきたいですね。https://tabletag.net/ja/

不二貿易 ちゃぶ台 幅60×奥行45cm ナチュラル 78144

不二貿易 ちゃぶ台 幅60×奥行45cm ナチュラル 78144

©blockworks.