個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

table作成の決定版!html/cssで素早く手軽に表組みをしたいなら「Tables Generator」がおすすめ!

table作成の決定版!html/cssで素早く手軽に表組みをしたいなら「Tables Generator」がおすすめ!

html/cssでtableを組むのって、手間がかかりますよね。
そんなとき便利なのがジェネレーターですが、今回ご紹介するジェネレーターは表組の決定版とも言えそうな使いやすさ、便利さです。
Excelやスプレッドシートで入力するような感覚でtalbeを作成できて、スタイリングやセルの結合・分離も思いのまま
シンプルな配色のテーマもあって、至れり尽くせりという感じです。
これは活用しないと損かも!
html/cssで表を組むのが苦手といった方々の参考になれば幸いです。

「Tables Generator」は、table作成の決定版!

Tables generator」は、htmlでの表組みはもちろん、LaTex、text、Markdown、MediaWikiといったtalbeまで生成できるジェネレーターです。
実にわかりやすいインターフェースで、Excelやスプレッドシート感覚でそのまま使っても特に支障はありません。
外部からcsvファイルを読み込むことも可能なようです。
table作成の決定版!html/cssで素早く手軽に表組みをしたいなら「Tables Generator」がおすすめ!

簡単な使い方

Tables generator」のサイトに行き、上部のグローバルメニューから「HTML Table」を選択します。
メニューの「Table>Set Size」から作成したい表組のコラム数を選択。
すると、下部スペースに表組みが現れます。
あとは、セル部分をダブルクリックして項目を入力するだけ。
もちろん、日本語にも対応していますよ。
文字揃えやフォントサイズ、マージン調整も簡単です。
操作を誤っても、「Edit>Undo」を使えば、もとに戻せます。
table作成の決定版!html/cssで素早く手軽に表組みをしたいなら「Tables Generator」がおすすめ!
うれしいことに、セルの結合や分離がいとも簡単に行えます!
table作成の決定版!html/cssで素早く手軽に表組みをしたいなら「Tables Generator」がおすすめ!
カラーやボーダーなども既存のテーマを選択すれば、簡単に装飾ができてしまいます。
table作成の決定版!html/cssで素早く手軽に表組みをしたいなら「Tables Generator」がおすすめ!
表が出来上がったら、表組の下にある「Generate」を押して、コードをコピーするだけです。もしくは「File>Save tables」でファイルをダウンロードすることも可能です。css有/無も選択できますよ。

Tables generator

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 1
  • 5

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

この記事を読んだ人はこんな記事も読んでいます

無料のドメインを取得してレンタルサーバーに設定する方法

無料のドメインを取得してレンタルサーバーに設定する方法

ドメインって無料で取得できるサービスがあるのをご存知でしたか? ドメインというとお名前.comなど

記事を読む

CCSだけで見出しに自動で連番を記入する方法

当ブログでは「◯◯100」といった感じの記事をよく書かせていただいています。 こうしたとき、以前ま

記事を読む

CSSだけで作られた決済代行・クレジット決済サービスアイコン95種「PaymentFont」WEBフォントしても使える!

CSSだけで作られた決済代行・クレジット決済サービスの無料アイコン95種「PaymentFont」WEBフォントしても使える!

CSSだけで作られた決済代行・クレジット決済サービスの無料アイコンセットをご紹介します。 ピュアC

記事を読む

レスポンシブ対応済みサイトがApple Watchに対応しているかどうかがわかる「the ultimate responsive test」

レスポンシブ対応済みサイトがApple Watchに対応しているかどうかがわかる「the ultimate responsive test」

Apple Watchがいよいよ発売になります。 ところで、あなたのレスポンシブ対応済みのサイトは

記事を読む

Sketch用の無料フリー素材1500+ 2015年04月

Sketch用の無料フリー素材1500+ 2015年04月

Sketch用の無料フリー素材を集めてみました。 Mac専用ということもあり、日本ではPhotos

記事を読む

超簡単!CSSで上下左右センターにする方法

超簡単!CSSで上下左右センターにする方法

超簡単ですぐ実践できるCSSで上下左右センターにする方法をご紹介。 display:flexを使っ

記事を読む

一石二鳥!ベンダープレフィックスをブラウザ上で追加し、CSSのミスも指摘してくれる「Autoprefixer」

一石二鳥!ベンダープレフィックスをブラウザ上で追加し、CSSのミスも指摘してくれる「Autoprefixer」

ベンダープレフィックスvendor prefixesをブラウザ上で追加してくれたうえで、CSSのミス

記事を読む

スクロールした位置についてくるStickyプラグイン15

スクロールした位置についてくるStickyプラグイン15

スクロールした位置についてくる要素を実装するjQueryプラグイン「Stickyプラグイン」をまとめ

記事を読む

背景画像をフルスクリーン&レスポンシブ対応にする方法

背景画像をスクリーンいっぱいに表示しているサイトが増えているとはいえ、いま見てもインパクトがあります

記事を読む

CSS3だけで映画のエンドロール風エフェクトを表現した「Movie Credits」

CSS3だけで映画のエンドロール風エフェクトを表現した「Movie Credits」

CSS3って、とっつきやすいうえに、表現力も豊かで、実装するのが楽しくなってしまいます。 表現力豊

記事を読む