Home > TagScript > html、css、Java > テーブル(表組)

htmlとcssでテーブル(表組)を利用する

新規作成日 2015-11-10
最終更新日

Webページで表組は、面倒で、理解しにくい表記の1つです。 流用しやすい定型の形を数種類作成しておいて、それを基に少しずつ改変していく方法が、現時点で私が、楽だと考えている方法です。

1つ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による実装

javaスクリプトによる実装

テーブルをレスポンシブに対応させるのに便利なjQueryプラグインまとめ(外部サイト)

responsive-table.js(外部サイト)

有名な表のレスポンシブデザインを実現するjQuery