重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

【GOLF me！】初月無料お試し

テーブルの線の内側の色も指定するには？

解決済

  • 質問者：lrsblizqqbab
  • 質問日時：
  • 回答数：2件

http://masaboo.cside.com/new_html1/ht_71.htm
を参考にしてテーブルを作ってるのですが

<TABLE bordercolor="green" border="5" width="230">
<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 bordercolorlight="green" bordercolordark="red" border="5" width="230">
<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>

こちらも、IE9で表示すると、内側の色が黒になります。
内側のテーブルの線の色も変えるにはどうすればいいでしょうか？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
これを使って宣言しています。

「テーブルの線の内側の色も指定するには？」の質問画像
通報する

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

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： DrFell
  • 回答日時：

申し上げにくいですが、その参考ページはお勧めできません。

例えていうと、火打ち石での火の付け方を　マッチやライター等知らされずに勉強するような……。時代錯誤ですので、学ばれるなら今の勉強をしませんか？今は、htmlは文章構造を、cssでデザインの役割分担がなされるページが主流となっています。さらに動きをつけるならJavaScript等。

tableは文章構造ですが、色を付けたいなどは、文章構造ではありません。デザインの方です。なにもかも、htmlでやるには、手間がかかるばかりで、いいことない気がします。

それにそのページにも書いてありますが、ＩＥ専用ですよ。しかもＩＥ９でも動作しない。今は１０、そして１１に移行の時代に学ぶ価値無しの気がします。

余談はさておき、提示された条件のみでしたら、<head>の中に
<style type="text/css">
table td {border:1px solid #00ffff;}
</style>
といれれば、何とかなると思います。

</head>のすぐ上などに入れてみてください。条件によっては、無理かもしれませんが、提示の条件だと行けると思います。
    • good
    • 1
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます。

通報する
お礼日時：2014/02/11 08:48

No.1

  • 回答者： ORUKA1951
  • 回答日時：

HTMLを学ぼうとしたら、まず仕様書全体に目を通してください。


　⇒HTML 4.01仕様書(邦訳)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　これは必須です。!!
11.2.1 TABLE要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )には、
<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-html4 … )
　作成した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-html4 … )］より
　
[サンプル]
★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>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
＿</div>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます。

通報する
お礼日時：2014/02/11 08:48

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報