表をCSSで指定する方法

解決済

質問者：grizzly
質問日時：2002/09/21 09:49
回答数：3件

表をCSSで指定する方法

表をスタイルシートで指定することはできますか？

下の記述を何百ページものhtmlにおこなった場合、widthを640に変更したい場合など、手作業で変更しなければならず煩雑です。

<TABLE cellSpacing=0 cellPadding=10 width=600 border=0>

スタイルシートなどを使うことはできませんか？

背景は、selene_plさんに教えていただいたようにスタイルシートを使いました。おかげさまで、色の変更は複数ページにわたり、一気にできるようになりました。

→BODY{ background-color : #cecfff; } というcolor.cssファイルをつくりました。
→htmlページの <head>～</head>の中に、
<link rel="stylesheet" type="text/css" href="color.css"> を埋め込みました。

表についてもこのようなことはできませんか？長年の懸案です。

通報する

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

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： onimotsu
回答日時：2002/09/23 12:10

>TABLE{cellSpacing:0; cellPadding:10; width:600; border:0; bgcolor:#FFFFFF;}

>→結果は、background-color の#FFFFCE(黄色)がページ全体にわたって、表示されるだけです。表と表の背景は表示されません。

確認です。
表の罫線もスタイルシートを使って表示させたいということでしょうか。
私にはできませんし、スタイルシートは本来そのような使い方が
できないと思います。
ですから、表の罫線はHTMLで事前に記述しておく必要があると思います。

その上で、表の幅や背景色を変更するために
外部ファイルを使ってスタイルシートを定義すればよいと思います。

TABLE{ width : 600px;border-width : 0px 0px 0px 0px;
padding-top : 0px;padding-left : 0px;padding-right : 0px;
padding-bottom : 0px; background-color : #FFFFFF;}

こちらの
TABLE{cellSpacing:0; cellPadding:10; width:600; border:0; bgcolor:#FFFFFF;}
記述方法が異なっていると思いますので
下記ＵＲＬを参考にしていただければと思います。

参考URL：http://tohoho.wakusei.ne.jp/wwwcss.htm

- 0
- 件

通報する

この回答へのお礼

できました。
本日の天気のようにすっきりしました。
ありがとうございます。
感謝しております。

次の課題は、
1列2段の定義の仕方です。
項をあらためて質問させていただきます。

通報する

お礼日時：2002/09/24 13:43

No.2

回答者： onimotsu
回答日時：2002/09/21 12:22

外部ファイルを使ったやり方ですね。

（最初に”外部ファイル”と記載しましょう）

TABLE{
width : 600px;
border-width : 0px 0px 0px 0px;
padding-top : 0px;
padding-left : 0px;
padding-right : 0px;
padding-bottom : 0px;
}

これをcolor.cssに書き込めばよいと思います。
お試しください。

この回答への補足

うまくいきません。

→<head>と</head>の間に下を挿入しました。

<link rel="stylesheet" type="text/css" ref="color.css">

→また、color.cssを下のように記述しました。

BODY{ background-color : #FFFFCE; }
TABLE{cellSpacing:0; cellPadding:10; width:600; border:0; bgcolor:#FFFFFF;}

→結果は、background-color の#FFFFCE(黄色)がページ全体にわたって、表示されるだけです。表と表の背景は表示されません。

どこがいけないのでしょうか？
よろしくおねがいします。

補足日時：2002/09/22 16:03

通報する

- 0
- 件

通報する

No.1

回答者： osamuy
回答日時：2002/09/21 10:39

表についての一般的なスタイルを、クラスとして定義してあげる、ってのは。

こんな風に：

..TBL_GENERIC { border-collapse:collapse; border-spacing:0px; border:thick solid black; }
.TBL_GENERIC TD { color:green; backgrond-color:#FEE;
padding:0.5ex 1ex;
border-width:1px 0px; border-style:solid; border-color:gray; }
</style>
</head><body>
<table class="TBL_GENERIC">
<tr><td>Test<td>data
<tr><td>foo<td>peko poko
</table>
</body>

もし求めるものが、同じデータの表を挿入する事だったら、

・要素OBJECTで、表HTMLを埋め込む。
・要素IFRAMEで、リンクする。
・SSIでインクルードする。
・ローカルで、表HTML挿入を一括処理する。

――とか。