TABLEタグ
<table>タグは、<tr>や<th>、<td>タグと組み合わせて表を作ります。
そのほか、<thead><tbody><tfoot>というタグもありますが、複雑かつ使用されないので解説しません。
- tr
- 一行のはじめには<tr>を書き、終わりには</tr>を書きます。
- th
- <tr>タグの間に、太い文字で書かれる項目を作れます。
- td
- <tr>タグの間に、一般的な表の項目を作ることができます。
| colspan="2"で、横2つの項目を合体 | |
|---|---|
| 左上 | 右上 |
| 左下 | 右下 |
- colspan/rowspan
- 複数の行/列をまとめます。
- align
- 横長の枠内で「align=""」を書けば、文字の位置をleft(左)center(中)right(右)にそろえます。
- valign
- 縦長の枠内で「valign=""」を指定すれば、文字の位置をtop(上)middle(中央)bottom(下)にそろえます。
table
表の形式については、以下の属性で決めることができます。
ただし、スタイルシートのほうがきれいに設定できるので、あえて書く必要はありません。
- cellspacing
- 表の項目と項目の間の余白を付けます。「cellspacing="1"」のように設定しますが、デザインが崩れがちです。
- cellpadding
- 項目の中での余白を付けます。「cellpadding="3"」のように設定します。
- frame
- 表の枠線を設定します。表示する場合には「border」しない場合には「void」が一般的です。
その他、above(上)below(下)hsides(上下)lhs(左)rhs(右)vsides(左右)box(全て)という指定もできます。 - rules
- 項目ごとの枠線を指定します。none(無し)groups(thead,tbody,tfootの間)rows(行間)cols(列間)all(全て)
- border
- 枠線の太さを定めます。「1」と指定すれば1pxを表します。
caption
<caption></caption>のあいだには、表のタイトルを書きます。
ただし、captionタグは必ずしも使わなければならないわけではありません。むしろ使わないほうがふつうです。
colgroup,col
<colgroup>と<col>は、表の形式を整えるために使います。
たとえば、上の表で、左側を30%の大きさ、右側を70%の大きさにそろえたい場合は下のように書きます。
| colspan="2"で、横2つの項目を合体 | |
|---|---|
| 左上 | 右上 |
| 左下 | 右下 |
<colgroup>の中の<col>で、一行ずつ指定していきます。
複数の行をまとめて指定したい時は「col colspan="2"」というように、項目と同じようにまとめます。
