HTML タグの使い方 テーブル・表の作り方

本記事は広告が含まれる場合があります HTML

HTML tableタグの使い方・テーブル 表の作り方

今回は、HTMLの学習を始めたばかりの初心者の方を対象に、テーブルタグ(table)を利用して、表を作る方法を説明していきます。

Tableタグの説明
 

 

テーブルタグ tableの基本的な使い方

まずはテーブルを使った表作成の基本を説明していきます。

Tableタグの説明
 

表を作成したい場合は、tableタグを含めて複数のタグを利用して構成します。よく使うタグは下記の通りです。

タグ 意味
table 【最重要】テーブルを定義
tr 【重要】table rowの略。テーブルの行を定義。
th 【重要】table headerの略。テーブルの見出し項目を定義。
td 【重要】table dataの略。テーブルのデータ項目を定義。
thead table headの略。テーブルのヘッダー部分の定義。必要に応じて記述(必須ではない)
tbody table bodyの略。テーブルのボディ部分の定義。必要に応じて記述(必須ではない)
tfoot table footerの略。テーブルのフッター部分の定義。必要に応じて記述(必須ではない)

 

【ステップ1】tableタグで大きく括りテーブル表を定義する

まず<table>~</table>で大きくくくります。
html tableタグ

 

【ステップ2】trタグで表の横一行を定義する

次に、tableタグ内に<tr>~</tr>を記述して、表の横一行を定義します。
html tableタグ trタグ

 

【ステップ3】th、tdタグで表のセルデータを定義する

trタグのなかで、見出しに該当する項目を、「<th>~<th>」で定義します。
html tableタグ thタグ

 

同様にしてtrで行を追加していきます。データに該当する項目はthではなく、<td>~<td>で定義します。
tableタグ セルデータをtdで囲む

 

同様にして、trで行を追加し、tdで中身のデータを入れていきます。
table、tr、th、tdを使って表を作っていく
 

Webブラウザで見た時の表示は下記のようになります。
tableタグで作った表の表示サンプル
※thで記述したセル内は一般的なWebブラウザでは太字で表示されます。
 

 
このほかにも、cssによるレイアウト調整目的でtheadタグ、tbodyタグ、tfootタグなどを利用する場合があります。必ず使用しなければならないというわけではありませんのでここでは割愛します。
 

表の枠線をつけるにはどうすればよいんですか??

枠線はCSSを利用して表示させることが一般的です(後述で説明)。

 

テーブル・表に枠線をつける

CSSを利用して表に枠線をつける

table・表に枠線をつけるには、一般的にCSSでborderを利用して枠線を作ります。
 

■CSSで枠線を設定した表事例
borderとborder-collapse: collapseで枠線を作る
 

■上記のソースコード

 

上記についてステップ別で解説していきます。

【ステップ1】css borderで枠線をつける

まずtableのthやtdなどのセルに対してborderで枠線をつけていきます。

CSSでは、thとtdに対して枠線borderを設定します。
th,tdタグにborder:1px #333 solid; で枠線をつける

 

cssのborderの解説

「border:red solid 5px」のように3つの値は半角スペースで区切ります。順番は順不同でどれから先に書いても構いません。

borderで指定できる値は、主に下記の通りです。

項目 内容
redなどの色指定、または#ff0000などの16進数表記
種類 なし(初期値)「none」、1本の実線「solid」、2本の実線「double」、点線「dotted」、破線「dashed」など
枠線の太さ 2pxなど pxで設定(%は不可)

 

borderについては「CSS 枠線borderタグの使い方の基本」をご参照ください。

 

このときtableタグに対してborderを設定しても外枠にしか線がつきませんので注意しましょう。
tableタグに対してborderを設定しても外枠にしか線がつきません

 

【ステップ2】border-collapse:collapseで線をまとめる

そのままだとthとtd各セル同士の枠線の間隔が空いているため二重線になっています。一本の線にするにはtableタグに対してborder-collapse:collapseを設定します。

border-collapse: collapse;で枠線を一本にする
 

 

  • border-collapse:collapse;・・・th、tdなどの隣接するセルの枠線が重ねて表示される。
  • border-collapse:seperate;・・・th、tdなどの隣接するセルの枠線が間隔を開けて表示される(2重線のようになる)。初期値

 

必要に応じて、内部余白などでレイアウトを整えてあげればOKです。
padding:8px 16px;で余白をつける

内部余白paddingの使い方については「CSS 内部余白paddingタグの使い方の基本」をご参照ください。

装飾目的でtableタグに色をつけたり、他にも色々cssでレイアウト調整することは多いんですが、まずは基本的な表が書けるようになれば良いと思います。

 

(補足)border属性を利用して簡易的な枠線を作る

昔のやり方(現在主流ではない)ですが、tableの属性border="1"をつけると簡易的な枠線が作れます。
 

■表示例 属性border="1"を追記して簡易な枠線を表示する
table 表事例 border=1
 

■上記のソースコード

 

あくまで簡易的なやり方なので枠線が二重線になっています。細かい調整にはやはりCSSを利用する必要があります。

 

テーブル内のセルを結合する

テーブル・表はcolspan(列の長さ)やrowspan(行の長さ)といった属性でセルを結合することができます。
 

colspanで列を結合する

colspanは列の長さで、colspan="2"で2列分、colspan="3"で3列分のセルになります。

下記は一行目のthをcolspan="2"で結合した例です。
colspanで列を結合 

■上記のソースコード

 

rowspanで行を結合する

rowspanは行の長さで、rowspan="2"で2行分、rowspan="3"で3行分のセルになります。
 

下記は2,3,4行目・1列目のtdをrowspan="3"で結合した例です。
rowspanで行を結合 

■上記のソースコード

 

rowspanやcolspanを設定することで、一行の中のセルの数を調整して合計を合わせる必要があります。

 

まとめ

まとめです。今回は、htmlのtableタグを利用して表を作る方法を説明しました。

Tableタグの説明
 

HTMLを理解しているとホームページを作る上でできることの範囲が広がります。

なお、これからサーバーやドメインを契約してホームページを作りたいという方は「【総まとめ】個人ホームページの作り方・Webサイト自作方法」をご参考ください。

今回は以上になります。最後までご覧頂き、ありがとうございました。
 

 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。

教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。

検索して記事を見つける

探したいキーワードを入力・検索して記事を見つけたい方はこちら

-HTML