表をつくり、下記の方法でセルの枠線を消しています。
<html>
<head>
<style type="text/css">
<!--
td{border-color:black;}
-->
</style>
</head>
<table border>
<colgroup span=2 width=50></colgroup>
<tr>
<td>a</td>
<td style={border-style:none;}>aa</td>
</tr>
<tr>
<td>b</td>
<td>bb</td>
</tr>
</table>
</html>
セルのタグ<td>内にスタイルシートを設定するだけで消せると思ったのですがうまくいかず、
先頭で設定するスタイルシートで<td>のボーダー設定をすると何故か消す事が出来ました。
なぜ<td>内の設定だけで消えないのか理由が分かる方、説明お願いします。
No.3ベストアンサー
- 回答日時:
こちらの環境(WinMe)のIE6では、質問文中のソースの、head内のスタイル要素を除いた分のソースで、aaという文字が入るセルの内側の境界線は消えるようです。
style要素の「td{border-color:black;}」この部分が無くてもです。今一度、このスタイルシートを削って、再度表示を検証してみてはいかがでしょうか?
また、#1でも指摘されていますが、
<td style={border-style:none;}>aa</td>
この記述は誤りです。
<td style="border-style:none;">aa</td>
に直す必要があるでしょう。 IEでは拡大解釈して{}でスタイルシート部分を括っても問題なく解釈してくれますが、Netscapeなどでは不正な書式としてこの部分の指定が完全に無視される可能性があります(こちらの環境のNetscape 7.1では無視されました)。
head内のstyle要素では「セレクタ {プロパティ:設定値;}」という形で記述しますが、タグ内のstyle属性としては「style="プロパティ:設定値;"」と記述するのが正当でしょう。
また、タグ内の属性については、その値はすべて引用符で括ることが推奨されていますので、できる限り""で括るようにした方が無難です。 場合によっては、ブラウザがその属性を正常に解釈しなくなることもあります。 スタイルシートをタグ内で直接設定する場合や、スクリプトをイベントハンドラに記述する場合には特に、注意が必要と思います。
参考になれば。
回答ありがとうございます。
私の作業環境ではIE5.5sp2を使用しています。
IE6で試してみた所、セルの枠線が消えるのを確認できました。
IEのVer違いの影響あたりを調べてみたいと思います。
{ }の件につきましてはIEの柔軟さに助けられていた様ですね。
今後は引用符を使う様徹底したいと思います。
No.2
- 回答日時:
テーブルのボーダーを消したい時には<table border="0">の記述が必要です。
またタグの意味(?)は下記の通りです。
<table> :テ-ブル開始タグ
<tr> :行を増やすタグ
<td> :列を増やすタグ
</td> :増やした列を閉じるタグ
</tr> :増やした行の閉じるタグ
</table> :テ-ブル終了タグ
だから、こんな感じに書けばオッケーじゃないかな。
---
<html>
<head>
<style type="text/css">
<!--
スタイルテキストの記述
-->
</style>
</head>
<body>
<table border="0" height="●●●(テーブルの高さ指定)" width="●●●(テーブルの幅指定)">
<tr>
<td height="●●●(セルの高さ指定)" width="●●●(セルの幅指定)">
~
</td>
<td height="●●●(セルの高さ指定)" width="●●●(セルの幅指定)">
~
</td>
</tr>
<tr>
<td>~</td>
<td>~</td>
</tr>
</table>
</body>
</html>
---
参考URLのタグサイトさんはとても分かりやすいのでお勧めです。
参考URL:http://chips.jpnet.biz/
ご回答ありがとうございます。
私が知りたかったのは「aa」と表示されるセルの枠線だけを消す方法についてです。
<table border="0">と指定すると、テーブルの外枠と全セルの枠線が消えてしまいますね。
ちょっと説明不足だった様で申し訳ありませんでした。
No.1
- 回答日時:
<td style={border-style:none;}>aa</td>
↑の行の記述がヘンです。
<td style="border-style:none;">aa</td>
「 { } 」←英字のカッコではなく、
「 " " 」←引用符を使ってください。
ご意見ありがとうございます。
>「 { } 」←英字のカッコではなく、
>「 " " 」←引用符を使ってください。
私がスタイルシートを初めて勉強したサイトでは、タグ内でも{ }で囲んでいたので、
どちらでも良いと解釈して{ }を使用しています。
それによる不具合が出た事は無いのですが、間違いなのでしょうか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
tableにul,または,olを入れられ...
-
テーブルの行を折りたたみたい...
-
テーブルの任意の列を非表示に...
-
テーブルのヘッダとボディの幅...
-
テーブルタグの横に文章が入ら...
-
TRタグの余白をcssで設定するには
-
テーブルのレイアウトがおかし...
-
中に<table></table>が使えるア...
-
テーブルのセルに画像をピッタ...
-
逆L字の表(table)組み
-
テーブルの表示がずれます
-
スタイルシートで colspan=3と...
-
nowrapを指定しても改行される...
-
テーブルの行の高さを指定する...
-
文字列が入っているtdを削除せ...
-
テーブルタグの中に<ol><li>を...
-
HTMLで外部ファイルの読み込み
-
cssで、表示されるテキストによ...
-
チェックボックスが複数チェッ...
-
tableでcolspanを使うと次行以...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルの行を折りたたみたい...
-
tableにul,または,olを入れられ...
-
TRタグの余白をcssで設定するには
-
テーブルのヘッダとボディの幅...
-
テーブルの任意の列を非表示に...
-
cssで、表示されるテキストによ...
-
ホームページ 表の上の余白を...
-
tableでcolspanを使うと次行以...
-
中に<table></table>が使えるア...
-
html・cssで日付をキレイに揃え...
-
テーブルの行の高さを指定する...
-
テーブルタグのセルの幅の一部...
-
文字列が入っているtdを削除せ...
-
逆L字の表(table)組み
-
テーブルのセルに画像をピッタ...
-
EXCELのセル内にHTMLタグを含む...
-
テーブルタグの中に<ol><li>を...
-
HTML <td></td>タグ セル内余...
-
テーブルの表示がずれます
-
テーブルの装飾
おすすめ情報