- ベストアンサー
trとtrの間
縦幅だけ開ける方法はありますでしょうか？ CSSは怖くていじれません 1行1列目の要素 1行2列目の要素 2行1列目の要素 2行2列目の要素 3行1列目の要素 3行2列目の要素 4行1列目の要素 4行2列目の要素 現状こういうこういう感じのテーブルを、 1行1列目の要素 1行2列目の要素 2行1列目の要素 2行2列目の要素 3行1列目の要素 3行2列目の要素 4行1列目の要素 4行2列目の要素 こういうイメージに変更したいです。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
というか、「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」は基本ですから、単純にtable書いてスタイルシートで調整するほうが楽ですし危険もない。そもそも上記に書かれているようにメンテナンスも楽になる。失敗したらスタイルシート書き換えればよい。 スタイルシート使うと、HTML使うよりはるかに多彩なデザインができますよ。HTMLシンプルなのでメンテナンスも楽。 ※タブは (全角スペース)に置換してあるので戻す。 <table border="1" summary="サンプルの表"> <tbody> <tr> <th>一列目</th><th>二列目</th> </tr> <tr> <td>1行1列目の要素M</td><td>1行2列目の要素</td> </tr> <tr> <td>2行1列目の要素</td><td>2行2列目の要素</td> </tr> <tr> <td>3行1列目の要素</td><td>3行2列目の要素</td> </tr> <tr> <td>4行1列目の要素</td><td>4行2列目の要素</td> </tr> </tbody> </table> に対して、<head></head>内に <style type="text/css"> <!-- table[summary="サンプルの表"]{ border-collapse:separate;/* 分離して描く */ border-spacing:0px 30px;/* 左右の間隔が0px、縦の間隔が30px */ border-style:double; border-color:red; border-width:5px; } table[summary="サンプルの表"] th, table[summary="サンプルの表"] td{ border-style:solid; border-color:blue; border-width:2px 0;/* ボーダーの巾上下2px 左右0 */ padding: 0 20px; } table[summary="サンプルの表"] tr:nth-child(2n) td{ background-color:yellow; } table[summary="サンプルの表"] th{ background-color:aqua; } --> </style>
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_3_thumbnail_img_sm.png)
