表の1列だけをCSSを使って右揃えにするには？

Question

XHTMLとCSSを使ってホームページを作成中の初心者です。表の中のデータを中央揃えにするのですが、ある1つの列の文字だけは全て右揃えにしたいのです。 A-1　　B-1　　C-1 A-2　　B-2　　C-2 A-3　　B-3　　C-3 という表があったとすると、この中の「C-1、C-2、C-3」は右揃え、他の部分は中央揃えにしたいのです。もし、表の中のデータ全てを中央揃えにするのであれば、ソース部分は

A-1	B-1	C-1
A-2	B-2	C-2
A-3	B-3	C-3

のような感じで、CSS部分は table.test td {text-align: center} というようにすればよいかと思います。また、個別に指定するのであれば、ソース部分は A-1B-1C-1 A-2B-2C-2 A-3B-3C-3 のような感じで、CSS部分は td.c {text-align: center} td.r {text-align: right} でも良いかと思います。ただ、データの量が多く、全てのセルに対して等の指定をすることは非常に大変です。列ごとに横幅の指定をするときなどはCSS部分で colgroup#test-c {width: 20px} 等のようにすると思いますが、例えば、この colgroup#test-c 等を利用してCの列は右揃え、他の列は中央揃えにする方法をご教示お願いします。

DrFell · Accepted Answer

なぜ、1つだけ右なのでしょう？他となぜちがうのか？と考えると、例えば、中央揃えは品番や色、右揃えは値段かな？と想像して、中央揃えは品番や色はtableのhead、<th>、値段はtableのdata<td>と考えると、マークアップは

ｃｓｓ
.test *{width:5em;background:#ffcccc;}/*確認しやすいためのおまけ*/
.test th{font-weight:100;text-align:center;}
.test td{text-align:right;}

ｈｔｍｌ
<table class="test">
<tbody>
<tr><th>A-1</th><th>B-1</th><td>C-1</td></tr>
<tr><th>A-2</th><th>B-2</th><td>C-2</td></tr>
<tr><th>A-3</th><th>B-3</th><td>C-3</td></tr>
</tbody>
</table>

のようになります。

A-1	B-1	C-1
A-2	B-2	C-2
A-3	B-3	C-3

のようになります。

ORUKA1951 · Answer

方法にベストはないでしょう。様々な条件からベターなものを決めるしかありません。・tdにいちいちclass名をつけるのは厄介　(これは悪い方法ではない。本来はclass="price"など意味のあるものを付ける) 　その上で、「colgroup,colに対するスタイルを処理できるブラウザはほとんどない」という現状を考えると、colgroup,colは使えません。(colは構造化マークアップではないので、もともと使えない) ★表の最初の部分以外は手を付けないを最優先として対処を考えると　CSS2の隣接セレクタを使って指定するのが良いでしょう。その場合古いＩＥ５，ＩＥ６は無視せざるを得ない。　そのかわり、IE7以降と限定することで、擬似要素、擬似クラスも使えるのでHTMLにはまったく手を付けないで、期待の表示をさせることもできる。サンプル参照 ★対応ブラウザを多くしたいを最優先とするなら、CSS1でデザインすることになります。　そのためには、　ＡＢＣＤＥＦＧ\1,200- 　とマークアップするのが良いでしょう。その場合、高機能なテキストエディタがあるとExcelなどから出力したCSVファイルから数回の置換作業でTABLEにできるでしょう。 ★ちなみに、もっとも楽なのは、XMLからXSLTをつかってHTMLを出力させること。［サンプル]ＩＥ7以降 ★CSSはXHTMLでは本体に書くべきではないので別フィルにすること★ ★＿はタブに置換すること★ ★The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input ) 　W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) 　Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ＿＿サンプル＿＿＿＿＿

サンプル

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

製品名	説明	価格
name	data	\1,000
name	data	\1,200
name	data	\1,500
name	data	\1,600
name	data	\2,000
name	data	\1,000
name	data	\1,200
name	data	\1,500
name	data	\1,600
name	data	\2,000
name	data	\1,000

naokita · Answer

#2のddが間違っていますからね・・・ ---------------- col や colgroup を使った align や valign は、ブラウザによって挙動が違うからCSSで統一できません。ただ、基本的なCSSは、他の全てが、center なら class="c" は不要でしょう。少しは単純化出来ます。も必要ですか？

A-1	B-1	C-1
A-2	B-2	C-2
A-3	B-3	C-3

　C列を

などでブロック化して、 table{ text-align: center;} td p{ margin:0; padding:0; text-align: right;} って方法もあるけど。

A-1	B-1	C-1
A-2	B-2	C-2
A-3	B-3	C-3

ORUKA1951 · Answer

<thead>を使っているのは、大きな表の場合に印刷すると各ページに項目が印刷されるからです。
　大きな表の場合、次のようなCSSも加えておくと見やすくなります。
table.price_table tr+tr,
table.price_table tr+tr+tr+tr,
table.price_table tr+tr+tr+tr+tr+tr,
table.price_table tr+tr+tr+tr+tr+tr+tr+tr,
table.price_table tr+tr+tr+tr+tr+tr+tr+tr+tr+tr,
table.price_table tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr,
table.price_table tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr{
background-color:rgb(220,220,220);
}
table.price_table tr+tr+tr,
table.price_table tr+tr+tr+tr+tr,
table.price_table tr+tr+tr+tr+tr+tr+tr,
table.price_table tr+tr+tr+tr+tr+tr+tr+tr+tr,
table.price_table tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr,
table.price_table tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr,
table.price_table tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr{
background-color:white;
}

ORUKA1951 · Answer

　HTML4の仕様では、colgroupは構造化のはずなので、スタイルシートで様々に使えるはずですが、現時点でcorgroupに対してスタイルシートが有効なのは、background-colorやcolor位で、text-alignに対応しているブラウザはほとんどありません。　よって、IE6,7を無視すると下記のCSSで良いはずです。(一部HTMLを間違えていました。) ★タブインデントは＿(全角)に置換してあります。＿＿サンプル＿＿＿＿＿＿

サンプル

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

A	B	価格
data	data	\1,000
data	data	\1,200
data	data	\1,500
data	data	\1,600
data	data	\2,000

table.price_table td+td+td{}は、隣接セレクタ ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html#adjacent-selectors ) で、兄に最低２つのtdをもつtdを指定するセレクタです。(IE7以降対応) table.price_table td+td+td+td{}はもし４番目の列を追加したときに、それにも適用されたらまずいので指定してあります。

ORUKA1951 · Answer

間違い・・の下位にcolgroupは置けない。またFirefoxではうまくいかないようだとりあえず table.price_table dd+dd+dd{text-align:right;} で逃げておいてください。念のため table.price_table dd+dd+dd+td{text-align:center;} も、追加しておいてね。ちょっと方策を考えてみる。まあ、高機能テキストエディタで (.*?)$ 　　置換→　　\1 が普通の方法かも。少なくとも私はそうしている。　class名は後でのことも考えると、ちゃんとした意味のあるものを付けましょう。

ORUKA1951 · Answer

サンプル

A	B	価格
data	data	\1,000
data	data	\1,200
data	data	\1,500
data	data	\1,600
data	data	\2,000

colgrpupを使わないときは table_price_table td+td+td{text-align:right;} でも良い。ただしIE6以前は不可・・・

表の1列だけをCSSを使って右揃えにするには？

なぜ、1つだけ右なのでしょう？他となぜちがうのか？と考えると、例えば、中央揃えは品番や色、右揃えは値段かな？と想像して、中央揃えは品番や色はtableのhead、<th>、値段はtableのdata<td>と考えると、マークアップは

方法にベストはないでしょう。

#2のddが間違っていますからね・・・

<thead>を使っているのは、大きな表の場合に印刷すると各ページに項目が印刷されるからです。

間違い・・

この回答への補足

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "

似たような質問が見つかりました

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

　<thead>を使っているのは、大きな表の場合に印刷すると各ページに項目が印刷されるからです。