HTML入門講座 tableタグの使い方 基礎編 表を作るのに必要な知識5つ

前回の記事で少しだけ触れた、レイアウトタグについての記事とさせていただきます。

なお、レイアウトタグは自分が勝手につけた名前なので、ここだけの呼び名としてください

tableタグ

前回すこしだけ見たtableタグです

<table>というタグで囲まれたタグのことを指しますが、この記事では覚えることが全部で4つあります

これが書けるようになると、こんな表を作れるようになります。

日付 今日の勉強時間
2019年 4月1日 3時間
2019年 4月2日 5時間
2019年 4月3日 1時間
2019年 4月4日 4時間

では実際にどのようになっているのか、一緒に見ていきましょう

<table>
<tbody>
<tr>
<th>日付</th>
<th>今日の勉強時間</th>
</tr>
<tr>
<td>2019年 4月1日</td>
<td>3時間</td>
</tr>
<tr>
<td>2019年 4月2日</td>
<td>5時間</td>
</tr>
<tr>
<td>2019年 4月3日</td>
<td>1時間</td>
</tr>
<tr>
<td>2019年 4月4日</td>
<td>4時間</td>
</tr>
</tbody>
</table>

すこし長くなりましたが、実際は簡単ですぐに覚える事ができます!
これから1つずつ紐解いていこうと思います

tableタグ

まずtableタグを書きはじめるには
<table>
で始まります
終わるときも
</table>
で終わります。

tdタグ テーブルの枠(セル)

テーブルの1つ分の枠がこのtdタグです。
他のタグと同じように</td>で終わります。
先ほどのtableタグと、このtdタグだけで表を組んでみます

A B C

こんな感じになります!

<table >
<tbody>
<td>A</td>
<td>B</td>
<td>C</td>
</tbody>
</table>

本当にtableタグとtdタグしか使っていませんが、一応これだけでも形にはなります!
ちなみにこのテーブル枠1つ分のことをセルと呼びます。
ドラゴンボールではありません

では次に、trタグを組み込んでみましょう!

trタグ テーブルに段落を追加する

trタグでは、tableの段落を追加できます。
先ほどのABCすべてに段落を追加してみました!

A
B
C
<table >
<tbody>
<tr>
<td>A</td>
</tr>
<tr>
<td>B</td>
</tr>
<tr>
<td>C</td>
</tr>
</tbody>
</table>

最初に出た表のように、横に2列ずつ表示して改行したい場合は
このような書き方になります

A A
B B
C C
<table >
<tbody>
<tr>
<td>A</td>
<td>A</td>
</tr>
<tr>
<td>B</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>C</td>
</tr>
</tbody>
</table>

そろそろ全体が見えてきたのではないでしょうか?
次はthタグを紹介します!

thタグ 見出しのセルを追加する

tdタグではセルの追加を行いましたが、thタグはセルの見出しの部分を追加します
tdタグでも賄うことは出来るのですが、thタグを使うほうが構文的には適切です。
またCSSを扱う際にも、thタグを使うほうが編集をやりやすくなると思います

では、最初に紹介した表をもう一度確認してみましょう

日付 今日の勉強時間
2019年 4月1日 3時間
2019年 4月2日 5時間
2019年 4月3日 1時間
2019年 4月4日 4時間

タグはこちらです。

<table>
<tbody>
<tr>
<th>日付</th>
<th>今日の勉強時間</th>
</tr>
<tr>
<td>2019年 4月1日</td>
<td>3時間</td>
</tr>
<tr>
<td>2019年 4月2日</td>
<td>5時間</td>
</tr>
<tr>
<td>2019年 4月3日</td>
<td>1時間</td>
</tr>
<tr>
<td>2019年 4月4日</td>
<td>4時間</td>
</tr>
</tbody>
</table>

以上がtableタグの基本です
これらを覚えていれば、簡単な表を組むことが出来ると思います。
最後に、より便利にするための機能を紹介します

colspan rowspanセルを結合する

まずはこちらをご覧下さい

日付 2019年 4月1日 2019年 4月2日 2019年 4月3日 やすみ 2019年 4月6日
今日の勉強時間 3時間 5時間 1時間 5時間
<table>
<tbody>
<tr>
<th>日付</th>
<td>2019年 4月1日</td>
<td>2019年 4月2日</td>
<td>2019年 4月3日</td>
<td rowspan="2">やすみ</td>
<td>2019年 4月6日</td>
</tr>
<tr>
<th>今日の勉強時間</th>
<td>3時間</td>
<td>5時間</td>
<td>1時間</td>
<td>5時間</td>
</tr>
</tbody>
</table>

『やすみ』という枠を追加してみました
これはrowspanで縦に繋げています。
tdのすぐ後ろにrowspanで数値を追加します
ここで入れている2という数は、結合させたいセルの数です
colspanは横にセルを繋げます。
rowspanは縦にセルを繋げます。

コメント

タイトルとURLをコピーしました