HTML

【HTML】表を作成する方法【テーブル(table)タグ】

ライター「みさ」

こんにちは。ライター「みさ」です。

みなさん、プログラミングをしていて、表を作成したいと思ったことはありますでしょうか。

多くの情報を一括して表にまとめることで文書をわかりやすく整理できたりするので、表の作成ができるようになると、なにかと便利ですよね。

そこで、今回は【HTML】表を作成する方法【テーブル(table)タグ】を解説していきます。

表の作成だけでも、HTMLコードのボリュームは結構ありますが、簡単にでも表の作成ができるようになっているほうが良いと思いますので、今回の記事の前半(基礎編)だけでも参考にしてみてください。※今回の記事の後半(応用編)では、表に色を付けていったりするコードを解説しています。

それでは、さっそく始めます。

【HTML】表を作成する方法 基礎編【テーブル(table)タグ】

ライター「みさ」

【HTML】表を作成する方法【テーブル(table)タグ】

まずは、基礎編です。

表を作成するためのタグは、テーブルタグと呼ばれ、<table></table>bodyタグ内に記述します。

そして、<table>と</table>の間に、テーブルに関するタグを記述していきます。

【HTML】表を作成する方法 基礎編【テーブル(table)タグ】

<table border=”1″ height=”300px” width=”450px”>
<caption>●●●●●</caption>
<tr><th>▲▲▲</th><th>■■■</th><th>♦♦♦</th></tr>
<tr><td>◎◎</td><td>△△</td><td>◇◇</td></tr>
<tr><td>※※</td><td>★★</td><td>♥♥</td></tr>
<tr><td>**</td><td>☆☆</td><td>♡♡</td></tr>
</table>

※「border」:枠 (borderプロパティで指定)
HTML5.0では、CSSを使用して記述していく。

※「height=”300px”」:表全体の高さが300px
※「width=”450px”」:表全体の幅が450px

<caption>●●●●●</caption>
●●●●●に「表のタイトル」を入れる。

<tr></tr> 横1列

<th></th> 表のヘッダー(th=table header)

<td></td> セル1つ

【HTML】表を作成する方法 基礎編【テーブル(table)タグ】 例:)

以上、【HTML】表を作成する方法 基礎編【テーブル(table)タグ】を解説しました。

この基礎編だけのコードでも、まぁまぁ表にはなりました。

しかし、表をもっと見やすくするためには、「色を付けたり、文字の間隔をそろえたり」したほうが良いので、次項(応用編)で、もっとわかりやすい表にしていきましょう。

それでは、【HTML】表を作成する方法 応用編【テーブル(table)タグ】を解説していきます。

【HTML】表を作成する方法 応用編【テーブル(table)タグ】

ライター「みさ」

【HTML】表を作成する方法【テーブル(table)タグ】

次に、応用編です。

応用編では、基礎編に いくつかの装飾をしていきます。

【HTML】表を作成する方法 応用編【テーブル(table)タグ】
  • セルの幅【width 属性】: <th width=
  • セル内の配置[align水平方向の配置,valign垂直方向の配置]
  • 1つ1つのセルの背景色【bgcolor 属性】: thまたはtd
  • 表全体の背景色【bgcolor 属性】: table
  • 行(ぎょう)の背景色【bgcolor 属性】: tr
  • 表の「線の太さ」

【それでは、上記それぞれについて解説していきます。

セルの幅【width 属性】を決める  <th width=

1つ1つのセルの横幅を決める=【width 属性】を決めるということです。

セルの幅【width 属性】を決める
<th width=

例:) 表table全体の横幅width=300pxの場合

[修正前]
<tr><th>金曜日</th><th>土曜日</th><th>日曜日</th></tr>


↓ セルの幅【width 属性】を決める:例として、1列目を100,2列目を50,3列目を150としてみます。※このとき「px(ピクセル)」の単位は記載しません。

[修正後]
<tr><th width=”100>金曜日</th><th width=”50>土曜日</th><th width=”150>日曜日</th></tr>

※表table全体の横幅width=300pxの場合:「100+50+150=300」

セルの幅【width 属性】  例

セル内の配置[水平方向の配置,垂直方向の配置]

「セル内= thタグ または tdタグ」に、align属性[水平] または valign属性[垂直]を指定していきます。

align 属性 : 水平方向の配置

align 属性 : 水平方向の配置

align :「横にどう揃えるか」

  • left 揃え
  • center 中央揃え
  • right 揃え

[align属性の記述方法]

<th align=”●●> <th>
<td align=”★★> <td>


↓例:) thタグをrightにする。
↓例:) tdタグをcenterにする。

<th align=”right”> <th>
<td align=”center”> <td>

それでは、実装してみます。
以下、≪例A,例B≫。

≪例A≫

[修正前]
<th width=”150″>日曜日</th>


right にしてみます。

[修正後]
<th width=”150″ align=”right”>日曜日</th>

align属性 水平 ≪例A≫

≪例B≫

[修正前]
<td>ブログ2記事</td>


center にしてみます。

[修正後]
<td align=”center”>ブログ2記事</td>

align属性 水平 ≪例B≫

valign 属性 : 垂直方向の配置

valign 属性 : 垂直方向の配置

valign :「縦にどう揃えるか」

  • [ top ] 揃え
  • [ middle ] 中央揃え
  • [ bottom ] 揃え

[valign属性の記述方法] 

<th valign=”▲▲> <th>
<td valign=”♦♦> <td>


↓例:) thタグをbottomにする。
↓例:) tdタグをmiddleにする。

<th valign=”bottom”> <th>
<td valign=”middle”> <td>

それでは、実装してみます。
以下、≪例C,例D≫。

≪例C≫

[修正前]
<th width=”50″>土曜日</th>


↓ thタグを bottom にしてみます。

[修正後]
<th width=”50″ valign=”bottom”>土曜日</th>

valign 属性 垂直 例C

≪例D≫

[修正前]
<td align=”center”>ブログ2記事</td>


↓ tdタグを top にしてみます。

[修正後]
<td align=”center” valign=”top”>ブログ2記事</td>

valign 属性  垂直 例D

1つ1つのセルの背景色【bgcolor 属性】を決める  <th bgcolor= または <td bgcolor=

1つ1つのセルの背景色【bgcolor 属性】を決める=thタグ または tdタグ にbgcolorをカラー名またはHTMLカラーコードで指定する。※カラーの記載方法:以下①または②どちらでも可。

  1. カラー名:(例えば、white=白,red=赤,blue=青)
  2. HTML color codes(HTMLカラーコード):(例えば、#ffffff=白)

1つ1つのセルの背景色【bgcolor 属性】を決める
<th bgcolor= または <td bgcolor=

  • 1つ1つのセルの見出し(h) <th bgcolor=
  • 1つ1つのセル  <td bgcolor=

●1つ1つのセルの見出し(h) <th bgcolor=

[修正前]
<th width=”100″>金曜日</th>


↓例:) #F5A9F2

[修正後]
<th width=”100″ bgcolor=”#F5A9F2“>金曜日</th>

1つ1つのセルの見出し

●1つ1つのセル  <td bgcolor=

[修正前]
<td>仕事受注</td>


↓ 例:) #58ACFA

[修正後]
<td bgcolor=”#58ACFA“>仕事受注</td>

1つ1つのセル

表全体の背景色【bgcolor 属性】を決める <table border=”1″ bgcolor=

表全体の背景色【bgcolor 属性】を決めるtableタグ(全体)にbgcolorをカラー名またはHTMLカラーコードで指定する。※カラーの記載方法:以下①または②どちらでも可。

  1. カラー名:(例えば、white=白,red=赤,blue=青)
  2. HTML color codes(HTMLカラーコード):(例えば、#ffffff=白)

表全体の背景色【bgcolor 属性】を決める 
<table border=”1″ bgcolor=

例:) 表全体の背景色【bgcolor 属性】=red(#DF013A)の場合

[修正前]
<table border=”1″ height=”200px” width=”300px”>


↓例として、表全体の背景色【bgcolor 属性】=red(#DF013A)

[修正後]
<table border=”1″ height=”200px” width=”300px” bgcolor=”red>
または
<table border=”1″ height=”200px” width=”300px” bgcolor=”#DF013A>

※bgcolor=「back ground color」背景色

表全体の背景色【bgcolor 属性】を決める
引用元: Visual Studioa Code

行(ぎょう)の背景色【bgcolor 属性】を決める <tr bgcolor=

行(ぎょう)の背景色【bgcolor 属性】を決める=trタグにbgcolorをカラー名またはHTMLカラーコードで指定する。※カラーの記載方法:以下①または②どちらでも可。

  1. カラー名:(例えば、white=白,red=赤,blue=青)
  2. HTML color codes(HTMLカラーコード):(例えば、#ffffff=白)

行(ぎょう)の背景色【bgcolor 属性】を決める
<tr bgcolor=

例:) 1行目を#01DF74,2行目を#F7FE2E,3行目を#FFBF00,4行目を#BDBDBD の場合

[修正前]
<tr><th width=”100″>金曜日</th><th width=”50″>土曜日</th><th width=”150″>日曜日</th></tr>
<tr><td>ブログ1記事</td><td>ブログ1記事</td><td>ブログ2記事</td></tr>
<tr><td>YouTube1本</td><td>YouTube1本</td><td>YouTube0本</td></tr>
<tr><td>仕事受注</td><td>仕事受注</td><td>仕事受注</td></tr>


↓例:) 1行目を#01DF74,2行目を#F7FE2E,3行目を#FFBF00,4行目を#BDBDBD

[修正後]
<tr bgcolor=”#01DF74“><th width=”100″>金曜日</th><th width=”50″>土曜日</th><th width=”150″>日曜日</th></tr>
<tr bgcolor=”#F7FE2E“><td>ブログ1記事</td><td>ブログ1記事</td><td>ブログ2記事</td></tr>
<tr bgcolor=”#FFBF00″><td>YouTube1本</td><td>YouTube1本</td><td>YouTube0本</td></tr>
<tr bgcolor=”#BDBDBD“><td>仕事受#FFBF00注</td><td>仕事受注</td><td>仕事受注</td></tr>


※bgcolor=「back ground color」背景色

行(ぎょう)の背景色【bgcolor 属性】を決める

表の「線の太さ」

表の「線の太さ」を指定していきます。

表の「線の太さ」

<table> </table>
または
<table border=”1″> </table>

※ border : 枠線

HTMLで表現できる表の外枠線については、<table> </table>のみを把握しておけばOKです

【HTML】で表現可能な 表の「線の太さ」

そして、表の「線の太さ」をもっと太くするなどを含めた装飾をしたい場合は、CSSを用います。※ここでは、CSSの説明はしておりません。


<table border=”1″> </table>
表の「線の太さ」が1

↑上記の「1」のみ、HTML5.0でも可能です。

×注意点:)
表の「線の太さ」を 5 にしてみる<table border=”5″> </table> という表現は、HTML5.0からは適応されません。
→表の「線の太さ」を変更したいときは、CSSを使用します。

以上、以上、【HTML】表を作成する方法 応用編【テーブル(table)タグ】を解説しました。

それでは、さいごにまとめます。

まとめ

表 リスト
ライター「みさ」

今回は、【HTML】表を作成する方法 【テーブル(table)タグ】を解説しました。

  • 基礎編
  • 応用編

しかし、応用編では、HTML5.0~に対応するために、CSSを使用していく必要があります

また、HTML5.0からは非推奨になっている記述方法についても見直しが必要です。

※随時、情報を更新していきます。

それでは、今回はココまで。

さいごまでご覧いただき、ありがとうございました。

ABOUT ME
misa
当サイト運営者・ライターをしています。