table要素の縦列であるcol要素をデータの種類ごとにまとめてcssを指定して表を見やすくします。
問題点：ブラウザごとにcss指定の解釈の違いがはっきり出る要素です。バックグランドの色指定だけは、ほぼ共通で使えそうです。ブラウザごとに差が出るcssは、padding、width、text-align、color、font-weightなど。
下のtableは、colgroupごとにtext-alignをleft、center、rightと3種類指定していますが、MacのSafari4、Firefox3.6で見ると、すべてleftになってしまいます。Windows IEはtext-alignを3種類表示できます。
●サンプル8
| 年月日 |
数値01 |
数値02 |
数値03 |
地名01 |
地名02 |
| 2012-03-26 |
2365 |
4792 |
12554 |
東京都 |
中野区 |
| 2012-02-20 |
6659 |
12478 |
25866 |
東京都 |
新宿区 |
| 2012-01-18 |
10020 |
6989 |
45778 |
神奈川県 |
横浜市 |
| 2011-12-16 |
99687 |
25566 |
20336 |
千葉県 |
千葉市 |
| 2011-11-10 |
336655 |
102030 |
26699 |
埼玉県 |
草加市 |
| 2011-10-05 |
20099 |
200556 |
2351 |
長野県 |
松本市 |
サンプル8のtableのソース
<table class="main-t" width="560" cellspacing="2" cellpadding="0">
<colgroup span="1" class="gcol01"></colgroup>
<colgroup span="3" class="gcol02"></colgroup>
<colgroup span="2" class="gcol03"></colgroup>
サンプル8のcssのソース
.gcol01 { background: #fff999; text-align: center;}
.gcol02 { background: #dffcb1; text-align: right;}
.gcol03 { background: #b1fcec; text-align: left;}
:after擬似要素を利用して、floatを解除するclearfix。
子要素にfloatを利用すると、親要素の高さがなくなってしまいます。→関連ページ
下の例では、親要素（青紫の地）の高さが無くなり、「float:left;」した3つの画像が下にはみ出ています。
●サンプル9
clearせずに、後に続く文字
これを修正する方法の一つに「clearfix」があります。「clearfix」はプロパティやセレクターの名称ではなく、:after擬似要素を利用したテクニックの名称です。この場合は、画像の親要素のdivに「class="clearfix"」を指定します。
:after擬似要素は、要素の直後に内容を挿入する際に使用するもので、必ずcontent:"追加内容"が必要です。
clearせずに、後に続く文字
「clearfix」のcssソース
.clearfix:after
{content:""; display:block; clear:both;}
html・画像の親要素のcss指定ソース
<div id="testwrapp01" class="clearfix">
<img ・・・> <img ・・・> <img ・・・></div>
tableで、セルに連続した半角英数字が入る場合、勝手に広がってしまうのを折り返しで防ぐ
URLなど連続した長い半角英数字が入る場合、一つの単語と見なされるらしく、thやtdにwidthを指定しているにも関わらず、勝手にセルの幅を広げてしまいます。下の例1では、すべてのthで幅を140pxに指定していますが、広がってしまいます。
●（例1）サンプル10
| width140 |
width140 |
width140 |
width140 |
| width140ダミーテキスト |
width140abcdefghijklmnopwqstuvwxyz |
width140ダミーテキスト |
width140ダミーテキスト |
| ダミーテキスト |
width140abcdefghijklmnopwqstuvwxyz |
ダミーテキスト |
ダミーテキスト |
これに対処するためまず、140pxのセル幅をブラウザに強制します。tableに指定しているcssに次の要素を加えることでセル幅は直ります。ただこのままでは、overflowプロパティのデフォルトが"visible"なので、下の（例2）のように内容がはみ出してしまいます。比較のため、overflow:autoを問題のセルの下のtdに加えてありますので、スクロールバーが出ているはずです（Google ChromやSafariの場合。IE9では、両方ともoverflow:hiddenと同じに、Firefox10では、両方ともoverflow:visibleと同じになります）。いずれにしても、overflowプロパティでは、きれいに折り返すことはできません。
table-layout: fixed;
●（例2）サンプル11
| width140 |
width140 |
width140 |
width140 |
| width140ダミーテキスト |
width140abcdefghijklmnopwqstuvwxyz |
width140ダミーテキスト |
width140ダミーテキスト |
| ダミーテキスト |
width140abcdefghijklmnopwqstuvwxyz |
ダミーテキスト |
ダミーテキスト |
次に内容が飛び出すtd部分に、overflowプロパティの代わりに、word-wrapプロパティを加えます。これできれいに折り返すことができます（例3）。word-wrapプロパティは、Internet Explorerが独自に採用したものですが、他のブラウザでも利用できます。
word-wrap: break-word;
●（例3）サンプル12
| width140 |
width140 |
width140 |
width140 |
| width140ダミーテキスト |
width140abcdefghijklmnopwqstuvwxyz |
width140ダミーテキスト |
width140ダミーテキスト |
| ダミーテキスト |
width140abcdefghijklmnopwqstuvwxyz |
ダミーテキスト |
ダミーテキスト |
「abbr」タグと:after疑似要素を使って、title値をhoverでツールチップのように表示
abbr（Abbreviation：省略、略語）：このタグに囲まれた語句は略語や頭字語であることを示します。
このabbrタグと:after疑似要素を使って、略語の元の語句をツールチップのように表示します。「サンプル13」の右側に赤いアスタリスク付きの略語が対象で、マウスオーバーするとtitle値を表示します。IE7以前は非対応です。
●サンプル13
「
HTML5は、
WHATWGによって2004年に定められ、
W3Cにより2008年1月22日にドラフト（草案）が発表されました。
HTML4.01で非推奨だった font要素やcenter要素など、
CSSで実現できるマークアップはすべて廃止されます。また、acronym要素も廃止され、
abbr要素に一本化されます。
」
CSS
abbr.help01:after {
margin: auto 4px; font-size: 1em; color:red; content: "*"; }
abbr.help01:hover:after {
padding: 3px 5px; olor: #555555; border: 2px solid #b41315; content: attr(title) " の略語"; background: #ccffcc; }
