表をつくり、下記の方法でセルの枠線を消しています。 a aa b bb セルのタグ内にスタイルシートを設定するだけで消せると思ったのですがうまくいかず、先頭で設定するスタイルシートでのボーダー設定をすると何故か消す事が出来ました。なぜ内の設定だけで消えないのか理由が分かる方、説明お願いします。

テーブルのボーダーを消したい時にはの記述が必要です。またタグの意味（？）は下記の通りです。：テ－ブル開始タグ：行を増やすタグ：列を増やすタグ：増やした列を閉じるタグ：増やした行の閉じるタグ：テ－ブル終了タグだから、こんな感じに書けばオッケーじゃないかな。 --- ～～～～ --- 参考URLのタグサイトさんはとても分かりやすいのでお勧めです。参考URL：http://chips.jpnet.biz/

aa ↑の行の記述がヘンです。 aa 「 { } 」←英字のカッコではなく、「 " " 」←引用符を使ってください。

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

解決済

質問者：kata_kori
質問日時：2003/10/10 11:55
回答数：3件

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

<html>
<head>
<style type="text/css">

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

通報する

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

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： lead1976
回答日時：2003/10/10 22:00

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

参考になれば。

- 0
- 件

通報する

この回答へのお礼

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

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

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

通報する

お礼日時：2003/10/11 22:20

No.2

回答者： sara-77
回答日時：2003/10/10 16:21

テーブルのボーダーを消したい時には<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/

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2003/10/10 20:36

No.1

回答者： noname#21343
回答日時：2003/10/10 12:16

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

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

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

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

- 0
- 件

通報する

この回答へのお礼

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

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

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

通報する

お礼日時：2003/10/10 15:15

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