CSSでID等が何もないtableブログパーツを編集したい

質問

こんにちは。
ブログのパーツをCSSを使って編集したいのですが、
編集したいパーツのTABLEには、IDなどが設定がされていません。

css初心者のため、まだ手探り状態です。

ページの形は、以下のように配置されています。

1.編集できるパーツ（HTML・CSS入力可）
2.編集できないテーブル
3.編集できるパーツ（HTML・CSS入力可）

編集したいのは2.のテーブルでしてHTMLは、

<table width="100%">
<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
</table>

みたいな感じです。

このテーブルのセルに、padding、borderなどを設定したいのです。

CSSの中に、
td { vertical-align: top; }
とすることで上揃えのみは影響なくできましたが、
borderは、その他のセルにも大きな影響を与えてしまうためできません。

他に考えたのですが、divを使って、divに囲まれたテーブルなどを
cssで編集するようなことはできませんでしょうか？

1のパーツの最後に　<div ####（IDみたいな？）>と開始を入れて、
2のパーツの冒頭で</div＞と
することで、divで囲まれたテーブルにするような方法は可能ですので、
cssにあらかじめこのdivの情報を入れておけば、
このdiv内のテーブルのレイアウトが変更できるのではないかと考えたのですが・・・・。これって無理な話なのでしょうか？

色々やってみたのですが、cssを勉強し始めて1週間では分かりませんでした。

他にこういうことをすれば編集できる可能性があるなどの情報があれば
教えてください。よろしくお願いします。

回答No.2

abril · ベストアンサー

> 1のパーツの最後に　<div ####（IDみたいな？）>と開始を入れて、2のパーツの冒頭で</div＞とすることで、divで囲まれたテーブルにするような方法は可能ですので、

こういうマークアップをはき出す事が可能だというのであれば、

> cssにあらかじめこのdivの情報を入れておけば、このdiv内のテーブルのレイアウトが変更できるのではないかと考えたのですが

理論上、上記のお考えで間違ってはいません。

<div id="hoge">
<table width="100%">
<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
</table>
</div>

というマークアップであれば、CSS側に

div#hoge table {
border: 1px solid #000;
padding: 5px;
}

という様に指定すれば、その他のtableに予め与えられているスタイルに影響する事なく、idセレクタで個別のdivを親要素に持つtable毎に自在なスタイルに編集する事は可能な筈です。

なので、

> 色々やってみたのですが、cssを勉強し始めて1週間では分かりませんでした。

とおっしゃっている、という事は「この方法」は実際には試しておられないのですね？とりあえずトライしてみては？

お礼

ありがとうございました！
Dreamweaverで編集していましたが、CSSが編集画面で反映されず悩んでいたところ、プレビューしたら反映されていました。

しかしながら、実際にやってみると、実はもうひとつ挫折がありました。

1.の編集できるパーツのHTMLが、ページ上のテーブルの中にあったのです。

<td class="****">編集可能なHTML</td></tr></table>

いくらやっても出来ないので、それが原因かと思いまして、
HTMLに以下のように書いていったんTableを閉じました。
</td></tr></table>
それから、
<div id="hoge"><table><tr><td>
として閉じたtableを復活させてあげると、何とか繋がりました。

しかし結局は、編集可能なHTMLのあとに、こうしたtableのタグがあったり、結局それらにもボーダーが付いてしまうことに。

しかしながら、必要最低限のレイアウトを整えるところまでは何とか成功できました。

今の段階ではこれで満足とし、その編集不可のtabelに、
cssのIDなんかが付くことを期待します。
ありがとうございました。

回答No.1

steel_gray

<div id="sample1">
テーブル
</div>
<div id="sample2">
テーブル
</div>

って構成だと、
#sample1 table {
～
}
#sample2 table {
～
}
あるいは
#sample1 td {
～
}

みたいな書き方で
id="sample1"の子孫のtableとid="sample2"の子孫のtable
id="sample1"の子孫のtd、
に対して作用するスタイルを書く事ができます。（子孫セレクタ）

「セレクタ」について知っているとidやclassを無用に付けなくて済む事がありますので一度調べておくといいかも。
http://hp.vector.co.jp/authors/VA022006/css/selector.html

お礼

ありがとうございます！大変助かりました！