Web制作に便利、Tableを自由に設計、結合してタグ生成もしてくれるWebサービス 『Responsive HTML Table Generator』

WebのTableを自由に設計、結合も可能で
タグ生成してくれるWebサービス。
レスポンシブデザインも対応可能で、実際に
私もWeb制作で活用しています。

Web制作に便利、Tableを自由に設計、結合してタグ生成もしてくれるWebサービス 『Responsive HTML Table Generator』
目次

リンク先

Responsive HTML Table Generator リンク先はこちらから

使い方

Web制作に便利、Tableを自由に設計、結合してタグ生成もしてくれるWebサービス 『Responsive HTML Table Generator』

まずはAdd Contentから行数、列数を決めます。
プレビューがあるので分かりやすく設定ができます。
Settingsで細かくテーブルの設定が可能です。

Web制作に便利、Tableを自由に設計、結合してタグ生成もしてくれるWebサービス 『Responsive HTML Table Generator』

Generate Responsive TableにするとPC用、スマホ用などで切替が可能です。
レスポンシブに対応出来るのも便利です。

Web制作に便利、Tableを自由に設計、結合してタグ生成もしてくれるWebサービス 『Responsive HTML Table Generator』

通常の表なテーブルだとそのままで大丈夫ですが、セルの結合などが必要な時もあります。
このWebサービスでは、画面上で結合も可能です。

Web制作に便利、Tableを自由に設計、結合してタグ生成もしてくれるWebサービス 『Responsive HTML Table Generator』

結合したいセルを選択して、「Merge Selected Cells」をクリックします。

Web制作に便利、Tableを自由に設計、結合してタグ生成もしてくれるWebサービス 『Responsive HTML Table Generator』

簡単にセルを結合できました。コードで書くと「Colspan」や「Rowspan」など頭で考えて
ややこしくなってきますが、このツールで結合すると分かりやすく便利です。

Web制作に便利、Tableを自由に設計、結合してタグ生成もしてくれるWebサービス 『Responsive HTML Table Generator』

こんな複雑な結合も簡単です。

Web制作に便利、Tableを自由に設計、結合してタグ生成もしてくれるWebサービス 『Responsive HTML Table Generator』

スマホ画面ではこんな感じに見えます。プレビューがあるのがとても便利です。

Web制作に便利、Tableを自由に設計、結合してタグ生成もしてくれるWebサービス 『Responsive HTML Table Generator』

設定が全て出来たら画面下部に出力されている、コードを貼り付けるだけです。
CSSからTableタグまで出力されているので、そのまま貼り付けて使えます。

Web制作に便利、Tableを自由に設計、結合してタグ生成もしてくれるWebサービス 『Responsive HTML Table Generator』

WordPressなどで使う時は、Tableタグだけをコピーして使っています。
CSSはテーマファイルなどに書き込んで使用しています。

Web制作に便利、Tableを自由に設計、結合してタグ生成もしてくれるWebサービス 『Responsive HTML Table Generator』

サクッとテーブルが作成できる便利なWebサービス。
Web制作にとても重宝します。

よかったらシェアしてください!

コメント

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

目次