スタイルシートで、テーブルのセルの中身をセンタリングさせたい。

質問

スタイルシートで、3行5列のテーブルのセルの中身全てを
横にセンタリングさせたいのですが、
皆さんはどのようにやってますか？
ちなみにセルの中に入るのは画像のみです。
宜しくお願いします。

回答No.4

quads · ベストアンサー

---------- スタイルシート部 ----------
table.center td{
text-align:center;
}
--------------------------------------

---------------- 本文 ----------------

<table summary="概要" class="center">

<tr>
<td><img src="pic01.gif" alt="代替テキスト"></td>
<td><img src="pic02.gif" alt="代替テキスト"></td>
<td><img src="pic03.gif" alt="代替テキスト"></td>
<td><img src="pic04.gif" alt="代替テキスト"></td>
<td><img src="pic05.gif" alt="代替テキスト"></td>
</tr>

<tr>
<td><img src="pic06.gif" alt="代替テキスト"></td>
<td><img src="pic07.gif" alt="代替テキスト"></td>
<td><img src="pic08.gif" alt="代替テキスト"></td>
<td><img src="pic09.gif" alt="代替テキスト"></td>
<td><img src="pic10.gif" alt="代替テキスト"></td>
</tr>

<tr>
<td><img src="pic11.gif" alt="代替テキスト"></td>
<td><img src="pic12.gif" alt="代替テキスト"></td>
<td><img src="pic13.gif" alt="代替テキスト"></td>
<td><img src="pic14.gif" alt="代替テキスト"></td>
<td><img src="pic15.gif" alt="代替テキスト"></td>
</tr>

</table>

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

セル内の要素が画像のみということですから、センタリングさせるのには何らかの理由があると思います。
その意図に合わせて、<table>タグのwidth属性での横幅指定や、<td>タグに対してwidthプロパティでの横幅指定をされるのも良いかもしれません。

高さに関する指定は、height属性、vertical-alignプロパティを参照してください。

お礼

かなり丁寧な回答ありがとうございます！
とても理解しやすかったです。
height属性、vertical-alignプロパティなどは、
応用して使っていきたいと思います。

回答No.5

taseki

ANo.2ですが、すみませんalignではなくtext-alignでした。

すべてのtableのセルが対象なら、

td, th { text-align: center; }

特定のtable（たとえばid="ImgTable"を付けたtable）のセルが対象なら、

#ImgTable td, #ImgTable th { text-align: center; }

お礼

早速試してみましたら、できました！
ご丁寧に訂正のメールまで頂きありがとうございます。

回答No.3

koutarou504

TD{
text-align:center;
}

基本はこれですね。

で、特定のセルのみを対象としたい場合は、
TD.sclTdSample{
text-align:center;
}
又は
TR.sclTrSample TD{
text-align:center;
}

特定のテーブルのセルを対象にしたい場合は、
TABLE.sclTbSample TD{
text-align:center;
}

として、対象にclassを指定しています。
（ページに１つしかないはずならば、idも使用します。）

お礼

ご回答ありがとうございます！
早速、試してみたところ解決しました。
今後、使いこなしていきたいです。

回答No.2

taseki

すべてのtableのセルが対象なら、

td, th { align: center; }

特定のtable（たとえばid="ImgTable"を付けたtable）のセルが対象なら、

#ImgTable td, #ImgTable th { align: center; }

回答No.1

kokorone

スタイルシートではなく、HTMLで記述
してみてください。align=centerです。
はずしていたら、ごめんなさい。

参考URL：

http://www.tohoho-web.com/html/td.htm

お礼

早速の回答ありがとうございます。
今回はHTMLの記述ではなく、スタイルシートでの記述を考えていました。
でも参考のHPを拝見しましたが、知らなかったことが書いてあり、とても勉強になりました！