テーブル汎用
★選んで使える《テーブル》のサンプル集
なにかと面倒なテーブルのデザインも、CSSを駆使することでいろいろなパターンが簡単にデザインできます。本テーブルは、元々、テーマ内に設定済のCSSを、htmlの組み合わせ方でデザインを変えているだけです。本来、htmlにサイズや余白・ボーダー・セルの背景色等を直接記述することは非推奨であり、CSSによってhtmlがシンプルになることで、制作作業も格段にはかどります。本テーブルは、ページ上の任意の場所に設定して自由に使い回すことができる、実効的で便利なサンプルです。
◆シンプルなテーブルa
———
2カラムで一つずつ入れる
———
▼a01
table-a01
1列目の1行目 | 2列目の1行目 |
▼a02
table-a02
1列目の1行目 | 2列目の1行目 | 3列目の1行目 |
▼a03
table-a03
1列目の1行目 |
1列目の2行目 |
1列目の3行目 |
1列目の4行目 |
▼a04
table-a04
1列目の1行目 | 2列目の1行目 |
1列目の2行目 | 2列目の2行目 |
1列目の3行目 | 2列目の3行目 |
1列目の4行目 | 2列目の4行目 |
▼a05
table-a05
1列目の1行目 | 2列目の1行目 | 3列目の1行目 |
1列目の2行目 | 2列目の2行目 | 3列目の2行目 |
1列目の3行目 | 2列目の3行目 | 3列目の3行目 |
1列目の4行目 | 2列目の4行目 | 3列目の4行目 |
▼a06
table-a06
1列目の1行目 | 2列目の1行目 | 3列目の1行目 | 4列目の1行目 |
1列目の2行目 | 2列目の2行目 | 3列目の2行目 | 4列目の2行目 |
1列目の3行目 | 2列目の3行目 | 3列目の3行目 | 4列目の3行目 |
1列目の4行目 | 2列目の4行目 | 3列目の4行目 | 4列目の4行目 |
▼a07
table-a07
1行目の横列結合 | |
1列目の1行目 | 2列目の1行目 |
1列目の2行目 | 2列目の2行目 |
1列目の3行目 | 2列目の3行目 |
1列目の4行目 | 2列目の4行目 |
▼a08
table-a08
1行目の横列結合 | |
1列目の2行目 | 2列目の2行目 |
1列目の3行目 | 2列目の3行目 |
1列目の4行目 | 2列目の4行目 |
5行目の横列結合 |
▼a09
table-a09
1行目の横列結合 | ||
1列目の2行目 | 2列目の2行目 | 3列目の2行目 |
1列目の3行目 | 2列目の3行目 | 3列目の3行目 |
1列目の4行目 | 2列目の4行目 | 3列目の4行目 |
1列目の5行目 | 2列目の5行目 | 3列目の5行目 |
▼a10
table-a10
1行目の横列結合 | ||
1列目の2行目 | 2列目の2行目 | 3列目の2行目 |
1列目の3行目 | 2列目の3行目 | 3列目の3行目 |
1列目の4行目 | 2列目の4行目 | 3列目の4行目 |
5行目の横列結合 |
◆見出し付のテーブルb
———
2カラム
———
▼b01
table-b01
★1行目 見出し | |
---|---|
1列目の2行目 | 2列目の2行目 |
▼b02
table-b02
★1行目 見出し | ||
---|---|---|
1列目の2行目 | 2列目の2行目 | 3列目の2行目 |
▼b03
table-b03
★1行目 見出し |
---|
1列目の2行目 |
1列目の3行目 |
1列目の4行目 |
▼b04
table-b04
★1行目 見出し | ||
---|---|---|
1列目の2行目 | 2列目の2行目 | |
1列目の3行目 | 2列目の3行目 | |
1列目の4行目 | 2列目の4行目 |
▼b05
table-b05
★1行目 見出し | ||
---|---|---|
1列目の2行目 | 2列目の2行目 | 3列目の2行目 |
1列目の3行目 | 2列目の3行目 | 3列目の3行目 |
1列目の4行目 | 2列目の4行目 | 3列目の4行目 |
▼b06
table-b06
★1行目 見出し | |||
---|---|---|---|
1列目2行目 | 2列目2行目 | 3列目2行目 | 4列目2行目 |
1列目3行目 | 2列目3行目 | 3列目3行目 | 4列目3行目 |
1列目4行目 | 2列目4行目 | 3列目4行目 | 4列目4行目 |
▼b07
table-a07
★1行目 見出し | ||
---|---|---|
1列目の2行目 | 2列目の2行目 | 3列目の2行目 |
1列目の3行目 | 2列目の3行目 | 3列目の3行目 |
1列目の4行目 | 2列目の4行目 | 3列目の4行目 |
5行目の横列結合 |
▼b08
table-b08
見出し1列目 | 見出し2列目 | 見出し3列目 |
---|---|---|
1列目1行目 | 2列目1行目 | 3列目1行目 |
1列目2行目 | 2列目2行目 | 3列目2行目 |
1列目3行目 | 2列目3行目 | 3列目3行目 |
1列目4行目 | 2列目4行目 | 3列目4行目 |