テーブルタグのボーダーラインを細く/HTML小技編
テーブルタグは表を作るためのタグでレイアウトのために使うのは本来の使い方として好ましくありません。しかし、ブログのエントリー内の一部に使うくらいならば充分許容範囲内です。そこでちょっと見せるためのテーブルタグの使い方です。
これは通常の3×3の表組みです。境界線の幅の指定を1に指定し色を#666666のグレーにしてみました。通常はこれ以上境界線を細めることは出来ません。境界線をもっと細くし表組みの見栄えを変えたい場合の小技を紹介します。
CSSを使ったtableのborderを細く見せる方法は、テーブルをスタイルシート(CSS)でデザインしよう:アフィリエイトの集いで書いています。
次のテーブルが小技を使ったテーブルタグです。境界線が細くなりイメージが変わりました。
|
タグを見る
これは、全体の幅と高さ、それか表の背景色を指定した1×1の表組みを作りセルが1つ出来ます。1つ目のテーブル内のセルに3×3のテーブルを作ります。
このようにテーブルの中に更にテーブルを組むことをネストと言います。テーブルをネストして...
のように使います。中に出来たテーブルには全行の背景色をテーブルの外側の色と同じ色を指定しセルの行間を1と指定します。ネストされたテーブルの幅と高さは100%と指定することで外側のテーブルにくっつかせます。この小技の指定法ですっきりした印象の表が完成します。
注意点としては、テーブルのネストのし過ぎに注意です。
通常版 | 小技版 |
---|---|
実際にアフィリエイトツールを使用して見ました。
アフィリエイトツール{WEDサービス}
追記(2007年10月11日 21:29:01)
テーブルタグは本来、表を表すためのタグです。表とは、縦と横の軸に関連している場合を表といいます。
このように表示のためにテーブルタグを使うのは好ましくありません。
本来は見栄えを整えるために使うのはCSSで指定するのがWeb標準に則ったやりかたです。
このようにHTMLで見栄えを表すタグ(視覚的表現)の為にTABLEタグを使うっていた背景にはブラウザのバージョンによりCSSを正しくレンダリングしないブラウザが多かったためです。
現在ではブラウザのバージョンアップも進み訪問者の環境が整っているのでCSSを使って様々なデザインに発展してきています。
以下の書籍が参考になります
Sponsored links
先日、やっと日本に帰ってきました。
どたばたしているので、Blogの更新などは来年からになりそうです。
細い罫線のTbaleを作る方法は、ネスト以外にCSSを使う方法があります。
罫線の太さもpx単位で調節できますし、セル単位でも罫線の太さを変える事が出来ます。
TD毎に罫線を指定する事で可能ですが、それだと1pxにした場合に、上下左右が重なる部分の罫線だけ
倍の2pxになります。
TD以外にTableにborder-collapse: collapse;を追加する事で、罫線が重なるように指定する事ができ、綺麗なTableを作成する事が出来ます。
是非一度お試しアレ〜。
ではでは=3
CSSは只今激しく勉強中でしてtableの装飾についても勉強した方が良さそうですね。ありがとうございました。