- HOME
- > BLOG CATEGORY
- 【HTML table】複雑な表(テーブル)をコピペで簡単に作る方法
BLOG NEWS ブログ
SHU[シュウ]
1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです！笑
1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです！笑
前回のtableタグに関する記事はこちらから
関連記事
HTMLのtableタグについて説明しております。
cssでセルとの結合、border,罫線などtableタグに関する情報をお届けしております。
表を作成からレイアウトの変更まで1度お試しください。
実際に私が仕事で作成した表(テーブル)になります。
これをHTMLやCSSせ作成するには複雑だと思いませんか？
今回のテーマである、
「【HTML table】複雑な表(テーブル)をコピペで簡単に作る」ためのサイトをご紹介いたします。
[記事の内容]
ジェネレターを使うメリットをご紹介いたします。
すごいシンプルサイトですが使い方をマスターすればとても便利です！
でわ、説明していきます！
数値を入力することで下記の
表(テーブル)に連動します
例)行5×列5
セルどうしをドラッグし「結合」をクリックすると結合します
セルどうしをドラッグするとピンク色に変わります、ピンク色の状態で「結合」をクリックしてください。
セルどうしをドラッグし「分割」をクリックすると分割します
セルどうしをドラッグするとピンク色に変わります、ピンク色の状態で「分割」をクリックしてください。
1セルどうしをドラッグし「td↔th」をクリックするとtdからthに変換します、thはオレンジ色に変わります。
2セルどうしをドラッグし「td↔th」をクリックするとthからtdに変換します
下記の表(テーブル)に文字を入力し出力できます
文字を入力し出力をおこなってください。
表(テーブル)にも自動反映されます！とても便利
下記の表(テーブル)にclass名を入力し出力できます
class名を入力し出力をおこなってください。
行×列を把握し結合しましょう
画像の場合ですと行(12行)×列(5列)になります。
あとはCSSでレイアウトを整えるだけです！どうでしたか?
行×列を入力しtdをthに変更し結合するだけです！
それだけで自動でHTMLコードが発行されます
ここまで使用方法について説明してきましたが、
私が使わない機能があります、それについてご説明いたします。
使わない機能 ① 文字
画像のように文字を入力をし終えたあとで行×列が足りない場合がよくあります、
その際に行×列を増やすと先ほど入力した文字が消えてしまいます。
使わない機能 ② class
画像のようにclass名を入力をし終えたあとで行×列が足りない場合がよくあります、
その際に行×列を増やすと先ほど入力したclass名が消えてしまいます。
消えてしまった場合の対処方法
「←」戻るボタンを押せば元には戻ります。
ですが、私は「文字」、「class」は使用しない事に決めてます。
この4つで十分です！
HTMLコードが反映されたらご自身のテキストエディタに貼り付けをし、
文字の入力後CSSでレイアウトの調整しましょう！
左画面に数値を入力し右画面にHTMLコードが反映されます、
プレビュー画面もありますのでとても便利です。
表(テーブル)に直接文字を入力し「太字、イタリック、文字センター寄せ、
文字センター左寄せ」など簡単にできます。
画面下にHTMLコード、CSSも反映いたします。
表（テーブル）の「background-color、boderの設定」など簡単にできます。
画面下にHTMLコード、CSSも反映いたします。
今回はこれで以上になります。
複雑な表（テーブル）はジェネレーターを使用すると大幅に作業時間の軽減に繋がります。
ですが、表（テーブル）の基礎ができてないとジェネレーターサイトが閉鎖してしまう恐れもありますので、
ご自身で1度複雑な表（テーブル)に挑戦してみてください。
2021.07.27
2021.07.09
2021.07.06
2021.07.02
2022.05.20
2022.05.10
2022.05.06
2022.04.26
2022.04.22
2022.04.15
2020.03.22
2020.03.06
2020.02.22
2020.02.22
© 2020 shu-naka-blog
