昨日(タブ区別りテキストをHTMLテーブルに変換するJavaScript)の補足で、横罫線だけの論文風?テーブルをHTMLCSSで作った手順のメモ。途中からCSS3の疑似クラスのlast-childnth-childも使用。「擬似」が正しい漢字かもしれないけど、今回参照した ↓ のように「疑似」表記も多いです。実行環境はWindows7 32bit + Firefox38。
»Mozilla Developer Network :疑似クラス(Pseudo-classes)
Contents


元テーブル(HTMLタグのみ)
昨日と同じデータを使い、TR、TH、TDタグで「データ構造」だけを表したもの ↓ です。HTMLの下が実際の表示(インラインフレーム)。ブラウザのデフォルトスタイルによって結果が違いますが、Firefox38では罫線がなくヘッダが太字になるだけ。
<!DOCTYPE html><head><meta charset="UTF-8">
</head><body><table>
<tr><th>ymd<th>h24<th>browser<th>browser_version<th>page_title<th>page_views
<tr><td>2015-01-01<td>0<td>Internet Explorer<td>11.0<td>COPY コマンドから ExifTool を使う<td>1
<tr><td>2015-01-01<td>0<td>Chrome<td>39.0.2171.95<td>Qt による PostgreSQL & R 兼用クライアント(1)<td>1
<tr><td>2015-01-01<td>0<td>Chrome<td>39.0.2171.95<td>Qt アプリ : PostgreSQL むけ簡易 SQL クライアント<td>1
<tr><td>2015-01-01<td>1<td>Chrome<td>39.0.2171.95<td>Haswell マザーの XP ドライバ<td>2
<tr><td>2015-01-01<td>2<td>Safari<td>8.0<td>Haswell マザーの XP ドライバ<td>1
<tr><td>2015-01-01<td>3<td>Firefox<td>34.0<td>読書 : Accessによる統計データベース入門<td>1
<tr><td>2015-01-01<td>4<td>Chrome<td>39.0.2171.95<td>Word 2007 でラベル付き矢印(2)<td>1
<tr><td>2015-01-01<td>4<td>Internet Explorer<td>11.0<td>oCam で PC 画面を録画<td>1
<tr><td>2015-01-01<td>4<td>Safari<td>8.0<td>Avidemux で FLV を編集<td>1
<tr><td>2015-01-01<td>4<td>Chrome<td>39.0.2171.95<td>東芝 R732 : SSD アライメント調整後<td>1
</table>
</body></html>


以下、このHTML本体(BODY)は変えず、先頭(HEAD)にCSSSTYLEタグを付けることでHTMLテーブルの外観を段階的に変更。ブラウザの幅が狭いとテーブルの折り返しが多くなって見にくいかも。テーブルは全てインラインフレームなので、別窓でも開けます。


2 :全セルにシンプルな罫線を付ける
テーブル全体をborder-collapse: collapseにし、TH・TDタグ共通のborderスタイルを設定するだけ。
<!DOCTYPE html><head><meta charset="UTF-8">
<style><!--
    table {
        border-collapse: collapse;
        font-size: 12px;
    }
    th, td {
        border: solid 1px gray;
    }
--></style>
</head><body><table>
<tr><th>ymd<th>h24<th>browser<th>browser_version<th>page_title<th>page_views
<tr><td>2015-01-01<td>0<td>Internet Explorer<td>11.0<td>COPY コマンドから ExifTool を使う<td>1
<tr><td>2015-01-01<td>0<td>Chrome<td>39.0.2171.95<td>Qt による PostgreSQL & R 兼用クライアント(1)<td>1
<tr><td>2015-01-01<td>0<td>Chrome<td>39.0.2171.95<td>Qt アプリ : PostgreSQL むけ簡易 SQL クライアント<td>1
<tr><td>2015-01-01<td>1<td>Chrome<td>39.0.2171.95<td>Haswell マザーの XP ドライバ<td>2
<tr><td>2015-01-01<td>2<td>Safari<td>8.0<td>Haswell マザーの XP ドライバ<td>1
<tr><td>2015-01-01<td>3<td>Firefox<td>34.0<td>読書 : Accessによる統計データベース入門<td>1
<tr><td>2015-01-01<td>4<td>Chrome<td>39.0.2171.95<td>Word 2007 でラベル付き矢印(2)<td>1
<tr><td>2015-01-01<td>4<td>Internet Explorer<td>11.0<td>oCam で PC 画面を録画<td>1
<tr><td>2015-01-01<td>4<td>Safari<td>8.0<td>Avidemux で FLV を編集<td>1
<tr><td>2015-01-01<td>4<td>Chrome<td>39.0.2171.95<td>東芝 R732 : SSD アライメント調整後<td>1
</table>
</body></html>

3 :横罫線だけにする
上の例のTH・TDTRタグに変え、罫線スタイルを色・形・線幅に分け、縦方向の線幅をゼロに設定。
<!DOCTYPE html><head><meta charset="UTF-8">
<style><!--
    table {
        border-collapse: collapse;
        font-size: 12px;
    }
    tr {
        border-color: gray;
        border-style: solid;
        border-width: 1px 0;
    }
--></style>
</head><body><table>
<tr><th>ymd<th>h24<th>browser<th>browser_version<th>page_title<th>page_views
<tr><td>2015-01-01<td>0<td>Internet Explorer<td>11.0<td>COPY コマンドから ExifTool を使う<td>1
<tr><td>2015-01-01<td>0<td>Chrome<td>39.0.2171.95<td>Qt による PostgreSQL & R 兼用クライアント(1)<td>1
<tr><td>2015-01-01<td>0<td>Chrome<td>39.0.2171.95<td>Qt アプリ : PostgreSQL むけ簡易 SQL クライアント<td>1
<tr><td>2015-01-01<td>1<td>Chrome<td>39.0.2171.95<td>Haswell マザーの XP ドライバ<td>2
<tr><td>2015-01-01<td>2<td>Safari<td>8.0<td>Haswell マザーの XP ドライバ<td>1
<tr><td>2015-01-01<td>3<td>Firefox<td>34.0<td>読書 : Accessによる統計データベース入門<td>1
<tr><td>2015-01-01<td>4<td>Chrome<td>39.0.2171.95<td>Word 2007 でラベル付き矢印(2)<td>1
<tr><td>2015-01-01<td>4<td>Internet Explorer<td>11.0<td>oCam で PC 画面を録画<td>1
<tr><td>2015-01-01<td>4<td>Safari<td>8.0<td>Avidemux で FLV を編集<td>1
<tr><td>2015-01-01<td>4<td>Chrome<td>39.0.2171.95<td>東芝 R732 : SSD アライメント調整後<td>1
</table>
</body></html>

4 :横罫線を、ヘッダとテーブル下端だけにする
このへんから少し論文風? 横罫線を、ヘッダの上下およびテーブル下端だけに。データ部分の行間を空けないと見にくいけど、とりあえずここでは線スタイルだけ変えます。TH・TR共通のスタイルを記述した上で(線幅はゼロに。これを忘れると結果が変)、THに上下の線幅を、最後のTRに下だけの線幅を設定。

この「最後のTR」を指定するのに、CSS
3の疑似クラスからlast-childを使用。今回参照したMozilla Developer Networkには載ってませんが、少なくともFirefox38ではnth-last-child(1)と同じ働きをするようです。
<!DOCTYPE html><head><meta charset="UTF-8">
<style><!--
    table {
        border-collapse: collapse;
        font-size: 12px;
    }
    th, tr {
        border: solid gray 0;
    }
    th {
        border-width: 1px 0;
    }
    tr:last-child {
        border-width: 0 0 1px;
    }
--></style>
</head><body><table>
<tr><th>ymd<th>h24<th>browser<th>browser_version<th>page_title<th>page_views
<tr><td>2015-01-01<td>0<td>Internet Explorer<td>11.0<td>COPY コマンドから ExifTool を使う<td>1
<tr><td>2015-01-01<td>0<td>Chrome<td>39.0.2171.95<td>Qt による PostgreSQL & R 兼用クライアント(1)<td>1
<tr><td>2015-01-01<td>0<td>Chrome<td>39.0.2171.95<td>Qt アプリ : PostgreSQL むけ簡易 SQL クライアント<td>1
<tr><td>2015-01-01<td>1<td>Chrome<td>39.0.2171.95<td>Haswell マザーの XP ドライバ<td>2
<tr><td>2015-01-01<td>2<td>Safari<td>8.0<td>Haswell マザーの XP ドライバ<td>1
<tr><td>2015-01-01<td>3<td>Firefox<td>34.0<td>読書 : Accessによる統計データベース入門<td>1
<tr><td>2015-01-01<td>4<td>Chrome<td>39.0.2171.95<td>Word 2007 でラベル付き矢印(2)<td>1
<tr><td>2015-01-01<td>4<td>Internet Explorer<td>11.0<td>oCam で PC 画面を録画<td>1
<tr><td>2015-01-01<td>4<td>Safari<td>8.0<td>Avidemux で FLV を編集<td>1
<tr><td>2015-01-01<td>4<td>Chrome<td>39.0.2171.95<td>東芝 R732 : SSD アライメント調整後<td>1
</table>
</body></html>

5 :横罫線のスタイルを少し変える
上でやり残したデータ部の行間を空け(実際はセル内の上下パディングを設定)、テーブル上下は太い線、ヘッダとデータの間は細い二重線にして整えました。THタグなど、このへんから記述が少し増えます。なおIE10では、二重線の内部に色が塗られる変な結果になりました。
<!DOCTYPE html><head><meta charset="UTF-8">
<style><!--
    table {
        border-collapse: collapse;
        font-size: 12px;
    }
    th, tr, td {
        border: solid gray 0;
    }
    th {
        border-top-width: 2px;
        border-bottom-style: double;
        border-bottom-width: 4px;
        padding: 5px 0;
    }
    td {
        padding: 3px 0;
    }
    tr:last-child {
        border-width: 0 0 2px;
    }
--></style>
</head><body><table>
<tr><th>ymd<th>h24<th>browser<th>browser_version<th>page_title<th>page_views
<tr><td>2015-01-01<td>0<td>Internet Explorer<td>11.0<td>COPY コマンドから ExifTool を使う<td>1
<tr><td>2015-01-01<td>0<td>Chrome<td>39.0.2171.95<td>Qt による PostgreSQL & R 兼用クライアント(1)<td>1
<tr><td>2015-01-01<td>0<td>Chrome<td>39.0.2171.95<td>Qt アプリ : PostgreSQL むけ簡易 SQL クライアント<td>1
<tr><td>2015-01-01<td>1<td>Chrome<td>39.0.2171.95<td>Haswell マザーの XP ドライバ<td>2
<tr><td>2015-01-01<td>2<td>Safari<td>8.0<td>Haswell マザーの XP ドライバ<td>1
<tr><td>2015-01-01<td>3<td>Firefox<td>34.0<td>読書 : Accessによる統計データベース入門<td>1
<tr><td>2015-01-01<td>4<td>Chrome<td>39.0.2171.95<td>Word 2007 でラベル付き矢印(2)<td>1
<tr><td>2015-01-01<td>4<td>Internet Explorer<td>11.0<td>oCam で PC 画面を録画<td>1
<tr><td>2015-01-01<td>4<td>Safari<td>8.0<td>Avidemux で FLV を編集<td>1
<tr><td>2015-01-01<td>4<td>Chrome<td>39.0.2171.95<td>東芝 R732 : SSD アライメント調整後<td>1
</table>
</body></html>

6 :横罫線とデータ行の間隔を調整
だいたい整いましたが、データ先頭行と上の罫線、またデータ最終行と下の罫線との近さが気になるので、間隔を空けます(上との違いを分かりやすくするため、間隔を多めにした)。データ先頭行はTR要素の2番目に当たり、CSS3の疑似クラスのうちnth-childを使用。特定の行の各セルにパディングを設定する際、TR直下の全TD要素を「tr:疑似クラス > td」で抽出します。
<!DOCTYPE html><head><meta charset="UTF-8">
<style><!--
    table {
        border-collapse: collapse;
        font-size: 12px;
    }
    th, tr, td {
        border: solid gray 0;
    }
    th {
        border-top-width: 2px;
        border-bottom-style: double;
        border-bottom-width: 4px;
        padding: 5px 0;
    }
    td {
        padding: 2px 0;
    }
    tr:nth-child(2) > td {
        padding-top: 10px;
    }
    tr:last-child > td {
        padding-bottom: 10px;
        border-width: 0 0 2px;
    }
--></style>
</head><body><table>
<tr><th>ymd<th>h24<th>browser<th>browser_version<th>page_title<th>page_views
<tr><td>2015-01-01<td>0<td>Internet Explorer<td>11.0<td>COPY コマンドから ExifTool を使う<td>1
<tr><td>2015-01-01<td>0<td>Chrome<td>39.0.2171.95<td>Qt による PostgreSQL & R 兼用クライアント(1)<td>1
<tr><td>2015-01-01<td>0<td>Chrome<td>39.0.2171.95<td>Qt アプリ : PostgreSQL むけ簡易 SQL クライアント<td>1
<tr><td>2015-01-01<td>1<td>Chrome<td>39.0.2171.95<td>Haswell マザーの XP ドライバ<td>2
<tr><td>2015-01-01<td>2<td>Safari<td>8.0<td>Haswell マザーの XP ドライバ<td>1
<tr><td>2015-01-01<td>3<td>Firefox<td>34.0<td>読書 : Accessによる統計データベース入門<td>1
<tr><td>2015-01-01<td>4<td>Chrome<td>39.0.2171.95<td>Word 2007 でラベル付き矢印(2)<td>1
<tr><td>2015-01-01<td>4<td>Internet Explorer<td>11.0<td>oCam で PC 画面を録画<td>1
<tr><td>2015-01-01<td>4<td>Safari<td>8.0<td>Avidemux で FLV を編集<td>1
<tr><td>2015-01-01<td>4<td>Chrome<td>39.0.2171.95<td>東芝 R732 : SSD アライメント調整後<td>1
</table>
</body></html>

7 :特定の列だけスタイルを変える
これで最後。今まで行(縦)方向の空きだけ調整しましたが、列(横)方向にも間隔を空けます。また数字一桁の列のみ、中央揃えに。この「特定の列」だけスタイル設定する際、nth-child(■n+■)という記述を使用。今回は列数が6で、左から2番目の列および最右列を中央揃えにするので、カッコ内は(6n+2)、(6n)。分かりやすいよう文字の色と太さも変えました。
<!DOCTYPE html><head><meta charset="UTF-8">
<style><!--
    table {
        border-collapse: collapse;
        font-size: 12px;
    }
    th, tr, td {
        border: solid gray 0;
    }
    th {
        border-top-width: 2px;
        border-bottom-style: double;
        border-bottom-width: 4px;
        padding: 5px;
    }
    td {
        padding: 2px 5px;
    }
    tr:nth-child(2) > td {
        padding-top: 10px;
    }
    tr:last-child > td {
        padding-bottom: 10px;
        border-width: 0 0 2px;
    }
    td:nth-child(6n+2) {
        color: red;
        text-align: center;
    }
    td:nth-child(6n) {
        font-weight: bold;
        text-align: center;
    }
--></style>
</head><body><table>
<tr><th>ymd<th>h24<th>browser<th>browser_version<th>page_title<th>page_views
<tr><td>2015-01-01<td>0<td>Internet Explorer<td>11.0<td>COPY コマンドから ExifTool を使う<td>1
<tr><td>2015-01-01<td>0<td>Chrome<td>39.0.2171.95<td>Qt による PostgreSQL & R 兼用クライアント(1)<td>1
<tr><td>2015-01-01<td>0<td>Chrome<td>39.0.2171.95<td>Qt アプリ : PostgreSQL むけ簡易 SQL クライアント<td>1
<tr><td>2015-01-01<td>1<td>Chrome<td>39.0.2171.95<td>Haswell マザーの XP ドライバ<td>2
<tr><td>2015-01-01<td>2<td>Safari<td>8.0<td>Haswell マザーの XP ドライバ<td>1
<tr><td>2015-01-01<td>3<td>Firefox<td>34.0<td>読書 : Accessによる統計データベース入門<td>1
<tr><td>2015-01-01<td>4<td>Chrome<td>39.0.2171.95<td>Word 2007 でラベル付き矢印(2)<td>1
<tr><td>2015-01-01<td>4<td>Internet Explorer<td>11.0<td>oCam で PC 画面を録画<td>1
<tr><td>2015-01-01<td>4<td>Safari<td>8.0<td>Avidemux で FLV を編集<td>1
<tr><td>2015-01-01<td>4<td>Chrome<td>39.0.2171.95<td>東芝 R732 : SSD アライメント調整後<td>1
</table>
</body></html>

以上のように、元データに一切触れずCSSだけで細かいスタイル調整が可能。今回は省きましたが、各行の高さを揃えるならTD要素にheightまたはmin-height属性を使えばOK。

この記事を書いてて最後に気付いたこと。特定の列にスタイルを当てる際、TR要素ごとに「子要素TDのうち■番目」を指定すれば、つまり
trtd:nth-child(■)で、全体の列数を知ることなく単純に「左から■列目」を指定できるかも。そのうち試します。