新規作成日 2015-11-10
最終更新日
Webページで表組は、面倒で、理解しにくい表記の1つです。 流用しやすい定型の形を数種類作成しておいて、それを基に少しずつ改変していく方法が、現時点で私が、楽だと考えている方法です。
１つ１つ丁寧に考えていけば理解できるはずです。
htmlとcssで表を作成する
htmlタグで表を作成する
表を作成するには、まず、htmlタグを作成します。最初のひな型を用意しておき、それをコピペ修正する方法が効率的だと思います。
emmet入力に対応したエディタで利用できる、emmet入力を使用した表の作成方法についても紹介します。
| 見出し1 | 見出し2 | 見出し2 |
|---|---|---|
| 項目 11 | 項目 21 | 項目 31 |
| 項目 12 | 項目 22 | 項目 32 |
| 見出し1 | 見出し2 | 見出し3 |
|---|---|---|
| 見出し11 | 項目 12 | 項目 13 |
| 見出し21 | 項目 22 | 項目 23 |
| 見出し1 | 見出し2 | 見出し3 |
|---|---|---|
| 項目 11 | 項目 12 | 項目 13 |
| 見出し 21 | 見出し 22 | 見出し 23 |
| 項目 31 | 項目 32 | 項目 33 |
htmlで作成した表のためのスタイルを作成する
htmlで作成した表のタグに、スタイルを指定して、表をより見やすくします。
テーブルのレスポンシブデザインの対応例へのリンク
スマートフォンやタブレットでの閲覧に対応したレスポンシブデザインでは、表組はどうやって扱ったらいいのかは、悩む問題です。 解決方法を紹介しているサイトがあるので、参考にしましょう。
cssによる実装
CSSで出来るレスポンシブ対応を考えた table レイアウト(外部サイト)
レスポンシブWebデザインでテーブルを使う時の小技(外部サイト)
javaスクリプトによる実装
