tableタグの基本的な使い方
① tableタグはtrタグ、tdを組み合わせて使う。
② tableタグにtrタグ、tdタグを入れ子にして使う。
使用例
<table>
<tr>
<td>たい焼き</td>
<td>茶色</td>
<td>あまい</td>
</tr>
<tr>
<td>なし</td>
<td>黄緑</td>
<td>甘い</td>
</tr>
</table>
※ tr：１つの行を意味します
※ td：セルの内容の記述
| たい焼き | 茶色 | あまい |
| なし | 黄緑 | 甘い |
tableタグで指定出来る属性
talbeタグの中に属性を指定してtableの罫線についての設定をする事が可能。
① border：表の外枠の罫線の太さ
② cellpadding :セル内の文字と罫線との間隔
③ cellspacing：セルとセルの間隔
をそれぞれpxで指定する。
使用例
<table border="2" cellpadding="6" cellspacing="5">
<tr>
<td>たい焼き</td>
<td>茶色</td>
<td>あまい</td>
</tr>
<tr>
<td>なし</td>
<td>黄緑</td>
<td>甘い</td>
</tr>
</table>
| たい焼き | 茶色 | あまい |
| なし | 黄緑 | 甘い |
tableタグ内の一番先頭にcaptionタグを入れて表に説明情報をつけることができる。
サンプル
<table border="1" cellpadding="6" cellspacing="0">
<caption>食べ物について</caption>
<tr>
<td>たい焼き</td>
<td>茶色</td>
<td>あまい</td>
</tr>
<tr>
<td>なし</td>
<td>黄緑</td>
<td>甘い</td>
</tr>
</table>
| たい焼き | 茶色 | あまい |
| なし | 黄緑 | 甘い |
##項目名について thタグ
表は１行目にその列の項目の種類を記述するのが一般的で、
tableタグでそれを表現する時は、tdタグの代わりにthタグを使う。
thタグ内の文字は、中央揃えを強調して表示される。
サンプル
<table border="1" cellpadding="6" cellspacing="0">
<caption>食べ物について</caption>
<tr>
<th>名前</th>
<th>色</th>
<th>味</th>
</tr>
<tr>
<td>たい焼き</td>
<td>茶色</td>
<td>あまい</td>
</tr>
<tr>
<td>なし</td>
<td>黄緑</td>
<td>甘い</td>
</tr>
</table>
| 名前 | 色 | 味 |
|---|---|---|
| たい焼き | 茶色 | あまい |
| なし | 黄緑 | 甘い |
##セルを結合する
隣接しているセルの内容が同じだった場合は、隣接しているせる同士を結合してまとめて表示した方が表が見やすく、そんな時は,rowspan,colspanをいう属性を指定する。
① 縦のセルを揃えたい場合、rowspan
結合したいセルの中で一番上のセル(tdタグ)内でrowspan属性を指定する。
rowspan=”結合するセルの数”
サンプル
<table border="1" cellpadding="6" cellspacing="0">
<caption>食べ物について</caption>
<tr>
<th>名前</th>
<th>色</th>
<th>味</th>
</tr>
<tr>
<td>りんご</td>
<td>赤</td>
<td rowspan="2">甘い</td>
</tr>
<tr>
<td>なし</td>
<td>黄緑</td>
</tr>
</table>
| 名前 | 色 | 味 |
|---|---|---|
| りんご | 赤 | 甘い |
| なし | 黄緑 |
② 横のセルを揃えたい場合、colspan
結合したいセルの中で一番左のセル(tdタグ)内でcolspan属性を指定する。
colspan=”結合するセルの数”
<table border="1" cellpadding="6" cellspacing="0">
<caption>食べ物について</caption>
<tr>
<th>名前</th>
<th>値段</th>
<th>味</th>
</tr>
<tr>
<td>りんご</td>
<td>200円</td>
<td>甘い</td>
</tr>
<tr>
<td>トリュフ</td>
<td colspan="2">買ったこと食べたことないので不明</td>
</tr>
</table>
| 名前 | 値段 | 味 |
|---|---|---|
| りんご | 200円 | 甘い |
| トリュフ | 買ったこと食べたことないので不明 | |
列、行をグループ化して色をつける
①列をグループ化するときはtableタグ内の最初にcolgroup要素を指定する。
colgroupとすると列がグループ化され、styleで背景色を指定すると色が付き、
colgroupは指定された順番に１列目、２列目という風にグループ化する。
<table border="1" cellpadding="6" cellspacing="0">
<caption>食べ物について</caption>
<colgroup style="background:red">
</colgroup>
<colgroup style="background:skyblue">
</colgroup>
<tr>
<td>名前</td>
<td>値段</td>
<td>味</td>
</tr>
<tr>
<td>りんご</td>
<td>200円</td>
<td>甘い</td>
</tr>
</table>
| 名前 | 値段 | 味 |
| りんご | 200円 | 甘い |
② colgroupタグ内で、col span=”2″とすると２列分をまとめてグループ化できる。
<table border="1" cellpadding="6" cellspacing="0">
<caption>食べ物について</caption>
<colgroup>
<col span="2" style="background:red">
</colgroup>
<tr>
<td>名前</td>
<td>値段</td>
<td>味</td>
</tr>
<tr>
<td>りんご</td>
<td>200円</td>
<td>甘い</td>
</tr>
</table>
| 名前 | 値段 | 味 |
| りんご | 200円 | 甘い |
③ 行のグループ化はthead,tbody,tfootの３要素で分ける事ができる。
- thead：一番上の行
- tbody：一番上と一番下の間にある行（tbodyは複数指定出来る）
- tfoot：一番下の行
- tbodyは複数指定出来るので、無限にグループを作る事ができます。
それぞれの使い方は、グループ化したい行のtrタグをそれぞれのタグで囲む。
<table border="1" cellpadding="6" cellspacing="0">
<caption>食べ物</caption>
<thead style="background:red">
<tr>
<th>名前</th>
<th>色</th>
<th>味</th>
</tr>
</thead>
<tbody style="background:yellow">
<tr>
<td>りんご</td>
<td>赤</td>
<td>甘い</td>
</tr>
</tbody>
<tfoot style="background:skyblue">
<tr>
<td>たい焼き</td>
<td>茶色</td>
<td>甘い</td>
</tr>
</tfoot>
</table>
| 名前 | 色 | 味 |
|---|---|---|
| りんご | 赤 | 甘い |
| たい焼き | 茶色 | 甘い |
<table border="1" cellpadding="6" cellspacing="0">
<caption>食べ物</caption>
<tbody style="background:red">
<tr>
<th>名前</th>
<th>色</th>
<th>味</th>
</tr>
</thead>
<tbody style="background:yellow">
<tr>
<td>りんご</td>
<td>赤</td>
<td>甘い</td>
</tr>
</tbody>
</table>
| 名前 | 色 | 味 |
|---|---|---|
| りんご | 赤 | 甘い |