【初心者向け】表を作るには4つのタグがあればできる!【HTML】

table_アイキャッチ
こばゆた
こばゆた

表に関するタグは似ていて「どれをつかうんだっけ?」、「どちらがどっちだっけ?」と迷ってしまう事が多いと思います

こばゆた
こばゆた

でも実際はたった4つのタグを覚えてしまえば基本的な枠組みは作成でき、少しデザインすれば以下のようにありがちな表を作成する事ができます

表サンプル
きなこ
きなこ

えー、難しそう

こばゆた
こばゆた

大丈夫!

中盤くらいから例を出しながら一緒に作っていくので頑張ろう

スポンサーリンク

1.表を作成する時に使うタグ

まず先に表を作るためにつかうタグを紹介しておきます。

タグ意味
tableこのタグで囲う事により表を作る
tr“Table Row”の略で行(横)を表す
th“Table Head”の略で見出し(タイトル)を表す
td“Table Data”の略で表のセル(中身)を表す
tableタグ早見表

4つのタグとこの表の関係をイメージしておくようにしてください。

ちなみに見出しがない場合は<th>タグはカットできます。

では実際に作りながら見ていきましょう。

スポンサーリンク

2.表の作り方

表の作り方
  • STEP1
    tableタグを書く

    <table>
      
    </table>

  • STEP2
    tableタグ内にtrタグで行を作る

    <table>
       <tr></tr>
    </table>

  • STEP3
    trタグ内にthタグで表のタイトルを入れる
    タイトルを必要な分作成します。ちなみに一番先頭を開けているのはレイアウトのためです。

    <table>
       <tr><th></th><th>プランA</th><th>プランB</th><th>プランC</th></tr>
    </table>

    表の作り方step3タイトルっぽい太さの文字になりました。

  • STEP4
    trタグで2列目を作る

    <table>
        <tr><th></th><th>プランA</th><th>プランB</th><th>プランC</th></tr>
        <tr></tr>
    </table>

  • STEP5
    tdタグを用いて2列目の中身を作る
    こちらは先頭も記入しています

    <table>
        <tr><th></th><th>プランA</th><th>プランB</th><th>プランC</th></tr>
        <tr><td>データ量</td><td>3GB</td><td>5GB</td><td>10GB</td></tr>
    </table>

    表の作り方step5

  • STEP6
    tdタグを用いてさらに3列目の中身を作る

    <table>
     <tr><th></th><th>プランA</th><th>プランB</th><th>プランC</th></tr>
     <tr><td>データ量</td><td>3GB</td><td>5GB</td><td>10GB</td></tr>
     <tr><td>料金</td><td>¥1,480</td><td>¥2,780</td><td>¥3,500</td></tr>
    </table>

    表の作り方step63列目にもメニューを入れて完成です。

こばゆた
こばゆた

線が入っていないから表っぽくありませんが、線の入れ方は以下で紹介しています

tableタグ内にborder=”数字”とすると罫線をつけられます。また数字を変えると太さも変わります。

<table border="1">
 <tr><th></th><th>プランA</th><th>プランB</th><th>プランC</th></tr>
 <tr><td>データ量</td><td>3GB</td><td>5GB</td><td>10GB</td></tr>
 <tr><td>料金</td><td>¥1,480</td><td>¥2,780</td><td>¥3,500</td></tr>
</table>
表に線を入れたもの

きなこ
きなこ

わぁーい!表が作れた!

こばゆた
こばゆた

あとはこれにCSSで色とかを付けれれば見栄えも良くなるよ

表をCSSで装飾したもの
こばゆた
こばゆた

だいたい例の通りになったかと思われます

チャッピー
チャッピー

っぽくなった!

3.セルの操作

こばゆた
こばゆた

ここからは少し応用になりますが、セルの統合の仕方です

セルの結合例_1

このような表があったとします。

3-1.横方向につなげる場合

セルを横方向につなげる場合はつなげたいセルのタグ内にcolspan=”数字”を記入すします。数字はつなげたいセルの数を書きます。

例えばセル1とセル2をつなげる場合はthタグ内に”colspan属性”を記入し、値を2とします。

<th colspan="2">セル</th>
上のセルを結合
<table border="1">
   <tr>
     <th colspan="2">セル1</th>
   </tr>
   <tr>
     <td>セル3</td>
     <td>セル4</td>
   </tr>
   <tr>
    <td>セル5</td>
     <td>セル6</td>
   </tr>
</table>

結合したセルを消すのを忘れないように注意。

またcolspan=” 3”とすると横3セル分結合できます。

<th colspan="3">セル</th>
セルを3つ結合
<table border="1">
   <tr>
     <th colspan="3">セル1</th> 
   </tr>
   <tr>
     <td>セル3</td>
     <td>セル4</td>
      <td>セル5</td>
   </tr>
   <tr>
     <td>セル6</td>
     <td>セル7</td>
     <td>セル8</td>
   </tr>
</table>

3-2.縦方向につなげる場合

セルを縦方向につなげる場合はつなげたいセルのタグ内にrowspan=”数字”を記入すします。こちらも数字はつなげたいセルの数を書きます。

<td rowspan="2">セル3</td>
縦にセルを結合
<table border="1">
   <tr>
     <th>セル1</th>
     <th>セル2</th>
   </tr>
   <tr>
     <td rowspan="2">セル3</td>
     <td>セル4</td>
   </tr>
   <tr>
     <td>セル6</td>
   </tr>
</table>

こちらもrowspan=” 3”とすると縦3セル分結合できます。

縦にセルを3つ結合
<table border="1">
   <tr>
     <th rowspan="3">セル1</th> 
     <th>セル2</th> 
     <th>セル3</th> 
   </tr>
   <tr>
     <td>セル5</td>
     <td>セル6</td>
   </tr>
   <tr>
      <td>セル8</td>
      <td>セル9</td>
   </tr>
</table>
こばゆた
こばゆた

表はややこしく少し難しいけど使う機会も結構あるのでおさえておきましょう

最初にも言いましたがイメージが大事です。

4.まとめ

表を作るタグまとめ

タグ意味
tableこのタグで囲う事により表を作る
tr“Table Row”の略で行(横)を表す
th“Table Head”の略で見出し(タイトル)を表す
td“Table Data”の略で表のセル(中身)を表す
表を作るタグ

  • tableタグ内にborder=”数字”とすると罫線をつけられます。また数字を変えると太さも変わる
  • セルの結合は横だとタグ内にcolspan=”数字”、縦ならrowspan=”数字”とする。数字はつなげたいセルの数を書く。結合したセルを消すのを忘れない

コメント