- ベストアンサー
テーブルの線の内側の色も指定するには？
- テーブルの線の内側の色を指定する方法について説明します。
- 参考サイトを元にテーブルを作成している際に、内側のテーブルの線の色も変えたい場合はどうすれば良いのかを教えてください。
- 設定したテーブルの線の色がIE9で表示すると黒になってしまう場合の対処方法についてもご教示ください。
- lrsblizqqbab
- お礼率100% (55/55)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
申し上げにくいですが、その参考ページはお勧めできません。例えていうと、火打ち石での火の付け方を マッチやライター等知らされずに勉強するような……。時代錯誤ですので、学ばれるなら今の勉強をしませんか？今は、htmlは文章構造を、cssでデザインの役割分担がなされるページが主流となっています。さらに動きをつけるならJavaScript等。 tableは文章構造ですが、色を付けたいなどは、文章構造ではありません。デザインの方です。なにもかも、htmlでやるには、手間がかかるばかりで、いいことない気がします。 それにそのページにも書いてありますが、ＩＥ専用ですよ。しかもＩＥ９でも動作しない。今は１０、そして１１に移行の時代に学ぶ価値無しの気がします。 余談はさておき、提示された条件のみでしたら、<head>の中に <style type="text/css"> table td {border:1px solid #00ffff;} </style> といれれば、何とかなると思います。 </head>のすぐ上などに入れてみてください。条件によっては、無理かもしれませんが、提示の条件だと行けると思います。
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
HTMLを学ぼうとしたら、まず仕様書全体に目を通してください。 ⇒HTML 4.01仕様書(邦訳)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html ) これは必須です。!! 11.2.1 TABLE要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.2.1 )には、 <table border="1" summary="Week Schedule"> <tr> <td>6/3</td><td>6/4</td><td>6/5</td> </tr> <tr> <td>日曜</td><td>月曜</td><td>火曜</td> </tr> <tr> <td>休み</td><td>学校</td><td>バイト</td> </tr> </table> としなさいと・・・ bordercolor属性、bordercolorlight属性、bordercolordark属性は、存在しません。 もちろんbordercolorlight属性、bordercolordark属性も存在しません。!! ⇒Index of the HTML 4 Attributes( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/index/attributes.html ) 作成したHTMLを、 ⇒Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html ) (の右上のDATA)で確認すると、すべて指摘してくれる!!。 HTMLが正しいか、どうすればよいかはすべてアドバイスしてくれる。 strictDTDでは、確実にこれらは減点される!! 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから スタイルシートはこれらの問題を解決すると同時に、HTMLにおける制限されたプレゼンテーション機構に取ってかわる。スタイルシートでは、行間の設定やインデントの設定、テキスト色や背景色、フォントのサイズとスタイル、その他様々なプロパティの設定が簡単にできる。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Style Sheets in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )］より [サンプル] ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# ) のDATA入力でチェック済みのHTML4.01strict+CSS2.1です。 ※後方互換を考えると属性セレクタ [~=]よりはクラスセレクタのほうが現実的かも。 ★タブは＿に置換してあるので戻す。 「スタイルシートでは、・・・【中略】・・・様々なプロパティの設定が簡単にできる。」 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- table[summary~=Schedule]{line-height:2em;text-align:center;} table[summary~=Schedule] td {padding:0 10px;width:5em;} table[summary~=Week2],table[summary~=Week3]{ border-collapse:collapse; border-width:20px; } table[summary~=Week1]{border-spacing:5px 10px;} table[summary~=Week1]{border-style:ridge;border-color:red orange yellow green;border-width:10px;} table[summary~=Week2]{border-style:groove;border-color:lime aqua blue violet;} table[summary~=Week3]{border-style:outset;border-color:gray;border-width:5px 10px 20px 30px;} table[summary~=Week1] tr td{border:solid 3px;border-color:red orange yellow green;} table[summary~=Week1] tr+tr td{border-color:red;} table[summary~=Week1] tr+tr td+td{border-color:blue;color:blue} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<table border="1" summary="Schedule Week1"> ＿＿＿<caption>週間予定１</caption> ＿＿＿<tr> ＿＿＿＿<td>6/3</td><td>6/4</td><td>6/5</td> ＿＿＿</tr> ＿＿＿<tr> ＿＿＿＿<td>日曜</td><td>月曜</td><td>火曜</td> ＿＿＿</tr> ＿＿＿<tr> ＿＿＿＿<td>休み</td><td>学校</td><td>バイト</td> ＿＿＿</tr> ＿＿</table> ＿＿<table border="1" summary="Schedule Week2"> ＿＿＿<caption>週間予定２</caption> ＿＿＿<tr> ＿＿＿＿<td>6/3</td><td>6/4</td><td>6/5</td> ＿＿＿</tr> ＿＿＿<tr> ＿＿＿＿<td>日曜</td><td>月曜</td><td>火曜</td> ＿＿＿</tr> ＿＿＿<tr> ＿＿＿＿<td>休み</td><td>学校</td><td>バイト</td> ＿＿＿</tr> ＿＿</table> ＿＿<table border="1" summary="Schedule Week3"> ＿＿＿<caption>週間予定３</caption> ＿＿＿<tr> ＿＿＿＿<td>6/3</td><td>6/4</td><td>6/5</td> ＿＿＿</tr> ＿＿＿<tr> ＿＿＿＿<td>日曜</td><td>月曜</td><td>火曜</td> ＿＿＿</tr> ＿＿＿<tr> ＿＿＿＿<td>休み</td><td>学校</td><td>バイト</td> ＿＿＿</tr> ＿＿</table> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2012-08-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
お礼
ご回答ありがとうございます。
お礼
ご回答ありがとうございます。