みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

テーブルでセルの枠線を消す(CSS)

表をつくり、下記の方法でセルの枠線を消しています。

<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>内の設定だけで消えないのか理由が分かる方、説明お願いします。

投稿日時 - 2003-10-10 11:55:26

QNo.676003

暇なときに回答ください

質問者が選んだベストアンサー

こちらの環境(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="プロパティ:設定値;"」と記述するのが正当でしょう。
また、タグ内の属性については、その値はすべて引用符で括ることが推奨されていますので、できる限り""で括るようにした方が無難です。 場合によっては、ブラウザがその属性を正常に解釈しなくなることもあります。 スタイルシートをタグ内で直接設定する場合や、スクリプトをイベントハンドラに記述する場合には特に、注意が必要と思います。

参考になれば。

投稿日時 - 2003-10-10 22:00:42

お礼

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

私の作業環境ではIE5.5sp2を使用しています。
IE6で試してみた所、セルの枠線が消えるのを確認できました。
IEのVer違いの影響あたりを調べてみたいと思います。

{ }の件につきましてはIEの柔軟さに助けられていた様ですね。
今後は引用符を使う様徹底したいと思います。

投稿日時 - 2003-10-11 22:20:22

このQ&Aは役に立ちましたか?

9人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.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/

投稿日時 - 2003-10-10 16:21:51

お礼

ご回答ありがとうございます。
私が知りたかったのは「aa」と表示されるセルの枠線だけを消す方法についてです。
<table border="0">と指定すると、テーブルの外枠と全セルの枠線が消えてしまいますね。
ちょっと説明不足だった様で申し訳ありませんでした。

投稿日時 - 2003-10-10 20:36:56

ANo.1

<td style={border-style:none;}>aa</td>

↑の行の記述がヘンです。

<td style="border-style:none;">aa</td>

「 { } 」←英字のカッコではなく、
「 " " 」←引用符を使ってください。

投稿日時 - 2003-10-10 12:16:58

お礼

ご意見ありがとうございます。

>「 { } 」←英字のカッコではなく、
>「 " " 」←引用符を使ってください。

私がスタイルシートを初めて勉強したサイトでは、タグ内でも{ }で囲んでいたので、
どちらでも良いと解釈して{ }を使用しています。
それによる不具合が出た事は無いのですが、間違いなのでしょうか?

投稿日時 - 2003-10-10 15:15:47

あなたにオススメの質問