2014/07/08
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ファイルを読み込むことも可能なようです。

簡単な使い方
「Tables generator」のサイトに行き、上部のグローバルメニューから「HTML Table」を選択します。
メニューの「Table>Set Size」から作成したい表組のコラム数を選択。
すると、下部スペースに表組みが現れます。
あとは、セル部分をダブルクリックして項目を入力するだけ。
もちろん、日本語にも対応していますよ。
文字揃えやフォントサイズ、マージン調整も簡単です。
操作を誤っても、「Edit>Undo」を使えば、もとに戻せます。

うれしいことに、セルの結合や分離がいとも簡単に行えます!

カラーやボーダーなども既存のテーマを選択すれば、簡単に装飾ができてしまいます。

表が出来上がったら、表組の下にある「Generate」を押して、コードをコピーするだけです。もしくは「File>Save tables」でファイルをダウンロードすることも可能です。css有/無も選択できますよ。
Sponsored by
お役に立てましたら、以下どれでも結構のですので、ポチリと……。
Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。
この記事を読んだ人はこんな記事も読んでいます
-
-
シンプルなのに効果的!CSS3トランジションを使ったマウスオーバーアニメーション11
CSS3を使えば、シンプルなコードなのに、ユーザーを「おっ!」と思わせる楽しい動きを簡単に実装できて
-
-
画像を使わずにCSSとWEBフォントを利用してアイコンボタンをつくる方法
アイコンに画像を利用せず、WEBフォントとCSSを使って表現する方法が徐々に増えています。 画像を
-
-
UIデザインのリニューアル前と後を比較できるギャラリーサイト「Android UX before and after」
UIデザインのリニューアルの前と後をひと目で比較できるギャラリーサイトをご紹介します。 Googl
-
-
背景画像をフルスクリーン&レスポンシブ対応にする方法
背景画像をスクリーンいっぱいに表示しているサイトが増えているとはいえ、いま見てもインパクトがあります
-
-
無料で利用できるhtml5プレイヤー(jQueryプレイヤー)14(2013)
html5のお陰で、プラグインなしでビデオ、音楽を導入できるようになりました。 iPhoneは今後
-
-
背景画像をサッとつくれる便利ツール20選
背景画像をサッとつくれる便利ツールやサイトをご紹介します。 背景にちょっと手を加えるだけで、見た目
-
-
これは簡単!ポリゴン画像生成ジェネレーター「Trianglify Generator」
簡単・無料で利用できるこポリゴン画像生成ジェネレーターをご紹介。 背景画像などによく使われているポ
-
-
コード/js不要!ドラッグ&ドロップだけでCSSイメージスライダーがつくれるアプリ「cssSlider」
イメージスライダーは限られたスペースに多くの視覚的情報を盛り込めるので、ショップなどでは非常によく利
-
-
人気のHTML/CSSコードサンプル25+おまけ2 from CodePen
CodePenはHTML,CSS,JSのコードサンプル配布サイトです。 紹介されているコードの種類
-
-
JSを使わずにCSSだけで簡単にシンプルなパララックス効果をつける方法
JSを使わずにCSSだけで簡単にシンプルなパララックス効果をつけられる方法をご紹介します。 パララ
