HTML・CSS
HTML・CSSリファレンス(テーブル特集)
テーブルは頻出のレイアウト要素だが多種多様な属性があるのでまとめる。
- HTML
| border="n" | 枠線の太さ。記述しないor0は枠線の非表示。 |
| frame="frame" | テーブルの外枠線の表示。void：表示しない(既定値)、above：上側のみ、 below：下側のみ、hsides：上下のみ、vsides：左右のみ、lhs：左側(Left Hand Side)のみ、 rhs：右側(Right Hand Side)のみ、box：上下左右、border：上下左右 |
| rules="rules" | テーブルの内枠線を表示。 none：表示しない、groups：指定したグループの境界のみ、 rows：横方向のみ、cols：縦方向のみ、all：すべて(既定値) |
| align="align" | テーブル自体の表示位置。center,right.left。 |
| cellpadding="n" | セル内のpaddingの指定。 |
| cellspacing="n" | 枠間の幅を指定します。0を指定すると、立体感の無い枠線を表示することができる。 |
| cols="n" | セルの数を指定する。colspanを使用するとwight属性が使用できず均等幅割になるので、これでセルの数を増やし連結する数で幅を調整する。 |
| colspan="n" | 横のセルを結合する。結合した行のwight属性は指定できないはず。 |
| rowspan="n" | 縦のセルを結合する。結合したセルのheight属性を指定できるかは不明。 |
http://www.newcredge.com/IT/www/html/tag/table/table.html
| border: 1px #000000 solid; | 線の太さ、線の色、線のスタイルの順に指定する。 none(線無し)、dotted(点線)、dashed(粗い点線)、solid(実線)、double(二重線)、 groove(谷線)、ridge(山線)、inset(内線)、outset(外線)、inherit(継承) |
| border-collapse:collapse; | テーブルの各セルの枠線を隣のセルの枠線と重ねて表示 |
| border-collapse:separate; | テーブルの各セルの枠線を隣のセルの枠線と離して表示 |
- ポイント
枠線を細くするには･･･
多くのブラウザのデフォルトではテーブルの枠線はseparate表示になっている。
だからといって、HTMLやCSSで枠線の太さを1にし枠線の幅を0にしても太さ1の線がくっついている状態で、
実際は立体的に見えてしまう。枠線を1本の線にするには「border-collapse:collapse;」を使用すると楽。
