【副業を始めたい人必見!】副業開始マニュアル

【tableタグ】表の作成方法を解説!

【tableタグ】表の作成方法を解説! HTML

どうも!ニシドラ(@nishidorablog)です。

ニシドラ
ニシドラ

この記事では、HTMLでの表の作成方法について解説します。

HTMLで表を作成するときに使うタグは「tabelタグ」「trタグ」「thタグ」tdタグの4種類です。
この4つのタグを組み合わせて使います。

一見すると難しそうに思うかもしれませんが構成は非常にシンプルです。

4つのタグを組み合わせた使い方と表のマス目を結合させる方法を解説していきます。

【HTML初心者向け】まとめ記事一覧

前回の、リンクの挿入方法については、【aタグ】リンクの挿入方法を解説!でまとめています。

スポンサーリンク

それぞれのタグの意味・用途

冒頭で4つのタグが必要と書きました。
表を作成するにはこの4つのタグを組み合わせて使います。

まずは、4つのタグの意味について説明していきます。

tableタグ

table 赤枠

tableタグ」のtableは、英語でテーブルや囲うというような意味で表の外枠」を作成することができるタグです(上図の赤色の枠)。

後述する「trタグ」「thタグ」「tdタグ」を囲って使います。

trタグ

tr 緑色の枠

trタグ」のtrは「table row」の略で、英語で「テーブルの行」を意味します。

上図の緑色の枠で囲われた部分がtrタグで「行」を作成した部分です。
この場合、<tr>タグの中にthタグとtdタグをともに3つ書いたので横に3つセルができました。

<tr>タグの中に入っているthタグ、tdタグの数だけ横にセルを増やすことができます。

thタグ

th 青色の部分

thタグ」のthは「table header」の略で、英語で「表の見出し」を作成します。

上図の青色の部分がthタグで表示されるセルで、文字は太文字で表示されます。

thタグは表の作成に必須ではなく、見出しが必要ない場合は省略することができます。

tdタグ

td 黄色の部分

tdタグ」のtdは「table date」の略で、英語で「表のデータ」を意味し、実際に値を入れるセルを作成します。

表の作り方

表作成に使うタグの用途について書いてきました。
実際に、tableタグ、trタグ、thタグ、tdタグを使うと下のコードのようになります。

<table>
<tr>
        <th>th1</th>
        <th>th2</th>
        <th>th3</th>
</tr>
<tr>
        <td>td1</td>
        <td>td2</td>
        <td>td3</td>
</tr>
<tr>
        <td>td4</td>
        <td>td5</td>
        <td>td6</td>
</tr>
</table>

このコードでは、見出しを3つ(赤文字)、値を入れるセル縦2列で合計6つ(緑文字)作成するように書きました。
ブラウザで表示させると下図のようになります。

ブラウザの表示

デフォルトの状態だとtableタグとセルの枠は表示されません。
上の画像では見やすくするためにCSSでスタイルを変更して黒い色の枠を表示させています。

縦にセルを結合する方法

次に表中のセルを縦につなげる方法を解説します。

セルを縦につなげるには「rowspan」属性を使います。
rowspan属性にはつなげたいセルの個数を指定します。

基本的な書き方は、つなげたいタグ(th or td)の後にスペースを1つ空けて、
rowspan=” 個数 “」と書きます。

「td1」と「td3」をつなげる場合、書き方は以下のようになります。

<table>
<tr>
<th>th1</th>
<th>th2</th>
</tr>
<tr>
<td rowspan=”2″>td 1+3</td>
<td>td2</td>
</tr>
<tr>
<td>td4</td>
<tr>
</table>

ブラウザ上で表示させたのが下の画像です

縦に結合

このようにつながります。

rowspan属性で個数を指定しなかった場合は” 1 “が初期値になっています。
また、指定する個数に限度はありませんがセルより多い個数を指定すると、セルの幅がおかしくなってしまいます。
書式がおかしい様子1

横にセルを結合する方法

表中のセルを横につなげる方法を解説します。

セルを横につなげるには「colspan」属性を使います。

書き方はrowspan属性と変わりません。
つなげたいタグ(th or td)の後にスペースを1つ空けて、
colspan=” 個数 “」と書きます。

「th1」と「th2」をつなげる場合、書き方は以下のようになります。

<table>
<tr>
<th colspan=”2″>th 1+2</th>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
</tr>
<tr>
<td>td3</td>
<td>td4</td>
<tr>
</table>

ブラウザ上で表示させると下の画像ようになります。

横に結合

まとめ

内容をまとめると以下のようになります。

  • tabelタグ、trタグ、thタグ、tdタグの4種類の4種類のタグで構成されている。
  • tabelタグ、trタグは外枠を作成する(デフォルトでは見えない)
  • thタグ、tdタグで作成したセルにデータを入れていく
  • 縦・横にセルをつなげることができる

今回はHTMLで表を作成する方法を解説してきました。
解説の途中で出ていた表の画像を見てもらえればわかると思いますが結構シンプルです。

ニシドラ
ニシドラ

デザインを変えるには、CSSで装飾しないといけません。

次回は、「ブロック要素とインライン要素について」解説します。

コメント

タイトルとURLをコピーしました