昨日の記事にて大量にtable上記を使い、面倒臭かったのでスタイルシートのtable部分の記述を変更。テーブル作成時の手間を減らす事にした。
具体的に書くとスタイルシートに以下の記述を挿入。
.main table th {
text-align: right;
margin: 0px;
padding: 0px;
letter-spacing: 0.1em;
}
.main table td {
margin: 0px;
font-size: 12px;
line-height: 120%;
padding: 1px 2px;
color: #333333;
border-width: 1px;
border-style: solid;
border-color: #dddddd;
}
.main table {
margin: 5px;
padding: 0px;
border-collapse: collapse;
}
.main table p {
margin:0.5em 0px 0.5em 0px;
}
ウチのブログは、本文がdivclass="main" で囲まれているので、スタイルシートに上記記述してやる事で、テーブルタグに細かな指定をしなくても
こんなふうに | tableタグに特に指定を | しなくても勝手に |
細くて薄めの枠線が | 自動的に引かれて | とても便利なのですよ。 |
ウチのブログの場合、marginとpaddingの設定が悪くてtable幅を100%にするとサイドバーが落ちてしまう( 何が悪いのか判明したのがつい最近。未修正 ) なので、幅指定する時は最大95% まで。
さらにtableに枠線を付けたくない場合 はclass="pic"のDIVタグで囲む ようにした。
.pic table th{border:0;margin:0;padding:0;}
.pic table tr{border:0;margin:0;padding:0;}
.pic table td{
font-size: 12px;
line-height: 120%;
margin:0;
padding:0;
color: #333333;
border-width: 0px;
border-style: solid;
border-color: #ffffff;
}
tableタグに枠線を付けたくない時は、ほぼ画像を並べる場合に限られる。
と言う事でclass名picの部分に追加。
これに伴って過去tableタグを使用していたページのレイアウトが崩れまくったので、本日はソレを地味にチョコチョコ修正。あと<blockquote>タグも色が派手で落ち着かなかったので地味目の色に修正。
全ページ見直してみたが、枠線を付けたくないtableタグは1ページしかなかった。
今までそんなに使っていなかったんだね、枠線無しTable<私