テーブル内の二重罫線

テーブルの作成中、些細なミスから二重罫線のような表現ができることに気付きました。空のセルを１列挿入して、そこに <br> を入れるとできます （例１）。

空のセルに <br> を入れないと横罫線が途切れます。二重罫線とは異なる印象になります （例２）。

「padding」 の値が大きくなると、単なる空白セルにしか見えません （例３）。

<tr> に背景色を設定してみます。<br> の有無に関係無く、行単位で着色します （例４，５）。

二重罫線部分への着色が気になるようなら、該当セルに別の背景色 （#FFFFFF など） を追加設定すれば解決です （例６，７）。

対象行の１セルごとに背景色を設定する必要は無いようです。

ページやテーブルの表示領域に背景色が設定されている場合は、二重罫線部分の背景色を調整する必要が有ります （例８，９）。

調子に乗って、横の二重罫線も考えてみましたが 基本形は失敗。<br> が入ると１文字分の高さが確保されてしまいます （例１０）。

<br> を入れない方は大丈夫。これはこれで、太罫線の代わりに使えそうです （例１１）。

透過色のＧＩＦ画像を１×１ピクセルで用意して <br> の代わりに埋めれば、横の二重罫線ができそうですね。いつか試してみましょう。 → 試してみました。

枠線の種類をスタイルシートで設定した （例１４）。

ＨＴＭＬソースを見れば分かるが、１行，１列でも増減したら 保守が大変 だ （汗）。

<table> タグの直後に、<caption>例１（基本形）</caption> のように記述する。

また、<caption align="表示位置">〜</caption> とすればテーブル見出しの位置を指定できる。

align="top" と align="bottom" が指定できる。ＩＥでは align="left" と align="right" も指定できる。

align 属性は ＨＴＭＬ４非推奨。さらに align="left" と align="right" は、ＮＮ未対応。

スタイルシートによるテーブル見出しの位置指定については、ブラウザ間の差異が大きい。

従って、align 属性やスタイルシートによるテーブル見出しの位置指定は、できるだけ使わない方が良さそうだ。