ブログにシンプルな表を作ってみる

 データを並べて説明するためには表が欠かせません。エクセルで表を作ってスクリーンショットを画像として貼り付けるほうが簡単ですが、記事を読みにきてくれたユーザーが見やすいようにがんばって設定してみました。シンプルですけど。

基本

 使うタグは table、tr、td です。tr が行、td が列を表し、これを table タグで囲みます。次のような表を作るとします。

このようになります。

20160915_1_1

罫線

 当然、このままだと見づらいので罫線を設定するはずです。

このようになります。

20160915_1_2

table の CSS に指定した border-collapse はセルの罫線を重ねて表示するかどうかを設定するものです。separate を指定した場合、セルの罫線に間隔をあけて表示することができます。

こんなかんじです。

20160915_1_3

見出し

 さらに見出しのデザインを装飾することで、よりユーザーにわかりやすい表を作成することができます。 th タグを使って見出しの文字を強調したり、背景色を付けることもできます。見出しにしたいセルを td から th に変更します。

ついでに、text-align を指定して中央に表示されるように設定しました。

このようになります。

20160915_1_4

補足:thead、tbody、tfoot

 今回は使用しませんでしたが、thead、tbody、tfoot を使ってセルを行単位で分類することもできます。thead は表のヘッダー、tbody は表本体、tfoot は表のフッターです。thead と tfoot は table タグ間にひとつずつしか入れられず、tbody は複数配置できます。これらを使うとテーブルの文書構造がより明確になるだけでなく、まとめて CSS を設定できるので便利です。

 例えば、今回の表の場合には次のようにできると思います。

ブログに貼ってみる

 最後に本番の環境に貼り付けて微調整してみます。

20160915_1_5

中央に表示したい場合にはテーブルに width を指定した後、margin: 0 auto; を設定します。私が地味にハマったのが、margin-bottom の位置です。margin: 0 auto; より前に設定するとキャンセルされてしまうので注意してください。よく考えれば当たり前なのですが。

後は幅を好きな値に設定すれば完成です。

20160915_1_6

おつかれさまでした。

「役に立った」と思ったら、記事のシェアをお願いします。

スポンサーリンク

Comment

コメント認証制です。反映されるまで時間が掛かる場合があります。
URLの記入はhttpのhを抜いて下さい(宣伝対策です)。
連続でコメントするとスパム扱いになる場合があります。
しばらく待ってからコメントしてください。

CAPTCHA


TOP