効率的なテーブルのスタイル指定方法

解決済

質問者：goonejp
質問日時：2004/04/21 18:08
回答数：3件

テーブルのスタイル指定時（指定箇所）に、TRやTDのスタイルも同時に指定する方法なんてあるのですか？？？

その他、何か、テーブルのスタイル指定のエクセレントな方法や裏技があったら、教えてください！

通報する

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

質問の本文を隠す

回答 (3件)

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

No.1ベストアンサー

回答者： s_hukami
回答日時：2004/04/22 17:43

質問の意味を取り違えていたらごめんなさい。

スタイルシートを利用すると、TRやTDを同時に指定することができます。
============================
<html>
<head>
<style TYPE="text/css">
.image tr{
border:green 1px solid;
}
.image th{
background:blue url(image/back01.jpg) no-repeat fixed 50% 50%;
}
.image td{
background:red url(image/back02.jpg) no-repeat fixed 50% 50%;
}
</style>
</head>
<body>
<table border="0" class="image">
<tr><th>sample</th></tr>
<tr><td>sample</td></tr>
</table>
</body>
</html>
=============================
なお、このサンプルでは「image」という名のクラスで指定していますが、全てのTABLEタグを指定する場合は必要ありません。

参考URLは「とほほのWWW入門」です。
HTMLやCSS（スタイルシート）のリファレンスとして利用するなら最適なサイトです。

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

この回答への補足

つぎのような感じで指定できたらと思うのですが、うまく行かないのです…。

なぜでしょう？？？

<html>
<head>
<style TYPE="text/css">
.aaa table{
height: 18;
color: #ffffff;
font-weight: bold;
font-size: 18;
}
.aaa td{
background:red url(bg1.gif);
}
.bbb table{
height: 15;
color: #000000;
font-weight: normal;
font-size: 12;
}
.bbb td{
background:blue url(bg2.gif);
}
</style>
</head>

<body>

<table cellpadding=0 cellspacing=0 width="250" class="aaa">
<tr><td>sample</td></tr>
</table>

<br>

<table cellpadding=0 cellspacing=0 width="250" class="bbb">
<tr><td>sample</td></tr>
</table>

</body>
</html>

補足日時：2004/04/22 21:32

通報する

- 0
- 件

通報する

No.3

回答者： noname#15014
回答日時：2004/04/26 10:03

そもそもTABLEとTDで別にしてるから問題があるんじゃないかと思うんですが。

<html>
　<head>
　　<style TYPE="text/css">
　　　
　　</style>
　</head>
　<body>
　　<table cellpadding=0 cellspacing=0 width="250">
　　　<tr>
　　　　<td class="aaa">sample</td>
　　　</tr>
　　</table>
　　<br>
　　<table cellpadding=0 cellspacing=0 width="250">
　　　<tr>
　　　　<td class="bbb">sample</td>
　　　</tr>
　　</table>
　</body>
</html>

こんなのじゃ駄目なんですか？

- 0
- 件

通報する

この回答へのお礼

ご指摘のとおりすれば、オーサリングソフトでの指定も簡単になります。

そもそも、CSSというもの自体がHTMLと別個に一部分をクラス化?しているわけですから、クラス指定を二重にするなどということは、少し考えすぎなのかも知れません。

無理だということで諦め、スタイルシートが多少冗長になっても、クラス指定は一つですむようにし、既にスタイルシートという一枚のシートにまとめられていることで満足するのが賢明であり、ホームページ作成ソフトを使う上でも適切と悟りました。

スタイルをさらに分けて指定するなどということは、それを覆すようなよほどの技術的なメリットがない限り使わないのが使用法としては賢明ですね…。

少なくとも私には、そんなのがあってるみたいです。

通報する

お礼日時：2004/04/26 12:01

No.2

回答者： noname#15014
回答日時：2004/04/23 01:24

「エクセレント」って言葉が好きなんですか？

＞TRやTDのスタイルも同時に指定
ふつうに
TR,TD {
　…
}
と記述すれば良いんじゃないかと思うんですが。

私見なのですがタグに依存するクラスを定義するよりも
タグに依存しないクラスを定義したほうがスマートだと思います。

この回答への補足

次が、タグに依存するクラスなのか、タグに依存しないクラスなのかは、わかりませんが、つぎのような感じで指定できたらと思うのですが、うまく行かないのです…。これが目標の課題なのです。

<html>
<head>
<style TYPE="text/css">
.aaa table{
height: 18;
color: #ffffff;
font-weight: bold;
font-size: 18;
}
.aaa td{
background:red url(bg1.gif);
}
.bbb table{
height: 15;
color: #000000;
font-weight: normal;
font-size: 12;
}
.bbb td{
background:blue url(bg2.gif);
}
</style>
</head>

<body>

<table cellpadding=0 cellspacing=0 width="250" class="aaa">
<tr><td>sample</td></tr>
</table>

<br>

<table cellpadding=0 cellspacing=0 width="250" class="bbb">
<tr><td>sample</td></tr>
</table>

</body>
</html>