tableタグの枠線について

質問

tableタグで個別にborderを設定している箇所のみまとめて色を指定する方法って何かありますでしょうか？

【補足】

1つのHTML内において、

<table border="0" align="center">
…
</table>

で囲まれたtableは枠線を表示せず、

<table border="1"（或いは2以上） align="center">
…
</table>

で囲まれたtableは指定した色の枠線にしたいのですが…。
出来れば、個別のtableにクラスを指定して…という方法は、適用したいtableが湯水のごとく大量にあるので避けたいです…。

回答No.4

play_with_you

#3です。

じゃあJavaScriptでしょうね。

一応属性値セレクタというやつで
table, table * {
　border:solid #FF0000;
}
table[border="0"], table[border="0"] *{
　border:none;
}
みたいなこともできますが（IEも7から対応）、おそらく太さはHTMLで指定したままにしたいのですよね？
CSS3なら「borderが0でないtable」の指定はできますがCSS3はまだ早いですし、
冗長になっていいなら
table[border="1"],table[border="1"]*{
}
table[border="2"],table[border="2"]*{
}
とできますが、JavaScriptで全tableのborderの値を取得してスタイルを設定するほうが最終的には早いと思います。

回答No.3

play_with_you

＞<table border="0" align="center">
そもそもこれは枠線出ませんよね？

補足

承知しています。

<table border="0" align="center">

のtableは枠線を出さず、borderが1以上のtableにおいて、枠線の色の一括設定がしたいと思い書き込みました。

回答No.2

ORUKA1951

tableにはsummary属性が必須ですから、それを利用するとか、class名をつけるとか、border属性の値を利用するとか、方法はいろいろあります。
<table border="1" summary="価格-表" class="price List"><!-- alignは非推奨です。 -->
　<tbody>
　　<tr>
　　　<th abbr="品名">品名</th><th abbr="品番">品番</th><th abbr="標準価格">標準価格</th>
　　</tr>
　　<tr>
　　　<td>掃除機</td><td>abcefg</td><td>12,000</td>
　　</tr>
・・・・
と
<table border="1" summary="製品の写真" class="photo List">
　<tbody>
　　<tr>
　　　<th abbr="品名">品名</th><th abbr="品番">品番</th><th abbr="写真">写真</th>
　　</tr>
　　<tr>
　　　<td>掃除機</td><td>abcefg</td><td><img src="" width="" height="" alt=""></td>
　　</tr>
・・・・
　border="0"は現実にはあまり指定しないでしょう。表の目的や後方互換を考えるとborder"1"としておくほうが良いです。

★単に文書内容を整形する目的だけで表を用いるべきでない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 )
★ページレイアウトの目的で表を用いる( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )ことはしてはならない
　スタイルシートを解釈しないユーザーエージェントのために、罫線はとりあえず付けておきましょう。
　table要素のborder属性は、tableだけでなくthやtdにも一括して指定しますから、スタイルシートで個別に指定するほうが良いでしょう。
table.price{
border-collapse:collapse;
border:gray solid 2px;
text-align:center;
}
table.price th,table.price td{
border:1px gray solid;
}
table.price td+td+td{
text-align:right;
}
とか・・・
　HTMLは文書構造が示されているはず--HTMLの目的がそうなので--ですから、その文書構造から、表は特定できるはずです。上記のようにclass名を指定しなくても・・
table[summary="価格表]{
border-collapse:collapse;
border:gray solid 2px;
text-align:center;
}
table[summary="価格表] th,table.price td{
border:1px gray solid;
}
table[summary="価格表] td+td+td{
text-align:right;
color:red;
}

HTMLさえ、きちんと書かれていれば、スタイルシートのセレクタを使えば良いです。
div#priceList table,#priceList table th,#priceList table td{border:color:green;}
　価格表DIV要素内のtableについては・・・

h2+table,h2+table th,h2+table td{}
　h2のすぐ次に書かれているtableについては・・

h2+p+table,h2+p+table th,h2+p+table td{}
　h2の次に<p></p>がひとつだけある場合は・・

div.header table***
　header内のtableなら・・

と、

回答No.1

lv4u

そういうときのために、ＣＳＳというものがあるのだと思います。