tableタグ

表組みを作る

"table"タグは表を作成するときに使います。

<table>
</table>

表の見出し

今回は例として
テストの成績の表を作ります。
まず、表の見出しとして科目を作ります。

<table>
 <thead>
  見出し
 </thead>
<table>

"thead"タグの間に内容を書いていきます。

<tr><th>名前</th><th>英語</th><th>国語</th></tr>

"tr"はtable rowの略で行を意味します。
"th"はtable headerの略です。
見出しをつけるときはこの書き方を使います。
これらを合わせると

名前	英語	国語

実際はこのように表示されます。

表の中身

表の内容を書くときは"tbody"タグを使います。

<table>
 <tbody>
  中身
 </tbody>
</table>

このタグの中に

<tr><td>太郎</td><td>50</td><td>80</td></tr>
<tr><td>花子</td><td>60</td><td>90</td></tr>

"td"タグはtable dataの略です
これを入れると

太郎	50	80
花子	60	90

こうなります。

表を完成させる

"thead"と"tbody"を合わせると…

<table>
 <thead>
  <tr><th>名前</th><th>英語</th><th>国語</th></tr>
 </thead>
 <tbody>
  <tr><td>太郎</td><td>50</td><td>80</td></tr>
  <tr><td>花子</td><td>60</td><td>90</td></tr>
 </tbody>
</table>

名前	英語	国語
太郎	50	80
花子	60	90

このように表となります。

以上です。

教材:ドットインストール - 3分動画でマスターする初心者向けプログラミング学習サイト