本文にTABLEタグを使いたい。
そう思っている方、多いハズ。そこで試してみました。
結果、Twenty tenのレイアウトに引きずられ、
期待する書式で出力されませんでした。
ですので、別途オリジナルの書式を
作ることにしました。
Twenty Ten: スタイルシート (style.css)
を編集します。
まず、強制的にTABLEの幅が
100%となるのを修正するには、
#content table {
border: 1px solid #e7e7e7;
margin: 0 -1px 24px 0;
text-align: left;
width: 100%;
}
#content table.none {
width: 0%;
}
という感じで、0%のオリジナルClassを作ります。
この例でのClass名は、「none」です。
ここは自由に変更してくださって結構です。
そして、本文でTABLEタグを記載する際に
その自作したClassを適応させるために、
<TABLE class=”none”>
としておきます。
これで先ほど自作したClass「none」が適応されます。
同様にして、TRタグとTDタグも
自作のClassを用意し、それを呼び出すようにします。
私の場合の例では、以下のように設定しました。
#content tr td {
border-top: 1px solid #e7e7e7;
padding: 6px 24px;
}
#content tr.none {
border: 1px solid #888888;
}
#content td.none {
border: 1px solid #888888;
}
で、以下がその結果です。
| 1行目1列目 | 1行目2列目 | 1行目3列目 |
| 2行目1列目 | 2行目2列目 | 2行目3列目 |
どうでしょう? 汗
p.s.
TRタグと、TDタグの書き方は、
TABLEタグと同じで、noneクラスを呼び出します。
<TR class=”none”>
<TD class=”none”>
という感じです。
