【HTML】tableタグの基本的な使い方
Kこんにちは！Kです！
今回は、HTMLで表を作成するときに使う「tableタグ」について紹介します。
会社HPの会社概要や採用条件とかで見かける表とかをイメージしてもらえばいいですかね。
頻繁に使うタグではありませんが、たまに使うと「どうやって記述するんだっけ...」となる方もいると思いますので、この記事でまとめておこうと思います。
tableタグの基本的な使い方
最初にも説明しましたが、tableタグは表を作成するときに使用します。
例：HTML
<body>
<table>
<tr>
<th>サンプル項目1</th>
<th>サンプル項目2</th>
</tr>
<tr>
<td>サンプル1-1</td>
<td>サンプル2-1</td>
</tr>
<tr>
<td>サンプル1-2</td>
<td>サンプル2-2</td>
</tr>
</table>
</body>ブラウザでの表示結果
| サンプル項目1 | サンプル項目2 |
|---|---|
| サンプル1-1 | サンプル2-1 |
| サンプル1-2 | サンプル2-2 |
tableタグで囲まれているタグについて解説します。
<tr> 縦の列を作るときに使用するタグです <th> 見出しを作るタグです <td> 横の行を作ときに使用するタグです
thタグは見出し、trタグは列、tdタグは行と覚えておきましょう！
tableタグで使える属性について
tableタグで属性を指定することで表の見た目を変更することができていましたが、HTML5からはその指定がほとんど非推奨となっています。
そのため、ここでは紹介しません。
気になる方は調べてみてください！
表の見た目を変えたい場合はCSSを使って変更しましょう！
最後に
どうでしたでしょうか。
tableタグを使うことで簡単に表を作成することができました。
今回は本当に基本的なことだけ説明しましたが、もっとtableタグを使いこなすためには知っておいた方がいい知識もあるので、そこはまた次の記事で紹介しよう思います。
もしtableタグの記述の仕方を忘れてしまったときに参考にしてください。
それでは、また！
Follow me!
