「みんな教えて! 選手権!!」開催のお知らせ

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

解決済

  • 質問者：mapooo
  • 質問日時：
  • 回答数：7件

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」は右揃え、他の部分は中央揃えにしたいのです。

もし、表の中のデータ全てを中央揃えにするのであれば、ソース部分は

<table class="test">
<colgroup span="1" id="test-a"></colgroup>
<colgroup span="1" id="test-b"></colgroup>
<colgroup span="1" id="test-c"></colgroup>

<tbody>
<tr><td>A-1</td><td>B-1</td><td>C-1</td></tr>
<tr><td>A-2</td><td>B-2</td><td>C-2</td></tr>
<tr><td>A-3</td><td>B-3</td><td>C-3</td></tr>
</tbody>
</table>

のような感じで、CSS部分は

table.test td {text-align: center}

というようにすればよいかと思います。

また、個別に指定するのであれば、ソース部分は

<tbody>
<tr><td class="c">A-1</td><td class="c">B-1</td><td class="r">C-1</td></tr>
<tr><td class="c">A-2</td><td class="c">B-2</td><td class="r">C-2</td></tr>
<tr><td class="c">A-3</td><td class="c">B-3</td><td class="r">C-3</td></tr>
</tbody>

のような感じで、CSS部分は

td.c {text-align: center}
td.r {text-align: right}

でも良いかと思います。

ただ、データの量が多く、全てのセルに対して
<td class="c">
<td class="r">
等の指定をすることは非常に大変です。

列ごとに横幅の指定をするときなどはCSS部分で
colgroup#test-c {width: 20px}
等のようにすると思いますが、例えば、この
colgroup#test-c
等を利用してCの列は右揃え、他の列は中央揃えにする方法をご教示お願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (7件)

No.6ベストアンサー

  • 回答者： DrFell
  • 回答日時：

なぜ、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>

のようになります。
    • good
    • 0
    • 件
通報する
この回答へのお礼

<th>と<td>を使い分けることも考えたのですが、<th>は必ず太字になってしまい、
対処方法がわかりませんでした。

CSSで
th {font-weight: 100}
と指定してtdと同じ字体に変更可能なことを初めて知りました。

疑問がすっきりしました。
ありがとうございました。

通報する
お礼日時：2011/06/10 16:34

No.7

  • 回答者： ORUKA1951
  • 回答日時：

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

様々な条件からベターなものを決めるしかありません。
・tdにいちいちclass名をつけるのは厄介
　(これは悪い方法ではない。本来はclass="price"など意味のあるものを付ける)

　その上で、「colgroup,colに対するスタイルを処理できるブラウザはほとんどない」という現状を考えると、colgroup,colは使えません。(colは構造化マークアップではないので、もともと使えない)

★表の最初の部分以外は手を付けないを最優先として対処を考えると
　CSS2の隣接セレクタを使って指定するのが良いでしょう。その場合古いＩＥ５，ＩＥ６は無視せざるを得ない。
　そのかわり、IE7以降と限定することで、擬似要素、擬似クラスも使えるのでHTMLにはまったく手を付けないで、期待の表示をさせることもできる。サンプル参照

★対応ブラウザを多くしたいを最優先とするなら、CSS1でデザインすることになります。
　そのためには、
　<td class="name">ＡＢＣＤ</td><td class="data">ＥＦＧ</td><td class="price">\1,200-</td>
　とマークアップするのが良いでしょう。その場合、高機能なテキストエディタがあると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_ … )
　Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
＿<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951" />
＿<meta http-equiv="Content-Style-Type" content="text/css" />
＿<link rev="made" href="http://hoge.com" title="send a mail" />
＿<link rel="START" href="../index.html" />
<style type="text/css">
<!--
table.price_table{
＿border-collapse:collapse;
＿border:solid 1px gray;
＿text-align:center;
}
table.price_table th,
table.price_table td{
＿border:solid 1px gray;
}
table.price_table th[abbr="品名"]{width:6em;}
table.price_table th[abbr="説明"]{width:20em;}
table.price_table th[abbr="価格"]{width:5em;}
table.price_table td+td{
＿text-align:left;
＿text-indent:1em;
}
table.price_table td+td+td{
＿text-align:right;
＿padding-right:0.5em;
}
table.price_table tr:first-child+tr+tr+tr+tr td,
table.price_table tr:first-child+tr+tr+tr+tr+tr+tr+tr+tr+tr td{
＿border-top:2px red;
}
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{
＿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{
＿background-color:white;
}
-->
＿</style>
</head>
<body>
＿<h1>サンプル</h1>
＿<table class="price_table" summary="テスト">
＿＿<thead>
＿＿＿<tr>
＿＿＿＿<th abbr="品名">製品名</th><th abbr="説明">説明</th><th abbr="価格">価格</th>
＿＿＿</tr>
＿＿</thead>
＿＿<tbody>
＿＿＿<tr>
＿＿＿＿<td>name</td><td>data</td><td>\1,000</td>
＿＿＿</tr>
＿＿＿<tr>
＿＿＿＿<td>name</td><td>data</td><td>\1,200</td>
＿＿＿</tr>
＿＿＿<tr>
＿＿＿＿<td>name</td><td>data</td><td>\1,500</td>
＿＿＿</tr>
＿＿＿<tr>
＿＿＿＿<td>name</td><td>data</td><td>\1,600</td>
＿＿＿</tr>
＿＿＿<tr>
＿＿＿＿<td>name</td><td>data</td><td>\2,000</td>
＿＿＿</tr>
＿＿＿<tr>
＿＿＿＿<td>name</td><td>data</td><td>\1,000</td>
＿＿＿</tr>
＿＿＿<tr>
＿＿＿＿<td>name</td><td>data</td><td>\1,200</td>
＿＿＿</tr>
＿＿＿<tr>
＿＿＿＿<td>name</td><td>data</td><td>\1,500</td>
＿＿＿</tr>
＿＿＿<tr>
＿＿＿＿<td>name</td><td>data</td><td>\1,600</td>
＿＿＿</tr>
＿＿＿<tr>
＿＿＿＿<td>name</td><td>data</td><td>\2,000</td>
＿＿＿</tr>
＿＿＿<tr>
＿＿＿＿<td>name</td><td>data</td><td>\1,000</td>
＿＿＿</tr>
＿＿</tbody>
＿</table>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

お忙しい中、何度もご回答いただき、ありがとうございました。

なにぶん私が初心者のため、よく意味がわからないところがあり、理解しきれませんでした。
中級程度まで上達した時点でORUKA1951様に回答いただいたことを試してみたいと思います。

通報する
お礼日時：2011/06/10 16:46

No.5

  • 回答者： naokita
  • 回答日時：

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


----------------

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

<head>
<style type="text/css">
table{ text-align: center;}
td.r { text-align: right;}
</style>
</head>
<body>
<div>
<table>
<tr><td>A-1</td><td>B-1</td><td class="r">C-1</td></tr>
<tr><td>A-2</td><td>B-2</td><td class="r">C-2</td></tr>
<tr><td>A-3</td><td>B-3</td><td class="r">C-3</td></tr>
</table>
</div>
</body>



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

<table>
<tr><td>A-1</td><td>B-1</td><td><p>C-1</p></td></tr>
<tr><td>A-2</td><td>B-2</td><td><p>C-2</p></td></tr>
<tr><td>A-3</td><td>B-3</td><td><p>C-3</p></td></tr>
</table>
    • good
    • 0
    • 件
通報する
この回答へのお礼

table.test td {text-align: center}
という指定だと、個別に
td.r {text-align: right}
等と指定しても無効だったので悩んでおりました。

table.test {text-align: center}
という指定により、個別に
td.r {text-align: right}
等と指定したものが有効になりました。

ありがとうございました。

通報する
お礼日時：2011/06/10 17:29

No.4

  • 回答者： ORUKA1951
  • 回答日時：

　<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;
}
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： ORUKA1951
  • 回答日時：

　HTML4の仕様では、colgroupは構造化のはずなので、スタイルシートで様々に使えるはずですが、現時点でcorgroupに対してスタイルシートが有効なのは、background-colorやcolor位で、text-alignに対応しているブラウザはほとんどありません。


　よって、IE6,7を無視すると下記のCSSで良いはずです。(一部HTMLを間違えていました。)
★タブインデントは＿(全角)に置換してあります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css">
<!--
table.price_table{
＿border-collapse:collapse;
＿border:solid 1px gray;
＿text-align:center;
}
table.price_table th,
table.price_table td{
＿width:6em;
＿border:solid 1px gray;
}
table.price_table td+td+td{
＿text-align:right;
＿padding-right:0.5em;
}
table.price_table td+td+td+td{
＿text-align:center;
＿padding:0;
}
-->
＿</style>
</head>
<body>
＿<h1>サンプル</h1>
＿<table class="price_table" summary="テスト">
＿＿＿<colgroup span="2">
＿＿＿</colgroup>
＿＿<thead>
＿＿＿<tr>
＿＿＿＿<th abbr="A">A</th><th abbr="B">B</th><th>価格</th>
＿＿＿</tr>
＿＿</thead>
＿＿<tbody>
＿＿＿<tr>
＿＿＿＿<td>data</td><td>data</td><td>\1,000</td>
＿＿＿</tr>
＿＿＿<tr>
＿＿＿＿<td>data</td><td>data</td><td>\1,200</td>
＿＿＿</tr>
＿＿＿<tr>
＿＿＿＿<td>data</td><td>data</td><td>\1,500</td>
＿＿＿</tr>
＿＿＿<tr>
＿＿＿＿<td>data</td><td>data</td><td>\1,600</td>
＿＿＿</tr>
＿＿＿<tr>
＿＿＿＿<td>data</td><td>data</td><td>\2,000</td>
＿＿＿</tr>
＿＿</tbody>
＿</table>
</body>
</html>

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

No.2

  • 回答者： ORUKA1951
  • 回答日時：

間違い・・


<thead><tbody>の下位にcolgroupは置けない。またFirefoxではうまくいかないようだ

とりあえず
table.price_table dd+dd+dd{text-align:right;}
で逃げておいてください。
念のため
table.price_table dd+dd+dd+td{text-align:center;}
も、追加しておいてね。

ちょっと方策を考えてみる。
まあ、高機能テキストエディタで
<td>(.*?)</td>$ 　　置換→　　<td class="price">\1</td>
が普通の方法かも。少なくとも私はそうしている。
　class名は後でのことも考えると、ちゃんとした意味のあるものを付けましょう。

この回答への補足

CSS部分は

table.price_table{
border-collapse:collapse;
border:solid 1px gray;
text-align: center;
}
table.price_table th,table.price_table td{
width:6em;
border:solid 1px gray;
}

table.price_table dd+dd+dd {text-align: right;}
table.price_table dd+dd+dd+td {text-align: center;}

ということになるという意味でしょうか？

上記のように入力してみても全て中央揃いなのですが・・・。

補足日時：2011/06/09 17:09
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： ORUKA1951
  • 回答日時：

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

http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>サンプル</title>
<meta name="author" content="ORUKA1951">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
<link rel="START" href="../index.html">
<style type="text/css">
<!--
table.price_table{
border-collapse:collapse;
border:solid 1px gray;
text-align:center;
}
table.price_table th,table.price_table td{
width:6em;
border:solid 1px gray;
}
table.price_table colgroup.price{
color:red;
text-align:right;
}
-->
</style>
</head>
<body>
<h1>サンプル</h1>
<table class="price_table" summary="テスト">
<thead>
<tr>
<th abbr="A">A</th><td>B</td><td>C</td>
</tr>
</thead>
</tbody>
<colgroup span="2">
</colgroup>
<colgroup span="1" class="price">
</colgroup>
<tr>
<td>data</td><td>data</td><td>data</td>
</tr>
<tr>
<td>data</td><td>data</td><td>data</td>
</tr>
<tr>
<td>data</td><td>data</td><td>data</td>
</tr>
<tr>
<td>data</td><td>data</td><td>data</td>
</tr>
<tr>
<td>data</td><td>data</td><td>data</td>
</tr>
<tr>
<td>data</td><td>data</td><td>data</td>
</tr>
<tr>
<td>data</td><td>data</td><td>data</td>
</tr>
<tr>
<td>data</td><td>data</td><td>data</td>
</tr>
<tr>
<td>data</td><td>data</td><td>data</td>
</tr>
<tr>
<td>data</td><td>data</td><td>data</td>
</tr>
<tr>
<td>data</td><td>data</td><td>data</td>
</tr>
<tr>
<td>data</td><td>data</td><td>data</td>
</tr>
<tr>
<td>data</td><td>data</td><td>data</td>
</tr>
<tr>
<td>data</td><td>data</td><td>data</td>
</tr>
<tr>
<td>data</td><td>data</td><td>data</td>
</tr>
</tbody>
</table>
</body>
</html>

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

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

おすすめ情報

Q質問する（無料）

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

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

おすすめ情報