【HTML_table】Webサイトで表を作成する【簡単にできるよ】

どうもnakattyです。

私は起業した時、会社のWebサイトをWordPressを使って自作しました。

企業の概要ページはHTMLの<table>を使って作成したのですが、結構簡単に良い感じの表ができるので、今回はこの<table>の使い方についてまとめようと思います。

ちなみに↓のような感じで作りました。

会社概要

会社名	株式会社○○
設立	2018年3月
資本金	○○万円
事業内容	テキストテキストテキストテキスト
代表者	〇〇 〇〇
所在地	東京都〇〇
連絡先	TEL：○○-○○○○-○○○○ FAX：○○-○○○○-○○○○

<table>タグの使い方

<table>タグで表を作る場合は、<tr>と<th>と<td>を組み合わせて作ります。

それぞれ使うところを説明していきます。

■<tr>・・・
表を作る際、「行」を作成するのに使います。
下の画像の緑色で囲ってる部分です。

■<th>・・・
表を作る際、「見出し」を作成するのに使います。
下の画像の青色で囲ってる部分です。

■<td>・・・
表を作る際、「表のデータ」を作成するのに使います。
下の画像の黄色で囲ってる部分です。

以上を踏まえて表を作るとコードは以下のようになります。

見出しを横にする表の作成

この記事の冒頭で作成した会社概要の様に表の見出しを横に設置したい場合は以下の様なコードになります。

こんな感じの表になります。
<tr>〜</tr>をコピーして増やせば項目を増やせます。

果物	りんご
個数	5個

横のマスと結合させる

「colspan」という属性を使うと表を作る際に横のマスと結合させることができます。

良い表の例が思い浮かばなかったのですが、以下の様な表を作ったとします。

会員/一般	1回	5回
一般	500円	450円
会員	400円固定

会員の方の行は1マス足りない状態です。
ちょっとカッコ悪いのでこれを「colspan」を使って横と結合させると、、、

会員/一般	1回	5回
一般	500円	450円
会員	400円固定

この様に空白だった場所も1つのマスになる様に結合してくれます。

コードや使い方は以下の様な感じです。

結合したいマスの所に「colspan=”数字”」という形で入力します。
数字は結合させたいマスの数を入力してください。

縦のマスと結合させる

今度はマスを縦に結合する方法です。

縦に結合する場合は「rowspan」を使います。

使い方は横のマスと結合する「colspan」と同じです。

結合したいマスの所に「rowspan=”数字”」という形で入力します。
今回は「3」を入力した場合です。

以下の様な感じになります。

コース	時間	金額
1日コース	10時〜18時	20,000円
	14時〜22時	20,000円
	10時〜22時	30,000円
1時間コース	1時間	5,000円

コードは以下の様な感じです。

表にタイトルをいれる

表にタイトルを入れたいときは<caption>を使います。
<table>のすぐ下に入力すれば表示されます。

以下の様な感じです。

果物別在庫数

果物	個数
りんご	5個
くり	10個

コードはこんな感じです。

まとめ

HTMLだけで表を作成する方法をまとめました。
WordPressを使ってWebサイトを作る場合は結構使うタイミングがあると思います。