tableタグで個別にborderを設定している箇所のみまとめて色を指定する方法って何かありますでしょうか?
【補足】
1つのHTML内において、
<table border="0" align="center">
…
</table>
で囲まれたtableは枠線を表示せず、
<table border="1"(或いは2以上) align="center">
…
</table>
で囲まれたtableは指定した色の枠線にしたいのですが…。
出来れば、個別のtableにクラスを指定して…という方法は、適用したいtableが湯水のごとく大量にあるので避けたいです…。
A 回答 (4件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
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-html4 … )
★ページレイアウトの目的で表を用いる( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )ことはしてはならない
スタイルシートを解釈しないユーザーエージェントのために、罫線はとりあえず付けておきましょう。
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.4
- 回答日時:
#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の値を取得してスタイルを設定するほうが最終的には早いと思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- MySQL SHOW CREATE TABLE posts;これって何ですか? 3 2022/08/28 22:57
- Excel(エクセル) エクセル マクロ A列の <table> ~ </table>までを C列に抜き出したい 6 2023/04/01 01:28
- 英語 アメリカの数学で答えを求めないといけないんですが、which table を答えないといけないらしく 1 2022/06/30 16:12
- MySQL my_itemsテーブルのIDにAUTO_INCREMENT を追加ができるかで 1 2023/01/03 09:09
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- PHP php エラー 2 2022/10/23 16:43
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テーブルとテーブルの間隔について
-
TABLEのセルの中の文字を行単位...
-
<th>タグを使っても太字にしな...
-
table表を横に並べる際の間隔指定
-
HTML tableのセルにtextareaを...
-
HTMLで<HR>以外で線を引く方法...
-
正規表現で「より前」と「より後」
-
(HTML)Tableを任意の位置に置...
-
適用されているはずの外部cssが...
-
CSSで特定のテーブルだけに...
-
ホームページのテキストを折り...
-
テーブルデータを折り返して表...
-
テーブルからはみ出します
-
HTMLのテーブルをExcelにCopy&P...
-
textareaの外側の文字が下付き...
-
table内の隙間
-
table 幅固定で、端までいった...
-
latex使い方
-
アンカータグ内の文字の色を変...
-
画面サイズを取得し、テーブル...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルとテーブルの間隔について
-
TABLEのセルの中の文字を行単位...
-
<th>タグを使っても太字にしな...
-
CSSで特定のテーブルだけに...
-
HTML5で、テーブル内tdタグの高...
-
同じ幅指定のつもりなのに、ブ...
-
table表を横に並べる際の間隔指定
-
テーブル内のセル間にスペース...
-
textareaの外側の文字が下付き...
-
HTML tableのセルにtextareaを...
-
テーブルデータを折り返して表...
-
tableの位置がIEとその他ブラウ...
-
<fieldset>タグについて
-
正規表現で「より前」と「より後」
-
スタイルシートで左側だけ色を...
-
tableのcellpadding="0" cellsp...
-
tableを縦に続けるとtable間の...
-
HTMLのテーブルをExcelにCopy&P...
-
html5のテーブル内でdivのタブ...
-
スタイルの無効化
おすすめ情報