- ベストアンサー
テーブルの線を立体じゃなく普通の線にしたい
普通にテーブルで表を作ると線が立体的になってしまいますよね。 これを、特定のテーブルだけを普通の罫線だけで作られたような表にしたいと思っています。 テーブルを立体でなく罫線にするには、 【例1】 <STYLE type="text/css"> <!-- td{border-style:solid; border-width:1pt 1pt 1pt 1pt;border-color: #000000;} --></STYLE> というスタイルシートを<head>内に書く。 【例2】 <table bgcolor="#000000" border="0" cellspacing="0" cellpadding="0"> <tr><td> <table border="0" cellspacing="1" cellpadding="0"> <tr><td bgcolor="#ffffff">セル１</td><td bgcolor="#ffffff">セル２</td></tr> <tr><td bgcolor="#ffffff">セル３</td><td bgcolor="#ffffff">セル４</td></tr> </table> </td></tr> </table> という入れ子状態にする。 概ねこの２種類の方法が一般的だと思います。 が、【例1】の方法は作るテーブル全てがこのスタイルになってしまいます。 【例2】は小さい表にはいいですが、セルが大量にある表に使うのは無駄が多く、タグが複雑になるので修正時も面倒です。 これを、個々のテーブルに対して例1のようなスタイルシートを使用して作れないものでしょうか？ <span>を使って出来そうな気がするのですが、いろいろ試すもののどうもうまくいきません。こういう場合の合理的な方法をご存知でしたら教えていただけますか。
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
＃１です 先ほどの回答はid属性でやりましたが、class属性でも同じようにできますよ 定義： .mytable td { 。。。 本文 <table class="mytable">
その他の回答 (5)
- yambejp
- ベストアンサー率51% (3827/7415)
えーと・・・・ collapseを使います。IE6やFirefoxで問題ないので、これで十分でしょう。 <style type="text/css"> table#hoge { border-collapse: collapse; } table#hoge td{ border:solid 1pt; border-color: #000000; } </style> <table id="hoge"> <tr><td>セル１</td><td>セル２</td></tr> <tr><td>セル３</td><td>セル４</td></tr> </table>
お礼
へえ～、こんなやり方もあるのですね。ホントいろいろあるもんですね。 スタイルシートって正直あんまりよく分かってなかったので、これを機にしっかり勉強します。 ありがとうございました。参考にさせていただきます。
- goldfox
- ベストアンサー率49% (123/249)
スタイルシートを使った【例1】（回答例）の方がよいのを前提として、 ＞【例2】は小さい表にはいいですが、セルが大量にある表に使うのは無駄が多く、タグが複雑になるので修正時も面倒です。 確かにこの例では無駄がありすぎますが、「入れ子にしない」「tbodyを使う」をすれば、無駄は省けます。 お試しください。 <table border="0" bgcolor="#000000" cellspacing="1" cellpadding="0"> <tbody bgcolor="#ffffff"> <tr><td>セル１</td><td>セル２</td></tr> <tr><td>セル３</td><td>セル４</td></tr> </tbody> </table>
お礼
こんな方法もあるんですね！tbodyですか、これも初めて知りました。 これは非常にシンプルで分かりやすいですね。 各々のテーブルを別々に指定したいときはスタイルシートを使うまでもなく、ダイレクトに指定できるこの方法がより無駄がないかもしれません。 ありがとうございました。
>【例1】の方法は作るテーブル全てがこのスタイルになってしまいます。 class名を指定すれば指定したクラスにだけスタイルが適用されます。 また、全てのTDタグにclass属性をつけるのは面倒なので、 テーブルにクラス属性を付け、その中のTDタグのスタイルをまとめて指定する方が楽です。 <style type="text/css"> <!-- TABLE.flat TD{ border-style:solid; border-width:1pt 1pt 1pt 1pt;border-color: #000000; } --> </style> スタイルを上記の様にし、テーブルタグにclass属性を指定する。 <table class="flat"> すると、そのテーブル内の全てのTDタグに上記のスタイルが適用されます。
お礼
#4の方にアドバイス頂いたのと同じですね。 便利でよく使うと思いますのでしっかり覚えておきます。
補足
↓すいません、#4の方じゃなくて“#3の方と”同じですね。お礼書いた後で気づきました。
- _hayate_
- ベストアンサー率48% (198/412)
class属性はどうでしょう？(自信ナシ^^;) 例) <style type="text/css"> <!-- .Class1{border-width : 1px 1px 1px 1px;border-style : solid;border-color : black;} .Class2{border-width : 1px 1px 1px 1px;border-style : solid;border-color : red;} .Class3{border-width : 1px 1px 1px 1px;border-style : solid;border-color : green;} --> </style> <head></head>内に書く 3*3のテーブルとして黒、赤、緑を指定してあります。 <table border="0"> <tbody> <tr> <td class="Class1">黒</td> <td class="Class1"></td> <td class="Class1"></td> </tr> <tr> <td class="Class2">赤</td> <td class="Class2"></td> <td class="Class2"></td> </tr> <tr> <td class="Class3">緑</td> <td class="Class3"></td> <td class="Class3"></td> </tr> </tbody> </table> 2*2のテーブルだけどそれぞれ罫線の色が違う場合はこんな感じで。 <table border="0"> <tbody> <tr> <td class="Class1">黒</td> <td class="Class2">赤</td> </tr> <tr> <td class="Class3">緑</td> <td class="Class1">黒</td> </tr> </tbody> </table>
お礼
classを設定しても結局TDひとつひとつに全てclass属性を付けないといけないので、bgcolorを記入するのとあまり変わりません。TDの線の設定はまとめて変えられるのでその点はメリットがありますが・・・ （でもそれぐらいならテキストエディターの一括置換でもできるし・・・） classの使い方はすでに知っていましたので試してみたところ、あまり合理的でなかったので、他の方法を探していました。 せっかく書いていただいたのに、説明不足ですみませんでした。
補足
他の方のアドバイスで、classを使うのも有効であることがわかりました。 よく知らない立場でありながら偉そうなことを書きまして失礼いたしました。自分の無知がお恥ずかしい限りです・・・ （↓お礼の後で書きました）
- asahina02
- ベストアンサー率47% (95/202)
例１の応用で td { 。。。 と書くのではなく、 #mytd td { 。。。 と書き、 適用したいtableタグに以下のように書けば良いです <table id="mytd">
お礼
id=""というタグがあるのですね。これは便利そうです。 早速やってみたところ、見事にできました。 便利なタグなのでいろいろな使い方ができそうです。ありがとうございました。
お礼
度々ありがとうございます。 class属性を使った方法でもこうやるとTD全てに結果が反映されるのですね。知りませんでした。 この方法も他にもいろいろと応用できそうですね。覚えておきます。 #2の方に少々失礼なコメントを書いてしまってお恥ずかしい・・・