WebのTableを自由に設計、結合も可能で
タグ生成してくれるWebサービス。
レスポンシブデザインも対応可能で、実際に
私もWeb制作で活用しています。
![Web制作に便利、Tableを自由に設計、結合してタグ生成もしてくれるWebサービス 『Responsive HTML Table Generator』](https://pc.mogeringo.com/wp-content/uploads/2023/07/htmltable-thumb-1.jpg)
目次
リンク先
Responsive HTML Table Generator リンク先はこちらから
使い方
![Web制作に便利、Tableを自由に設計、結合してタグ生成もしてくれるWebサービス 『Responsive HTML Table Generator』](https://pc.mogeringo.com/wp-content/uploads/2023/07/htmltable1.jpg)
まずはAdd Contentから行数、列数を決めます。
プレビューがあるので分かりやすく設定ができます。
Settingsで細かくテーブルの設定が可能です。
![Web制作に便利、Tableを自由に設計、結合してタグ生成もしてくれるWebサービス 『Responsive HTML Table Generator』](https://pc.mogeringo.com/wp-content/uploads/2023/07/htmltable2.jpg)
Generate Responsive TableにするとPC用、スマホ用などで切替が可能です。
レスポンシブに対応出来るのも便利です。
![Web制作に便利、Tableを自由に設計、結合してタグ生成もしてくれるWebサービス 『Responsive HTML Table Generator』](https://pc.mogeringo.com/wp-content/uploads/2023/07/htmltable3.jpg)
通常の表なテーブルだとそのままで大丈夫ですが、セルの結合などが必要な時もあります。
このWebサービスでは、画面上で結合も可能です。
![Web制作に便利、Tableを自由に設計、結合してタグ生成もしてくれるWebサービス 『Responsive HTML Table Generator』](https://pc.mogeringo.com/wp-content/uploads/2023/07/htmltable4.jpg)
結合したいセルを選択して、「Merge Selected Cells」をクリックします。
![Web制作に便利、Tableを自由に設計、結合してタグ生成もしてくれるWebサービス 『Responsive HTML Table Generator』](https://pc.mogeringo.com/wp-content/uploads/2023/07/htmltable5.jpg)
簡単にセルを結合できました。コードで書くと「Colspan」や「Rowspan」など頭で考えて
ややこしくなってきますが、このツールで結合すると分かりやすく便利です。
![Web制作に便利、Tableを自由に設計、結合してタグ生成もしてくれるWebサービス 『Responsive HTML Table Generator』](https://pc.mogeringo.com/wp-content/uploads/2023/07/htmltable6.jpg)
こんな複雑な結合も簡単です。
![Web制作に便利、Tableを自由に設計、結合してタグ生成もしてくれるWebサービス 『Responsive HTML Table Generator』](https://pc.mogeringo.com/wp-content/uploads/2023/07/htmltable7.jpg)
スマホ画面ではこんな感じに見えます。プレビューがあるのがとても便利です。
![Web制作に便利、Tableを自由に設計、結合してタグ生成もしてくれるWebサービス 『Responsive HTML Table Generator』](https://pc.mogeringo.com/wp-content/uploads/2023/07/htmltable8.jpg)
設定が全て出来たら画面下部に出力されている、コードを貼り付けるだけです。
CSSからTableタグまで出力されているので、そのまま貼り付けて使えます。
![Web制作に便利、Tableを自由に設計、結合してタグ生成もしてくれるWebサービス 『Responsive HTML Table Generator』](https://pc.mogeringo.com/wp-content/uploads/2023/07/htmltable9.jpg)
WordPressなどで使う時は、Tableタグだけをコピーして使っています。
CSSはテーマファイルなどに書き込んで使用しています。
![Web制作に便利、Tableを自由に設計、結合してタグ生成もしてくれるWebサービス 『Responsive HTML Table Generator』](https://pc.mogeringo.com/wp-content/uploads/2023/07/htmltable10.jpg)
サクッとテーブルが作成できる便利なWebサービス。
Web制作にとても重宝します。
コメント