Skip to content

Instantly share code, notes, and snippets.

@shunito

shunito/table-best-practice_2008.html

Created June 24, 2011 12:14
Show Gist options
  • Save shunito/1044659 to your computer and use it in GitHub Desktop.
Save shunito/1044659 to your computer and use it in GitHub Desktop.
Download ZIP
Table HTML&CSS ベストプラクティス 2008年版
Raw
table-best-practice_2008.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.4.1/build/reset/reset-min.css" />
<title>Table HTML&amp;CSS ベストプラクティス 2008年版</title>
<style type="text/css">
<!--
body {
color:#333;
background-color:#EEE;
text-align:center;
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
font-size: 96%;
}
table{border-collapse:collapse;border-spacing:0;}
h1,h2,h3,h4 {
font-weight:bold;
border-bottom:1px solid #999;
margin: 0 0 1em 0;
}
h1 { font-size: 128%; color:#993300;}
h2 { font-size: 120%;}
h3 { font-size: 100%; color:#666;}
h4 { font-size: 100%; color:#666;}
p { margin-bottom:1em; line-height: 1.4;}
em { color:#CC3300; }
ul { list-style-position:outside; margin-left:2em; }
li { list-style-type:circle; }
#page {
width: 46em;
margin:0 auto;
padding:0;
border-width: 0 1px;
border-style:solid;
border-color:#CCC;
background-color:#FFF;
text-align:left;
}
#contents {
padding: 2em;
}
#header {
background-color:#E8DDC4;
padding:1em;
}
#footer {
text-align:right;
font-size:88%;
background-color:#E8DDC4;
padding:0.5em;
}
div.section {
margin-bottom:3em;
}
p.code {
padding: 0.5em;
margin-bottom: 1em;
background-color:#333333;
color:#FFF;
white-space:nowrap;
font-size:88%;
line-height: 1.2;
}
p.code span { color:#FF6600; }
#codeform {
}
#codeform textarea{
width: 90%;
margin-bottom:1em;
}
/* Table CSS */
table.tblbasic {
border:2px solid #999;
width:100%;
}
table.tblbasic caption {
text-align:right;
font-size:90%;
color:#666;
}
table.tblbasic col.summary {
width: 14em;
}
table.tblbasic th,
table.tblbasic td {
padding: 0.2em;
border: 1px solid #CCC;
}
table.tblbasic thead th {
background-color:#DDD;
border-bottom:3px double #999;
text-align:center;
}
table.tblbasic tbody th {
background-color:#EEE;
white-space:nowrap;
}
table.tblbasic thead th.gt {
border-bottom:none!important;
}
table.tblbasic tr.zb th {
background-color:#E9E9E9;
}
table.tblbasic tr.zb td {
background-color:#F9F9F9;
}
td.date { text-align:center!important; }
td.money { text-align:right!important; white-space:nowrap!important; }
span.up{ color:#336600;}
span.down{ color:#CC3300;}
-->
</style>
</head>
<body>
<div id="page">
<div id="header">
<h1>Table HTML&amp;CSS ベストプラクティス 2008年版</h1>
<p>効率的でアクセシブルなTableのコーディング。<br />
HTMLとCSSでテーブルを組む際に、どういった点に気をつけるべきか。実際のコード実例を元に説明。</p>
</div>
<div id="contents">
<div class="section">
<h2>Tableに使われるタグの整理</h2>
<p>以下もろもろXHTML1.0とCSS2.1を前提にしています。<br />
XHTMLやCSSの基礎については解説しませんので、ページ一番下のリソースからたどってください。</p>
<table summary="テーブルで利用するタグの説明" class="tblbasic" id="taglist">
<caption>Table Tagリスト</caption>
<colgroup><col class="tag" /></colgroup>
<colgroup span="2"><col class="summary" /><col class="note" /></colgroup>
<thead>
<tr>
<th scope="col">タグ</th>
<th scope="col">説明</th>
<th scope="col">注意点</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">&lt;table&gt;</th>
<td>テーブルの開始タグ</td>
<td>summaryとcaptionは極力つける。class以外にIDも指定しておくとデータのアクセスに便利。</td>
</tr>
<tr class="zb">
<th scope="row">&lt;caption&gt;</th>
<td>テーブルの脚注</td>
<td>仕様上table要素の直下にしか書けない。<br />このテーブルだと、「Table Tagリスト」部分。 </td>
</tr>
<tr>
<th scope="row">&lt;colgroup&gt;</th>
<td>カラムのグループを設定する。</td>
<td>ほとんど使われないが、あるとアクセシビリティアップ</td>
</tr>
<tr class="zb">
<th scope="row">&lt;col&gt;</th>
<td>カラム共通の設定を行う。</td>
<td>あまり使われないが、あるとアクセシビリティアップ。</td>
</tr>
<tr>
<th scope="row">&lt;thead&gt;</th>
<td>テーブルのヘッダ要素。</td>
<td>このテーブルだと二重線の上。使うと便利。</td>
</tr>
<tr class="zb">
<th scope="row">&lt;tfoot&gt;</th>
<td>テーブルのフッタ要素。</td>
<td>仕様上&lt;tbody&gt;より上に書かなければならないが、古いブラウザだとそのまま上に表示されちゃうので、実際には&lt;tbody&gt;より下に書かれていることがある。</td>
</tr>
<tr>
<th scope="row">&lt;tbody&gt;</th>
<td>テーブルのデータ部分。</td>
<td>実データはここにおきましょう。</td>
</tr>
<tr class="zb">
<th scope="row">&lt;tr&gt;</th>
<td>行を開始する。</td>
<td>ゼブラ模様にするときは、これにクラスを割り振る。</td>
</tr>
<tr>
<th scope="row">&lt;th&gt;</th>
<td>セル。データのタイトル。</td>
<td>scope要素を使うと、アクセシビリティ上よい。</td>
</tr>
<tr class="zb">
<th scope="row">&lt;td&gt;</th>
<td>セル。データを入れる。</td>
<td>alignとwidthは非推奨なので使っちゃダメ。classで指定しましょう。nowrapはいまいちCSSでは思うようにいかないことがあるので、使っちゃうこともあるが本来はよろしくない。</td>
</tr>
</tbody>
</table>
</div>
<div class="section">
<h2>&lt;table&gt;と&lt;caption&gt;</h2>
<p>テーブルの基本設定と脚注を設定。</p>
<h3>HTML</h3>
<p class="code">&lt;table summary=&quot;テーブルで利用するタグの説明&quot; class=&quot;tblbasic&quot; id=&quot;taglist&quot;&gt;<br />
&lt;caption&gt;Table Tagリスト&lt;/caption&gt;</p>
<h3>CSS</h3>
<p class="code">table{ border-collapse:collapse;border-spacing:0; } 　<span>テーブルのセルの枠線の共通設定。</span><br />
table.tblbasic {<br />
　border:2px solid #999;　<span>テーブルの枠線を指定。</span><br />
　width:100%;<br />
}<br />
<br />
table.tblbasic caption {<br />
　text-align:right;<br />
　font-size:90%;<br />
　color:#666;<br />
}</p>
<p>テーブルの最初の部分。<em>&lt;table&gt;は極力summaryを入れる</em>こと。<br />
&lt;caption&gt;はCSSでcaption-side:bottomとするとテーブルの下部に表示される。左右位置はtext-alignで指定。</p>
</div>
<div class="section">
<h2>&lt;colgroup&gt;と&lt;col&gt;</h2>
<p>カラムの設定を行い、アクセシビリティを向上。</p>
<h3>HTML</h3>
<p class="code"> &lt;colgroup&gt;&lt;col class=&quot;tag&quot; /&gt;&lt;/colgroup&gt;<br />
&lt;colgroup span=&quot;2&quot;&gt;&lt;col class=&quot;summary&quot; /&gt;&lt;col class=&quot;note&quot; /&gt;&lt;/colgroup&gt;</p>
<h3>CSS</h3>
<p class="code">table.tblbasic col.summary {<br />
　　width: 14em;<br />
}</p>
<p>この記述は、テーブルに三つのカラムがあり、それが二つのグループに属していることを表している。<br />
カラムの横幅は&lt;th&gt;や&lt;td&gt;ではなくて、&lt;col&gt;で指定するとスマートだけど、古いブラウザだとうまく動かないので、現実的には&lt;th&gt;や&lt;td&gt;で指定することが多い。</p>
</div>
<div class="section">
<h2>&lt;thead&gt;と&lt;th&gt;</h2>
<p>項目見出しの効果的な設定法。</p>
<h3>HTML</h3>
<p class="code"> &lt;thead&gt;<br />
&lt;tr&gt;<br />
&lt;th scope=&quot;col&quot;&gt;タグ&lt;/th&gt;　　　<span>scope=&quot;col&quot;は、thが横に並んでいることを表現している。</span><br />
&lt;th scope=&quot;col&quot;&gt;説明&lt;/th&gt;<br />
&lt;th scope=&quot;col&quot;&gt;注意点&lt;/th&gt;<br />
&lt;/tr&gt;<br />
&lt;/thead&gt;</p>
<h3>CSS</h3>
<p class="code">table.tblbasic thead th {<br />
　background-color:#DDD;<br />
　border-bottom:3px double #999;<span>　　&lt;thead&gt;内の&lt;th&gt;のみ下線を二重線にしている。</span><br />
}</p>
<p>テーブルの項目名を表示する場合、&lt;thead&gt;で囲んだ&lt;th&gt;を使う。<br />
このように<em>構造化することで、無駄なclassを作らずに表現の幅を広くでき、CSSもすっきり</em>。</p>
</div>
<div class="section">
<h2>&lt;tbody&gt;と&lt;td&gt;</h2>
<p>実データの具体的な記述方法。</p>
<h3>HTML</h3>
<p class="code"> &lt;tbody&gt;<br />
&lt;tr&gt;<br />
&lt;th scope=&quot;row&quot;&gt;&amp;lt;table&amp;gt;&lt;/th&gt;　　<span>scope=&quot;row&quot;は、thが縦に並んでいることを表現している。</span><br />
&lt;td&gt;テーブルの開始タグ&lt;/td&gt;<br />
&lt;td&gt;summaryとcaptionは極力つける。class以外にIDも指定しておくとデータのアクセスに便利。&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;/tbody&gt;
</p>
<h3>CSS</h3>
<p class="code">table.tblbasic th,<br />
table.tblbasic td {<br />
　padding: 0.2em;<br />
　border: 1px solid #CCC;<br />
}<br />
<br />
table.tblbasic tbody th {　　<span>tbodyのthのみ背景色を変更。</span><br />
　background-color:#EEE;<br />
}</p>
<p>実データ部分は&lt;tbody&gt;に入れておくと、DOMでデータを再利用しやすい。<br />
CSSでは、まずthとtd<em>共通の指定をしてから個別指定することで、無駄なコードの記述を削減できる。</em></p>
</div>
<div class="section">
<h2>&lt;tr&gt;とゼブラ模様の&lt;th&gt;&lt;td&gt;</h2>
<p>よくある縞々の作り方。</p>
<h3>HTML</h3>
<p class="code"> &lt;tr class=&quot;zb&quot;&gt;　　<span>&lt;tr&gt;にゼブラ模様のclassを指定</span><br />
&lt;th scope=&quot;row&quot;&gt;&amp;lt;caption&amp;gt;&lt;/th&gt;<br />
&lt;td&gt;テーブルの脚注&lt;/td&gt;<br />
&lt;td&gt;仕様上table要素の直下にしか書けない。&lt;br /&gt;このテーブルだと、「Table Tagリスト」部分。 &lt;/td&gt;<br />
&lt;/tr&gt;</p>
<h3>CSS</h3>
<p class="code">table.tblbasic tr.zb th {　　<span><span>子孫セレクタで</span>&lt;tr class=&quot;zb&quot;&gt;の中の&lt;th&gt;を指定</span><br />
　background-color:#E9E9E9;<br />
}<br />
table.tblbasic tr.zb td {　　<span><span>子孫セレクタで</span>&lt;tr class=&quot;zb&quot;&gt;の中の&lt;td&gt;を指定</span><br />
　background-color:#F9F9F9;<br />
}</p>
<p>&lt;th&gt;や&lt;td&gt;個別にclass指定していたらかったるいので、&lt;tr&gt;につけましょう。<br />
ポイントは、<em>子孫セレクタをうまく使って、tableごとに指定可能にしておく</em>ことくらいです。
</p>
</div>
<div class="section">
<h2>&lt;td&gt;の使用例</h2>
<p>右揃え、左揃え、中央配置と、セル内のデータの装飾などの実際。</p>
<table summary="テーブルのセルの表現方法の例" class="tblbasic" id="tdpractice">
<caption>データのセルの表現</caption>
<thead>
<tr>
<th rowspan="2" scope="col">&nbsp;</th>
<th rowspan="2" scope="col">一般</th>
<th rowspan="2" scope="col">日付</th>
<th colspan="2" scope="col" class="gt">金額</th>
</tr>
<tr>
<th scope="col">あげ</th>
<th scope="col">さげ</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">データ行</th>
<td>一般的には左寄せ</td>
<td class="date">2008年1月１日</td>
<td class="money"><span class="up">100,000円</span></td>
<td class="money"><span class="down">-20,000円</span></td>
</tr>
</tbody>
</table>
<br />
<h3>HTML</h3>
<p class="code"> &lt;tbody&gt;<br />
&lt;tr&gt;<br />
&lt;th scope=&quot;row&quot;&gt;データ行&lt;/th&gt;<br />
&lt;td&gt;一般的には左寄せ&lt;/td&gt;<br />
&lt;td class=&quot;date&quot;&gt;2008年1月１日&lt;/td&gt;<br />
&lt;td class=&quot;money&quot;&gt;&lt;span class=&quot;up&quot;&gt;100000円&lt;/span&gt;&lt;/td&gt;<br />
&lt;td class=&quot;money&quot;&gt;&lt;span class=&quot;down&quot;&gt;-20000円&lt;/span&gt;&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;/tbody&gt;</p>
<h3>CSS</h3>
<p class="code">td.date { text-align:center!important; } 　　<span>日付は中央揃え</span><br />
td.money { text-align:right!important; white-space:nowrap!important; }　　<span>金額は左でnowrap指定。</span><br />
span.up{ color:#336600;}　　　　　　<span>あげは緑</span><br />
span.down{ color:#CC3300;}<span>　　　さげは赤</span></p>
<p>位置揃えは&lt;td&gt;、装飾は中の&lt;span&gt;で行うと、記述がすっきり。<br />
class名は仕様上複数記述できるが、IE5系が対応していなくて最初のひとつしか反映されないので、古いブラウザを考えると一つにしておいたほうが無難。</p>
<p>重要なのは、<em>class名には中身の性質に合った名前を付けること。</em>centerとかredとかしておいてあとでやっぱり右揃えにしたいとか、赤じゃなくてオレンジにしたいというときにclass名とスタイルの不整合がおきるのでよろしくない。</p>
</div>
<div class="section">
<h2>ソース</h2>
<form id="codeform" action="./table-best.htm">
<h3>HTML</h3>
<textarea rows="10" cols="40">
&lt;table summary=&quot;テーブルで利用するタグの説明&quot; class=&quot;tblbasic&quot; id=&quot;taglist2&quot;&gt;
&lt;caption&gt;Table Tagリスト&lt;/caption&gt;
&lt;colgroup&gt;&lt;col class=&quot;tag&quot; /&gt;&lt;/colgroup&gt;
&lt;colgroup span=&quot;2&quot;&gt;&lt;col class=&quot;summary&quot; /&gt;&lt;col class=&quot;note&quot; /&gt;&lt;/colgroup&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th scope=&quot;col&quot;&gt;タグ&lt;/th&gt;
&lt;th scope=&quot;col&quot;&gt;説明&lt;/th&gt;
&lt;th scope=&quot;col&quot;&gt;注意点&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;th scope=&quot;row&quot;&gt;&amp;lt;table&amp;gt;&lt;/th&gt;
&lt;td&gt;テーブルの開始タグ&lt;/td&gt;
&lt;td&gt;summaryとcaptionは極力つける。class以外にIDも指定しておくとデータのアクセスに便利。&lt;/td&gt;
&lt;/tr&gt;
&lt;tr class=&quot;zb&quot;&gt;
&lt;th scope=&quot;row&quot;&gt;&amp;lt;caption&amp;gt;&lt;/th&gt;
&lt;td&gt;テーブルの脚注&lt;/td&gt;
&lt;td&gt;仕様上table要素の直下にしか書けない。&lt;br /&gt;このテーブルだと、「Table Tagリスト」部分。 &lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th scope=&quot;row&quot;&gt;&amp;lt;colgroup&amp;gt;&lt;/th&gt;
&lt;td&gt;カラムのグループを設定する。&lt;/td&gt;
&lt;td&gt;ほとんど使われないが、あるとアクセシビリティアップ&lt;/td&gt;
&lt;/tr&gt;
&lt;tr class=&quot;zb&quot;&gt;
&lt;th scope=&quot;row&quot;&gt;&amp;lt;col&amp;gt;&lt;/th&gt;
&lt;td&gt;カラム共通の設定を行う。&lt;/td&gt;
&lt;td&gt;あまり使われないが、あるとアクセシビリティアップ。&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th scope=&quot;row&quot;&gt;&amp;lt;thead&amp;gt;&lt;/th&gt;
&lt;td&gt;テーブルのヘッダ要素。&lt;/td&gt;
&lt;td&gt;このテーブルだと二重線の上。使うと便利。&lt;/td&gt;
&lt;/tr&gt;
&lt;tr class=&quot;zb&quot;&gt;
&lt;th scope=&quot;row&quot;&gt;&amp;lt;tfoot&amp;gt;&lt;/th&gt;
&lt;td&gt;テーブルのフッタ要素。&lt;/td&gt;
&lt;td&gt;仕様上&amp;lt;tbody&amp;gt;より上に書かなければならないが、古いブラウザだとそのまま上に表示されちゃうので、実際には&amp;lt;tbody&amp;gt;より下に書かれていることがある。&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th scope=&quot;row&quot;&gt;&amp;lt;tbody&amp;gt;&lt;/th&gt;
&lt;td&gt;テーブルのデータ部分。&lt;/td&gt;
&lt;td&gt;実データはここにおきましょう。&lt;/td&gt;
&lt;/tr&gt;
&lt;tr class=&quot;zb&quot;&gt;
&lt;th scope=&quot;row&quot;&gt;&amp;lt;tr&amp;gt;&lt;/th&gt;
&lt;td&gt;行を開始する。&lt;/td&gt;
&lt;td&gt;ゼブラ模様にするときは、これにクラスを割り振る。&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th scope=&quot;row&quot;&gt;&amp;lt;th&amp;gt;&lt;/th&gt;
&lt;td&gt;セル。データのタイトル。&lt;/td&gt;
&lt;td&gt;scope要素を使うと、アクセシビリティ上よい。&lt;/td&gt;
&lt;/tr&gt;
&lt;tr class=&quot;zb&quot;&gt;
&lt;th scope=&quot;row&quot;&gt;&amp;lt;td&amp;gt;&lt;/th&gt;
&lt;td&gt;セル。データを入れる。&lt;/td&gt;
&lt;td&gt;alignとwidthは非推奨なので使っちゃダメ。classで指定しましょう。nowrapはいまいちCSSでは思うようにいかないことがあるので、使っちゃうこともあるが本来はよろしくない。&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
</textarea>
<h3>CSS</h3>
<textarea rows="10" cols="40">table.tblbasic {
border:2px solid #999;
width:100%;
}
table.tblbasic caption {
text-align:right;
font-size:90%;
color:#666;
}
table.tblbasic col.summary {
width: 14em;
}
table.tblbasic th,
table.tblbasic td {
padding: 0.2em;
border: 1px solid #CCC;
}
table.tblbasic thead th {
background-color:#DDD;
border-bottom:3px double #999;
text-align:center;
}
table.tblbasic tbody th {
background-color:#EEE;
white-space:nowrap;
}
table.tblbasic thead th.gt {
border-bottom:none!important;
}
table.tblbasic tr.zb th {
background-color:#E9E9E9;
}
table.tblbasic tr.zb td {
background-color:#F9F9F9;
}
td.date { text-align:center!important; }
td.money { text-align:right!important; white-space:nowrap!important; }
span.up{ color:#336600;}
span.down{ color:#CC3300;}
</textarea>
</form>
</div>
<div class="section">
<h2>ヒント</h2>
<ul>
<li>&lt;tfoot&gt;は微妙なのでできれば使わない。</li>
<li>&lt;colgroup&gt;や&lt;th&gt;タグのscopeは音声ブラウザでのセルの読み上げ順序に関係する。アクセシビリティJISへの対応を考えるのであれば最初から考慮しておいたほうがよい。</li>
<li>空の&lt;td&gt;に&amp;nbsp;（半角空白）を入れると文字サイズ分の高さが発生するので本来はよろしくない。仕様上空はOKなので空にするか、&lt;td&gt;&lt;!-- --&gt;&lt;/td&gt; にする方法もある。</li>
<li>classを減らすのとセレクタ活用がCSS管理の鍵。そのためにもなるべくHTMLの構造を簡潔で綺麗にしておく。</li>
<li>表示崩れのトラブル解消はボックスモデルの理解が鍵になる。基本としてDoctypeスイッチと表示モードについて理解しておく。</li>
<li>widthの指定をしたら、borderとmargin、paddingを指定しないようにするとトラブル減少。</li>
</ul>
</div>
<div class="section">
<h2>リソース</h2>
<ul>
<li>[Web Kanzaki] <a href="http://www.kanzaki.com/docs/html/xhtml1.html">XHTMLの書き方と留意点</a></li>
<li>[Katsu氏] <a href="http://hp.vector.co.jp/authors/VA022006/css/">正しい知識を得たい人の爲のCSS2リファレンス</a></li>
<li>[W3C] <a href="http://www.w3.org/TR/xhtml1/">XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition)</a></li>
<li>[W3C] <a href="http://www.w3.org/TR/CSS21/">Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a></li>
</ul>
</div>
</div>
<div id="footer">
<address>2008年1月11日 伊藤俊輔</address>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment