【WEB制作】 tableタグをマスターしよう！ 投資家のFIREへの旅路 第285回

htmlで表を作る<table>タグについてまとめます。
基礎的なことだけど、なんか毎回よくわからなくなりませんか？
ここで整理しておきたいと思います！

【tableタグ】

tableタグを使うと、こんな感じの表が作れます。

tableタグを使って作る表

この表のコードは、以下の通りです。

<table>
  <tr>
    <th>メニュ</th>
    <th>価格</th>
  </tr>

  <tr>
    <td>たこ焼き</td>
    <td>350円</td>
  </tr>


  <tr>
    <td>焼きそば</td>
    <td>500円</td>
  </tr>
</table>

では、それぞれのコードの意味を見ていきましょう！

<tr>タグ

「table row」の略です。rowは「行」（ぎょう）を意味します。
つまり、横部分を指定するコードになります。

上記のコードの場合は、
<tr>の中に、<th>があって、<th>の中に「メニュ」
もう一つの<th>の中に、「価格」という内容が書かれています。
さらに<th>を追加して、「サイズ」などと書くと、
「価格」の横に「サイズ」という項目を作ることができます。

このように、<tr>で囲むと、横へ横へと項目が追加されます。

<th>タグ

「table header」の略です。headerなので、見出しですね、表のタイトルになるような項目を<th>タグで囲みます。
上記のコードでは、「メニュ」と「価格」を<th>タグで囲んでいます。
表の構成として、この２つの項目はその下にくる内容が何かを表していますので、<th>で囲んでいるというわけです。

<td>タグ

「table data」の略です。
上記のコードでは、
「たこ焼き」「350円」
「焼きそば」「500円」
の部分が、<td>タグで囲われています。

注意点

tableタグの注意点は、<th>の数と、<td>の数は合わせておくということです。
上記の表でいくと、<th>の項目が「メニュ」「価格」の２つで、
<td>の項目も、「たこ焼き」「350円」と２つです。
表のタイトルと内容が同じ数でないと、表は成り立ちませんので、注意しましょう。

スタイルの指定

tableタグでは、<tr> <th> <td>を組み合わせて表を作りますが、
CSSでスタイルを指定しなくても、表形式で表示されます。
borderなどの指定はしなくても囲いの線が表示されます。

表のスタイルを変えたい場合は、

table th {
  border: solid 2px black;
  color: #FF9800;
  background: #fff5e5;
}


table td {
  border: solid 1px blue;
}

このようのに、タグ名で指定して、
文字色であれば、color、背景色であれば、backgroundなどで指定ができます。
色々、試してみるのが一番ですので、いじってみましょう！！

【まとめ】

tableタグについて、解説ました。
htmlの勉強していると基本の部分で出てくるので、実践の頃に忘れてる内容かと思います。
また、tr 、th、 tdと、似たようなタグが出てくるので、何が何かわからなくなりがち！！
その都度調べて、思い出せばオッケーです！

皆さんの備忘録的に記事になれば幸いです！！