◆アイデアとデザイン力でビジネスに彩りを添える、株式会社ウイングエージェンシーの情報発信サイトです!

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