テーブル汎用
★選んで使える《テーブル》のサンプル集
なにかと面倒なテーブルのデザインも、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行目 |