【table】コードを書いて「表(ひょう)」を作る?表の骨格を組み立てるtableタグの記述方法

こんにちは。ヒロユキです。

今回はHTMLで「表」の骨格を組み立てる記述方法を解説していきますよ〜。

tableタグで構成する表の組み立て方

小松田くん

tableタグってなんだか複雑ですよね。難しいイメージがあります。

尾地ヒロユキ

ひとつひとつの役割を理解できるとそうでもないぞ。一緒に確認していこう!!

全体を囲むtableタグ

tableタグをつかうと、こんな表が作れます。↓

表の作り方1

tableタグ(テーブルタグ)

表を作成する要素。表に関する要素は全部この中に記述する。

枠線などの装飾はCSSをつかいますが、骨格となる部分はHTMLで記述します。

ざっとコードを見てみましょう。↓

<table>
 <thead>
  <tr>
   <th>年</th>
   <th>月</th>
   <th>活動記録</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>2021</td>
   <td>3</td>
   <td>ブログ開設</td>
  </tr>
  <tr>
   <td>2022</td>
   <td>9</td>
   <td>ポートフォリオ公開</td>
  </tr>
 </tbody>
</table>

tableタグの中にいくつかのタグを入れ子にして、表の骨格を作っていきます。

table headとtable body

tableタグの中には大きく分けて2つの要素、thead(!)とtbody(!)が入ります。↓

<table>
 <thead>
  <tr>
   <th>年</th>
   <th>月</th>
   <th>活動記録</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>2021</td>
   <td>3</td>
   <td>ブログ開設</td>
  </tr>
  <tr>
   <td>2022</td>
   <td>9</td>
   <td>ポートフォリオ公開</td>
  </tr>
 </tbody>
</table>

theadタグ(ティーヘッドタグ)

表の見出し部分を表現する要素。「table head」の略。

tbodyタグ(ティーボディタグ)

表の中身にあたる部分を表現する要素。「table body」の略。

表の見出しは「table head」

theadタグは表の見出し部分を表現します。ブラウザ画面で見るとこの部分ですね。↓

表の作り方2

コードの記述はこんな感じ。↓

<thead>
 <tr>
  <th>年</th>
  <th>月</th>
  <th>活動記録</th>
 </tr>
</thead>

表の中身は「table body」

tbodyタグは表の中身の部分を表現します。こちらもブラウザで見てみましょう。↓

表の作り方3

コードの記述はこんな感じ。↓

<tbody>
 <tr>
  <td>2021</td>
  <td>3</td>
  <td>ブログ開設</td>
 </tr>
 <tr>
  <td>2022</td>
  <td>9</td>
  <td>ポートフォリオ公開</td>
 </tr>
</tbody>

theadの項目を作る

theadタグの項目は、th(!)タグをつかって表現します。

thタグ(テーブルヘッダーセルタグ)

表の見出し部分の項目を表現する要素。「table header cell」の略。

thタグで記述された項目名は、ブラウザ画面の向かって左から順番に表示されます。↓

<thead>
 <tr>
  <th>年</th>
  <th>月</th>
  <th>活動記録</th>
 </tr>
</thead>

行を作るtrタグ

thタグで表に必要な項目を用意したら、次はそれらをtrタグで囲みます。

trタグ(テーブルロウタグ)

表の行の部分を表現する要素。「table row」の略。

trタグは表の横向き、つまり「行」を表現する要素です。見出し部分は通常1つの行ですが、表の中身を表現するtbody内ではいくつかの行に分けるのでtrが大切になってきます。

これで見出し部分は完成です。↓

<thead>
 <tr>
  <th>年</th>
  <th>月</th>
  <th>活動記録</th>
 </tr>
</thead>
尾地ヒロユキ

「thead」の項目だから「th」って覚えるとわかりやすいな。

tbodyの項目を作る

tbodyの項目は、td(!)タグをつかって表現します。

tdタグ(テーブルデータセルタグ)

表の内容部分の項目を表現する要素。「table data cell」の略。

tdタグで記述された項目名もthと同じでブラウザでは左から順番に表示されます。

こちらも項目が揃ったら行ごとに、trタグで囲みましょう。↓

<tr>
 <td>2021</td>
 <td>3</td>
 <td>ブログ開設</td>
<tr>

これで内容の部分も完成です。

小松田くん

tbody」の項目は「tb」じゃなくて「td」です。気をつけてくださいね。

表の「枠線」と「中央揃え」もできるようになろう

装飾などはCSSで行うとしても、このままじゃ表として少し分かりづらいので「枠線」と「項目の中央揃え」ができる属性もおぼえておきましょう。

表の作り方4

枠線を表示するborder属性

表の枠線を表示させるには、tableタグにborder属性(!)を追加します。

border属性(ボーダー属性)

tableタグで作った表の枠線を表示させる属性。属性の値は”1”か” ”(0)にする。

<table border="1">
 <thead>
  <tr>
   <th>年</th>
   <th>月</th>
   <th>活動記録</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>2021</td>
   <td>3</td>
   <td>ブログ開設</td>
  </tr>
  <tr>
   <td>2022</td>
   <td>9</td>
   <td>ポートフォリオ公開</td>
  </tr>
 </tbody>
</table>

中央揃えはalign属性

文字の位置をざっくり揃えたい時は、trタグにalign属性を追加します。

align属性(アライン属性)

文字列の位置を揃える属性。属性の値は、”left”⇒左詰め、”right”⇒右詰め、”center”⇒中央揃え。

<table>
 <thead>
  <tr>
   <th>年</th>
   <th>月</th>
   <th>活動記録</th>
  </tr>
 </thead>
 <tbody>
  <tr align="center">
   <td>2021</td>
   <td>3</td>
   <td>ブログ開設</td>
  </tr>
  <tr align="center">
   <td>2022</td>
   <td>9</td>
   <td>ポートフォリオ公開</td>
  </tr>
 </tbody>
</table>

<table>で構成する表の組み立て方 まとめ

今回の内容をまとめるとこんな感じ。↓

表の作り方まとめ

表を構成するタグは他にもいくつかあります。tableタグも工夫すれば見出しを縦に持ってきたり、もっと大きな表を作ることだってできます。

基本を理解して応用してみましょう。

それじゃまた。ヒロユキでした。

気に入ったらシェアしてね
ABOUT US
尾地ヒロユキOji Hiroyuki
Webページを作ったり、アプリやゲームを作ったり、作業の効率化だってできちゃうプログラミング。なのに「なんだかむずかしそう」「自分にはムリだよ」って諦めちゃうのはもったいない!プロじゃなくてもプログラミングしませんか?このブログ「つみきのーと」では、知識ゼロからのスタートを応援します。Twitter ⇒「PC豆知識」Instagram ⇒「Macショートカットキー」Pinterest ⇒「図解イラスト」を発信中。そっちもcheckだぞ♪