- ベストアンサー
テーブルをスマートなソースで書く方法
テーブルを作りたいと思っているのですが HTML・CSSでできるだけスマートなソースで書く方法がうまく思いつきません。 セルの枠とセル内の色のある部分を3ピクセルほど開けて背景の画像が透けて見えるようにしたいのですが、 1ピクセル幅で白い枠を作る＆背景の透けている空白部分は3ピクセルの空セル、というやり方でHTMLのみで組んだり CSSのボックスを使って組んでみたりしましたが 画像どおりのものはできるもののもっと簡単な書き方があるように思えます。 なんだかものすごく簡単なことを聞いていて恥ずかしいのですが、案をお持ちの方どうぞよろしくお願いいたします。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
もう一つ理解できている自身がないけど、 素直に書くと以下のような感じでしょうか？ (TDの中にdivを一つおいています) <html> <head> <title>test</title> <style type="text/css"> <!-- body{background-color:#ccc;} table{border:1px solid white;} td{border:1px solid white;padding:3px;} td div{background-color:#cff;padding:2px;} --> </style> </head> <body> <table> <tr> <td><div>セルの内容</div></td> <td><div>セルの内容</div></td> </tr><tr> <td><div>セルの内容</div></td> <td><div>セルの内容</div></td> </tr> </table> </body> </html>
その他の回答 (1)
- EV2
- ベストアンサー率12% (2/16)
もし宜しければ、トピ主さんがお考えになったHTMLでの方法を載せていただけませんか？ そしたら回答できるかもしれません。 私も今CSSを勉強していますので＾＾ 宜しくお願いします。
お礼
レスありがとうございます。 実はこの質問はわかりやすいよう画像URLを貼って 「このようなテーブルを作りたいのですが」と書いていたのですが URL貼付けはガイドラインに反するらしく該当部分が削除されてしまい こういったなんだか意味がわからない質問文になってしまいました。 すぐ削除を要請すればよかったのですが 直後に事情でネットに繋げない環境になり放置したままになってしまい EV2さんにもお礼を申し上げるのも遅れてしまいました。 大変申し訳ございませんでした。 そしてこんな質問にレスをくださって本当にありがとうございます。 質問の内容はあれから自分なりに勉強をして 最初考えていた方法よりはいくらかスマートに書けるようになりました。 複雑なテーブルで画像を見ていただくほかにうまく説明できませんので URL等を載せることはできませんが… お手数おかけいたしました、どうもありがとうございました！
補足
ごめんなさい、最後日本語変ですね。 複雑なテーブルで画像を見ていただくほかにうまく説明できませんので URL等を載せることはできませんが… ↓ 複雑なテーブルで画像を見ていただくほかにうまく説明できませんので URL等を載せて「こうしたよ」と報告できないのが申し訳ありませんが… というかんじに脳内補正してください、すいませんー
お礼
レスありがとうございます。 実はこの質問はわかりやすいよう画像URLを貼って 「このようなテーブルを作りたいのですが」と 書いていたのですが URL貼付けはガイドラインに反するらしく該当部分が削除されてしまい こういったなんだか意味がわからない質問文になってしまいました。 すぐ削除を要請すればよかったのですが 直後に事情でネットに繋げない環境になり放置したままになってしまい steel_grayさんにもお礼を申し上げるのも遅れてしまいました。 大変申し訳ございませんでした。 そしてこんな質問にレスをくださって本当にありがとうございます。 質問をした時点ではボックスやマージンを理解していなかったのですが 自分なりに勉強をして最初はsteel_grayさんの書いてくださったような感じで作りました。 が、デザイン上ボックスでは不都合な点が出てきたので 結局原始的にテーブルで組みました… ですが最初考えていた方法よりはいくらかスマートに書けるようになりました。 複雑なテーブルで画像を見ていただくほかにうまく説明できませんので URLを貼ってお見せできないのが申し訳ないです… お手数おかけいたしました、どうもありがとうございました！