昨日の記事にて大量に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<私