データを並べて説明するためには表が欠かせません。エクセルで表を作ってスクリーンショットを画像として貼り付けるほうが簡単ですが、記事を読みにきてくれたユーザーが見やすいようにがんばって設定してみました。シンプルですけど。
基本
使うタグは table、tr、td です。tr が行、td が列を表し、これを table タグで囲みます。次のような表を作るとします。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <table> <tr> <td></td> <td>肉料理</td> <td>麺類</td> <td>ごはんもの</td> </tr> <tr> <td>イタリア料理</td> <td>カルパッチョ</td> <td>ニョッキ</td> <td>リゾット</td> </tr> <tr> <td>中華料理</td> <td>青椒肉絲</td> <td>炸醤麺</td> <td>天津丼</td> </tr> <tr> <td>スペイン料理</td> <td>ピンチョ・モルノ</td> <td>フィデウア</td> <td>パエリア</td> </tr> </table> |
このようになります。
罫線
当然、このままだと見づらいので罫線を設定するはずです。
1 2 3 4 5 6 7 8 | table { border-collapse: collapse; } td { border: 1px solid #ddd; padding: 0.5em; } |
このようになります。
table の CSS に指定した border-collapse はセルの罫線を重ねて表示するかどうかを設定するものです。separate を指定した場合、セルの罫線に間隔をあけて表示することができます。
1 2 3 4 5 6 7 8 9 | table { border: 1px solid #ff0000; border-collapse: separate; } td { border: 1px solid #ddd; padding: 0.5em; } |
こんなかんじです。
見出し
さらに見出しのデザインを装飾することで、よりユーザーにわかりやすい表を作成することができます。 th タグを使って見出しの文字を強調したり、背景色を付けることもできます。見出しにしたいセルを td から th に変更します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <table> <tr> <th></th> <th>肉料理</th> <th>麺類</th> <th>ごはんもの</th> </tr> <tr> <th>イタリア料理</th> <td>カルパッチョ</td> <td>ニョッキ</td> <td>リゾット</td> </tr> <tr> <th>中華料理</th> <td>青椒肉絲</td> <td>炸醤麺</td> <td>天津丼</td> </tr> <tr> <th>スペイン料理</th> <td>ピンチョ・モルノ</td> <td>フィデウア</td> <td>パエリア</td> </tr> </table> |
ついでに、text-align を指定して中央に表示されるように設定しました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | table { border-collapse: collapse; } th { border: 1px solid #ddd; padding: 0.5em; font-weight: bold; background-color: #eee; text-align: center; } td { border: 1px solid #ddd; padding: 0.5em; text-align: center; } |
このようになります。
補足：thead、tbody、tfoot
今回は使用しませんでしたが、thead、tbody、tfoot を使ってセルを行単位で分類することもできます。thead は表のヘッダー、tbody は表本体、tfoot は表のフッターです。thead と tfoot は table タグ間にひとつずつしか入れられず、tbody は複数配置できます。これらを使うとテーブルの文書構造がより明確になるだけでなく、まとめて CSS を設定できるので便利です。
例えば、今回の表の場合には次のようにできると思います。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <table> <thead> <tr> <th></th> <th>肉料理</th> <th>麺類</th> <th>ごはんもの</th> </tr> </thead> <tbody> <tr> <th>イタリア料理</th> <td>カルパッチョ</td> <td>ニョッキ</td> <td>リゾット</td> </tr> <tr> <th>中華料理</th> <td>青椒肉絲</td> <td>炸醤麺</td> <td>天津丼</td> </tr> <tr> <th>スペイン料理</th> <td>ピンチョ・モルノ</td> <td>フィデウア</td> <td>パエリア</td> </tr> </tbody> </table> |
ブログに貼ってみる
最後に本番の環境に貼り付けて微調整してみます。
中央に表示したい場合にはテーブルに width を指定した後、margin: 0 auto; を設定します。私が地味にハマったのが、margin-bottom の位置です。margin: 0 auto; より前に設定するとキャンセルされてしまうので注意してください。よく考えれば当たり前なのですが。
1 2 3 4 5 6 | table { border-collapse: collapse; width: 400px; margin: 0 auto; margin-bottom: 20px; } |
後は幅を好きな値に設定すれば完成です。
おつかれさまでした。
Comment