»
Contents
- 元テーブル(
HTML タグのみ) - 例
2 : 全セルにシンプルな罫線を付ける - 例
3 : 横罫線だけにする - 例4 : 横罫線を、ヘッダとテーブル下端だけにする(CSS
3 疑似クラスを使用) - 例
5 : 横罫線のスタイルを少し変える( 〃 ) - 例
6 : 横罫線とデータ行の間隔を調整( 〃 ) - 例
7 : 特定の列だけスタイルを変える( 〃 )
元テーブル( HTML タグのみ)
昨日と同じデータを使い、TR、TH、TD<!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>
以下、この
例 2 : 全セルにシンプルな罫線を付ける
テーブル全体を<!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 : 横罫線だけにする
上の例の<!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 : 横罫線を、ヘッダとテーブル下端だけにする
このへんから少し論文風この「最後の
<!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<!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 : 横罫線とデータ行の間隔を調整
だいたい整いましたが、データ先頭行と上の罫線、またデータ最終行と下の罫線との近さが気になるので、間隔を空けます(上との違いを分かりやすくするため、間隔を多めにした)。データ先頭行は<!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+■)という記述を使用。今回は列数が<!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>
以上のように、元データに一切触れず
この記事を書いてて最後に気付いたこと。特定の列にスタイルを当てる際、TR