HTML tableを理解して表の作り方を応用できるようにする

HTML tableを理解して表の作り方を応用できるようにする

HTMLでテーブルを作成して表を組み立てるためには<table>や<tr><td>そして<th>のタグの使い方の理解が大切です。

それなので記事では表の作り方に使用するHTMLタグの紹介と基本のテーブルの作り方から応用した表の作り方を説明してます。

似たようなHTMLタグが多いので理解さえしてしまえばテーブルの作り方が簡単になります。

 

HTMLでテーブルの作り方

 

HTMLでテーブルの作り方はテーブルを作成するときの構造の理解とテーブル構造に使用するHTMLタグの理解、そして表の組み立て方の理解の3つを覚えることが必要です。

 

 

テーブル構造には「列」「行」「セル」の3つの構造からテーブルが成り立っています。画像の緑が列、青が行、白がセルです。この3つの構造の作り方に必要なのが下記のHTMLタグです。

 

 

  • <table></table>
  • <tr></tr>
  • <td></td>
  • <th></th>

 

HTMLでテーブルの作り方に使用するタグを順番に一つずつ説明しながら記述を増やしていき、テーブルを完成させる流れを紹介します。

 

Advertisement

 

tableタグで表の親要素を作成

 

表(テーブル)の作り方の土台になるHTMLタグが「table」です。

tableは表の作り方に必要なHTMLタグの種類の中の親になるタグです。

表の行やセルを組み立てるために使用するタグを<table></table>で囲むことで一つのテーブルを作成することができます。

 

<table>

</table>

 

まずはtableの開始タグと閉じタグを記述します。

 

trタグで横一列の行を作成

 

<tr>タグはテーブルの表で使用する横一列の行をまとめることができるHTMLタグです。

テーブル作成で使用するHTMLタグの中で中間管理職的な役割を果たします。

<tr>はTable Rowの略です。

テーブルの作り方の順番で進めると記述はtableの中にtrを記述します。

 

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

 

<tr>はタグ単体ではテーブル作成するイメージが湧きにくいと思いますが、trの開始タグと閉じタグの間に<td>タグを挟むとテーブルになるイメージが理解できてきます。

ここまでのHTML記述はtableの中にtrの開始タグと閉じタグを記述したコードです。

 

Advertisement

 

tdタグでセルを作成

 

HTMLのtdタグはセルの要素で表の値(データ)を意味します。

テーブル作成で必要になるHTMLタグの種類の中では使用回数が多いタグです。

table dateの略でtrと言います。

 

<table>
<tr>
 <td>テキスト</td>
 <td>テキスト</td>
</tr>
</table>

 

<td></td>を含めたテーブルの作り方は、tableを親要素としてtrの中にtdを記述します。これでtdタグで囲まれたテキストが表の中で表示できます。

<td></td>は表の中で複数使用します。複数になる場合はtdが横並びになって表示されます。

 

<table>
<tr>
 <td>テキスト</td><td>テキスト</td>
</tr>
<tr>
 <td>テキスト</td><td>テキスト</td>
</tr>
</table>

 

例えば2列2行のテーブルの作り方なら、行の作成で使用するtrタグを2つ使用してtrの中にtdを2つ記述します。そうすると2列2段のテーブルができます。

作り方のイメージとしては

 

  • 大枠 table
  • 中枠 tr
  • 小枠 td

 

です。

 

tableに見出しをつける

 

HTMLのthタグは表の見出しを意味します。

table headerの略でthです。

表の中で見出しやタイトルとなるセルを作成するタグです。

 

<table>
<tr>
 <th>見出し</th>
 <th>見出し</th>
<tr>
 <td>テキスト</td>
 <td>テキスト</td>
</tr>
</table>

 

テーブルに見出しをつける作り方はthだけをtrタグで囲みます。th(見出し)だけをtr(列)で囲んでるので見出しだけの横列を表示できる作り方です。

 

 

 

もしくはtrの中にthとtdを含めた作り方なら下記のように一つの列に見出しとテキストが横列になる作り方ができます。

 

 

 

 

表の中にセルを作成するHTMLのタグにはtdもありますが、tdとthの違いは内容がデータに対する見出しの場合に<th></th>要素を使用、tdはテキストとして使用します。

それから<th></th>作成したセルの表示はテキストが太字になりセンタリングされます。

 

Advertisement

 

HTMLの表で罫線を表示する方法

 

テーブルの作り方で必要になる「罫線」を表示する方法です。

 

<table>
<tr>
 <th>見出し</th>
 <th>見出し</th>
<tr>
 <td>テキスト</td>
 <td>テキスト</td>
</tr>
</table>

 

テーブルのtable開始タグの今までの説明には<table>だけでしたが、罫線はtableタグにborder属性で値を指定することで表の罫線が表示できます。

 

<table border=”1″>
<tr>
 <th>見出し</th>
 <th>見出し</th>
<tr>
 <td>テキスト</td>
 <td>テキスト</td>
</tr>
</table>

 

 

border属性の値に1を指定すると細っそい罫線が表示されて、ここまで順番に作成してきたテーブルの要素が表になりました。

 

 

罫線を太くしたいときはborder属性の値を5とか10とかに変更してください。画像は値10です。

 

罫線のコントロール

 

テーブルの作り方では罫線は、縦横の罫線ではなくて横だけの罫線や縦だけの罫線にするテーブルにすることができます。

作り方は<table>の属性にrulesを指定して表の罫線をコントロールします。

rulesに追加する属性値は以下です。

 

属性説明
rules=””
none内罫線を表示しない(初期値)
rows横罫線のみ表示
cols縦罫線のみ表示
groupsグループ間の罫線のみ表示
all全ての内罫線を表示

 

罫線をコントロールする例を出します。

 

 

tableの開始タグにrules=”cols”を記述します。するとテーブル内の罫線がコントロールされ横だけ罫線が表示された表の作成ができます。(上画像はセルを色分けしてます)

 

Advertisement

 

HTMLでテーブルの作り方を応用

 

HTMLのテーブルの作り方は表をどのように表示するかによってはtable内で使用するthやtr、tdのタグの記述順番も変わります。

ここからは基本的なテーブル作成から少し応用したテーブル作成をしてみようと思います。

 

テーブルを横並び

 

 

HTMLで作成するテーブルの表を2つ使って横並びする作り方です。

普通は2つのテーブルを作成してしまうと表が縦に並んでしまいます。そのため2つのテーブルを横並びするときには全体を囲むtableの中にtableを入れて応用します。

 

 

テーブルを横並びする作り方は通常どうり表を2つ作成したら、横並びするために2つの表を囲むtableタグとtrタグで全体を閉じます。

そしてtdタグで1番目の表を囲みます。

次に2番目の表の最初にtdタグを記述します。もし2番目のテーブルが1番目のテーブルとサイズが異なる場合には2番目のtdにvalign属性をつけて属性値をtopにして表の位置を揃えます。

上記画像に書いてあるHTMLコードだけ見ると複雑そうな印象ですが、横並びテーブルにする作り方では3つくらいHTMLコードを追加してるだけです。

 

テーブルを縦並び

 

HTMLで横並びしたテーブルの作り方をした場合には、今度はテーブルを縦にしたい場合があります。なぜかというとテーブルをスマホで見るときに表が見ずらくなるからです。

テーブルを縦にする作り方はCSSでdisplay:blockにする。またはブレイクポイントを決めてからスマホだけdisplay: blockにすることでテーブルが縦に並ぶようにする。という作り方があります。

 

<table border="1" width="100%">
 <tr bgcolor="pink">
  <th bgcolor="yellow">見出し</th><td>テキスト</td><td>テキスト</td>
 </tr>
 <tr bgcolor="pink">
  <th bgcolor="yellow">見出し</th><td>テキスト</td><td>テキスト</td>
 </tr>
</table>

 

上記のHTML記述をすると下記の画像のテーブル表示になり横並びになります。

 

 

横並びからテーブルを縦にするためにCSSでメディアクエリでHTMLのthとtdにdisplay: blockを指定します。

 

@media screen and (max-width:480px) {
 th,td {
 display : block;
}}

 

 

そうするとメディアクエリで決めた480pxがブレイクポイントになりテーブルが縦になります。

CSSでメディアクエリを書かないでdisplay: blockにした場合はスマホでもPCでも縦に並ぶ表で表示されます。

 

表のセル同士の間隔を調整

 

表のセル同士の間隔を調整するときはcellspaching=””をtable要素に属性で指定すると、セルの間隔を調整することができます。

セル間隔の表示とHTMLの記述例を見てもらうと分かりやすいと思います。

 

<table border="1" cellspacing="10">
<tr>
 <th>見出し</th>
 <th>見出し</th>
</tr>
<tr>
 <td>テキスト</td>
 <td>テキスト</td>
</tr>
</table>

 

 

cellspaching=”10″で値を指定しました。セルの間隔を10でコントロールすると上記の間隔でセルが表示できます。

もう一例出します。

 

 

cellspaching=”0″にするとセルの間隔が無くなります。この作り方ならテーブルの線が二重になることが防げます。

気をつけたいことはセル同士の間隔調整には内罫線の間隔をコントロールしてるのでtable要素にborder属性を指定しておく必要があります。

 

セルの結合をする

 

次にテーブルの作り方で応用できるようにしておきたいことはセルの結合です。

セルの結合とはテーブルの見出しやテキストを表示してる仕切り枠を2つから1つに繋げることを言います。

HTMLでセルを結合する作り方にはrowspan=””とcolspan=””という属性に値を指定して使用します。

 

属性説明
calspan=””結合するセルの数水平方向の結合を指定(初期値は1)
rowspan=””結合するセルの数垂直方向の結合を指定(初期値は1)

 

縦のセルを繋げる場合には、繋げたいtd(またはth)に対してrowspan=”繋げる数”という属性を追加します。

そして横のセルを繋げる場合には、繋げたいtd(またはth)に対してcolspan=”繋げる数”という属性を追加します。

重要なのはセルを繋げたいときは、そのぶんの下や横のセルを空白にしておく必要があるということです。

 

Advertisement

 

例えば下記画像のように列の真ん中セルを縦に結合するとします。

 

 

<table border="1" width="100%">
 <tr bgcolor="pink">
  <th bgcolor="yellow">見出し</th><td>テキスト</td><td rowspan="3">テキスト</td><td>テキスト</td>
 </tr>
 <tr bgcolor="pink">
  <th bgcolor="yellow">見出し</th><td>テキスト</td><!--2--><td>テキスト</td>
 </tr>
 <tr bgcolor="pink">
  <th bgcolor="yellow">見出し</th><td>テキスト</td><!--3--><td>テキスト</td>
 </tr>
</table>

 

HTMLの書き方はtableの中にtrを3つ記述してtrの列をth、tdで見出しとテキストにする3行3列のテーブルです。この結合する作り方は一番上の2個目のtdに対して属性rowspan=””で値を3にします。

値が3なのはrowspan=”3″を指定したtrの列は3列なので3列を結合する意味になります。

そしてrowspan=””を指定したtrの下に表示されるセルが存在するとテーブルが崩れてしまうため2行目3行目のtrはカットします。上記のHTMLコードでいうとコメント文<!–2–>と<!–3–>になります。

セルを結合する作り方はけっこう複雑なので何度も練習して見るのと理解が深まるかと思います。

 

表の色を指定する

 

最後にHTMLで作成した表の色を指定する作り方です。

テーブル作成した表の中を全部同じ色に指定する場合は、tableにbgcolor属性を使って値でカラーを指定します。

例えば先述のテーブル結合で説明に使用したHTMLコードの場合

 

  • <tr bgcolor=”pink”></tr>で列の色をピンク
  • <th bgcolor=”yellow”></tr>で見出しの色をイエロー
  • <td bgcolor=”powderblue”></tr>で結合した3行をパウダーブルー

 

結合した3行の色指定は追加した色です。

 

 

まとめ

 

HTMLのtableタグとそれに含まれるテーブルタグを理解しながら表の作り方を基本的な表から応用した表まで記事にしてみました。

やはりテーブルの構造を組み立てる基本を理解しているかいないかで応用するテーブルの組み方でつまずくことが少なくなります。

何事も理解することからスタートすることの大切さを再確認できた記事でした。

 

HTMLカテゴリの最新記事