にしし ふぁくとりー(西村文宏 個人サイト)

Presented by Nishishi via Movable Type. Last Updated: 2015/09/22. 13:19:03.

表(table)の縦一列をCSSで一括センタリングしたり右寄せしたりする方法

HTMLで表組みを作ったとき、列単位(縦方向単位)でセル内の文字列の表示位置を調整したいことがあります。例えば、名称を書く列をセンタリングしたいとか、面積や料金など数値を書く列を右寄せしたいとか。

文字列の表示位置は、text-alignプロパティで設定できるわけですが、表組みの列(縦方向)のすべてのセルに対して一括してセンタリングしたり右寄せしたりするには、ちょっと工夫が必要ですよね。colgroup要素やcol要素を使えば良いような気もしますが、どうもそれらの要素にtext-alignプロパティを指定しても無効になる(無視される)ようで、文字位置は調整されません。背景色とかなら、その方法で付加できるんですが。(CSS2 - 17 Tables - 17.3 Columns

隣接セレクタを使って列を特定して、列単位でセンタリングや右寄せをする方法

CSSの「隣接セレクタ」を使って以下のような感じで記述すれば、列(縦方向)単位ですべてのセルの装飾を施せます。(横方向のセル数が多い表だと、何が何だか分からなくなりそうですが。^^;)

以下のようなCSS+HTMLソースで、列(縦方向)のすべてのセルに対して、一括してセンタリングや右寄せなどの文字表示位置の調整ができます。

■CSSソース:

<style type="text/css">
table { border-collapse: collapse; border: 2px solid black; }
th,td { border: 1px solid gray; padding: 0.3em; }

th { text-align: center; width: 50px; } /* 1列目 */
th + td { text-align: center; width: 90px; } /* 2列目 */
th + td + td { text-align: right; width: 75px; } /* 3列目 */
th + td + td + td { text-align: right; width: 80px; } /* 4列目 */
</style>

■HTMLソース:

<table>
<tr><th>順位</th><th>市名</th><th>人口</th><th>面積</th></tr>
<tr><th>1位</th><td>神戸市</td><td>154万人</td><td>552km&sup2;</td></tr>
<tr><th>2位</th><td>姫路市</td><td>54万人</td><td>534km&sup2;</td></tr>
<tr><th>3位</th><td>西宮市</td><td>48万人</td><td>100km&sup2;</td></tr>
<tr><th>4位</th><td>尼崎市</td><td>45万人</td><td>50km&sup2;</td></tr>
<tr><th>5位</th><td>明石市</td><td>29万人</td><td>49km&sup2;</td></tr>
</table>

上記のソースを表示させると、以下のように見えます。

順位市名人口面積
1位神戸市154万人552km²
2位姫路市54万人534km²
3位西宮市48万人100km²
4位尼崎市45万人50km²
5位明石市29万人49km²

上記のHTMLソースでは、4列×6行の表を作っています。
CSSソースでは、隣接セレクタを使って「何番目の列なのか」を特定しています。
その結果、各列は、

  • 1列目( th )は、横幅50pxでセンタリング
  • 2列目( th + td )は、横幅90pxでセンタリング
  • 3列目( th + td + td )は、横幅75pxで右寄せ
  • 4列目( th + td + td + td )は、横幅80pxで右寄せ

のように表示されます。(IE6以下は「隣接セレクタ」に対応していないので、上記の指定ようには見えませんが。^^;;;)

※CSSでセレクタに「+」記号を使って「A + B」のように記述すると、「AとBが隣り合っている場合のBに対してのみ適用する」という意味になります。詳しくは、「隣接セレクタ」でリファレンスを調べてみて下さい。(^_^;)
1列目には特に隣接セレクタは使っていませんけども。(^_^;)

コメント

コメント数: 0件

コメント投稿欄 この日記に対するコメント投稿を歓迎します。

保存しますか?



※本文中にURLは書けません。(書くと投稿が拒否されますのでご注意下さい。)

※投稿内容は、実際にページ上に掲載される前に、管理者によって確認される設定にしている場合があります。その場合は、投稿後にその旨が表示されます。たいてい1~2日以内には表示されるはずですので、気長にお待ち願います。m(_ _)m

トラックバック

このエントリーへのトラックバックURLを表示するにはここをクリック
※スパム防止のため、トラックバックURLは別ウインドウで表示します。(JavaScriptが有効でないと表示されません。)

--- 当サイト内を検索 ---