HTMLを基本からまとめてみた【1】【table (テーブル) タグ】
はじめに
学習するに至った経緯
2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。
入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、
卒業後、フロントエンドのエンジニアを目指す事に。
HTMLの学習した事を言語化し、認識の深化による備忘録として記載。
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>
| 名前 | 色 | 味 |
|---|---|---|
| りんご | 赤 | 甘い |
Author And Source
この問題について(HTMLを基本からまとめてみた【1】【table (テーブル) タグ】), 我々は、より多くの情報をここで見つけました https://qiita.com/kanfutrooper/items/5c667f6577440d8cb10e著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .