*

PC LIFE

ホーム >  Web制作 >  サイト編集支援 > 
汎用型テーブル・基本パターン MENU 

テーブル・tableの列数や列幅を簡単に設定できる基本的かつシンプルなパターン

要約:テーブルタグに共通CSSと追加CSSの2つのクラスを設定し、追加CSSで作成したい列数や列幅を決めます。筆者は、表を使う場合、自作の汎用リスト表(ul li)を使用していますが、列結合に対応出来ないため、代替の為のテーブルです。

共通CSS

行番 このページでは、以下の条件で作成されています。
2 罫線は1本とし、単純なリスト形式と同じ表示です。
3 列の幅を固定化。tableタグの特性を生かした列の内容の長さで幅を自動調整する場合は、このCSSを削除。
4 tableの表示領域が100%です。デザインに合わせ、固定幅(例:max-width:500px;など)に変更下さい。
5-6 列見出しも他の列と同等の罫線をつけています。

事例-A 列の幅均等 列見出し付き

一番シンプルな罫線だけの基本の表

ひらがな カタカナ 英大文字 英小文字
あいうえお アイウエオ AIUEO aiueo
かきくけこ カキクケコ KAKIKUKEKO kakikukeko

事例-A HTML

tableに任意のclass名を追加(仮:ptn_a)

事例-A 追加したclassのCSS

行番 概略説明
2-4 td(データ域)1列目から最後まで、先頭にスペース

事例-B 左端の列に連番 2列目以降の列幅均等 列見出し付き

No ひらがな カタカナ 英大文字 英小文字
あいうえお アイウエオ AIUEO aiueo
かきくけこ カキクケコ KAKIKUKEKO kakikukeko

事例-B HTML

事例-B CSS

行番 概略説明
2-5 1列目の見出しとデータ域の幅を%指定。<th>又は<td>タグだけでも出来るブラウザがありますが、他のCSS(th td)が干渉してうまくいかない場合があるので、入れた方が良いようです。
9-12 (100-1列目の幅8%)/列数。ブラウザによっては、この指定が無くても1列目の幅の残りを均等幅に表示しますが、このCSSを入れた方が良いようです。

事例-C 各列を個別の幅 列見出し背景色付き

No ひらがな カタカナ 英大文字 英小文字
あいうえお アイウエオ AIUEO aiueo
かきくけこ カキクケコ KAKIKUKEKO kakikukeko

事例-C HTML

tableに任意のclass名を追加(仮:ptn_c)

事例-C CSS

行番 概略説明
13-22 列の数だけ、幅を個別に指定。(width%値の合計)<=100