htmlでの表のつくり方。基本的な構成やセル同士の結合の仕方などを紹介

ブログでなんらかのデータを扱うと使いたくなる「表」。
簡単かつ一括で内容をまとめられるため、検証データをまとめるときに役立ちます。
htmlでは表のことを「テーブル」といっていますが、今回は表の簡単なつくり方や、ちょっとした応用を紹介します。

※表をつくってから幅の設定をしないと画面幅全部に表が伸びてしまうので、この記事では幅を300pxに固定しています。




表(テーブル)の基本的な書き方

表をつくる

単純な表(テーブル)をつくる場合はこうします。
ちょっとした内訳込みで書いてみました。

<table>/*テーブルをつくる*/
<tbody>/*テーブルの内容を記述*/
<tr>/*横一列をつくる:一つ目*/
<td>セル1</td>/*セル(マス目)をつくる*/
<td>セル2</td>
</tr>/*いったん行を閉じる*/
<tr>
<td>セル3</td>
<td>セル4</td>
</tr>
<tr>/*横一列をつくる:三つ目*/
<td>セル5</td>
<td>セル6</td>
</tr>
</tbody>/*テーブル内容を閉じる*/
</table>/*テーブルを閉じる*/

実際にはこう表示されます。

セル1セル2
セル3セル4
セル5セル6

<table>~</table>:tableで囲んだ中を表として設定する要素です。

<tbody>~</tbody>:tbodyで囲んだ中に表の内容を設定します。

<tr>~</tr>:表の行をつくります。一行つくるたびに書いていきます。

<td>~</td>:表のセル(マス目)をつくります。~の中に文章などを書きます。

まずは「table」と「tbody」を書いて「表をつくる」と宣言します。

次に「tr」で横の行をつくれるよう設定し、最後に「td」で何マスつくるかを設定します。
「tr」の中に<td>~</td>を2つつくれば上記の表のように2マスのセルが、3つつくれば3マスのセルができます。

表に見出しをつくってみる

表の行・列のマス目の文字を見出し(タイトル)として設定もできます。
見出し設定にすると自動的に文字が太字になり目立ちます。

<table>
<tbody>
<tr>
<th>セル1</th>/*1行-1列目のマスを見出しに変更*/
<th>セル2</th>/*1行-2列目のマスを見出しに変更*/
</tr>
<tr>
<th>セル3</th>/*2行-1列目のマスを見出しに変更*/
<td>セル4</td>
</tr>
<tr>
<th>セル5</th>/*3行-1列目のマスを見出しに変更*/
<td>セル6</td>
</tr>
</tbody>
</table>

見出しにしたい部分のマス目を「td」から「th」に変更します。
「td」は「table data」、「th」は「table head」の略です。

セル1セル2
セル3セル4
セル5セル6

表の横一行目を見出し設定にしたいなら、最初の「tr」内をすべて「th」にします。
表の縦一行目を見出し設定にしたいなら、各「tr」の最初のマス目を「th」にします。

見出し設定にすると太字になるだけでなく、タイトル(文章)が中央寄せになります。

別に全て「td」でマス目をつくっても特に問題ありません。
自分の感性で使うか使わないか決めましょう。

表の諸設定をする

ここからは線の太さなど、表の細かい設定をする方法の紹介になります。
基本ここら辺を覚えておけば、大抵の場面で使えると思います。

線の種類を変える

表を囲っている線の種類を変えるには「border-collapse」を使います。

「border-collapse」には2つ種類があります。

separate:初期値。セルを少し離して表示。二重線に見える
collapse:セル同士をくっつけて表示。一本線に見える。

<table style="border-collapse:collapse">
セル1セル2

初期値の「separate」がイヤなら「collapse」に設定しなおしましょう。

枠線の色を変える

表を囲っている枠線の色を変えるには、以下のように線の設定をします。

<table style="border:2px solid #0000ff;">
セル1セル2

できれば線の太さは2px以上に設定しましょう。
少し太めに設定しないと、色が反映されてないように見えることがあります。

あとこの方法では表の中の線の色は変わりません。
全ての線の色を変えたいなら各「td」内にも記述するか、「style.css」や「追加CSS」で一括変更するしかありません。

.table .td{/*tableとtdの線の設定を変更*/
  border:2px solid #0000ff;
}

表の線の太さを変える

表を囲っている線の太さを変えるには「border」を使います。

<table border="4" >
セル1セル2

注意したいのが、「style="~"」ではなく直接「border=""」と書いているところです。
「table」ではこのように専用の書き方があるものが多いです。

別に「style="~"」で変えることもできるので、好みの方法で設定しましょう。

表の大きさを変える

表の幅や高さを変えるには「style="width:~"」と書いて変更しましょう。

「width=""」と「height=""」といった専用の書き方もありますが、偶に変更が適用されないことがあります。
「height」にいたってははブラウザによってもうまく適用されず、設定しないのが無難です。

安定して使いたいのなら「style="~"」で記述するようにしましょう。

<table style=" width: 300px;">
セル1セル2

幅などの数値の取り方は「px」方式と「%」方式などがあります。

「px」なら上記のようにピクセル数を書けばOKです。
この場合PC・スマホ問わず、固定された数値で表示されます。

「%」なら画面の大きさによって表の大きさが変化します。
「width:100%」なら画面横いっぱいにまで広がり、「width:80%」なら画面の80%の幅になります。

PC・スマホなどの媒体に合わせて表示したいなら「%」で表示した方がいいです。

表の文字の配置

表のセル内の文字を中央寄せなどにもできます。

表全体を~寄せにしたいなら「table」内に「style="~"」で設定しましょう。

<table style="text-align:center">
セル1セル2

あるいは行・セルごとに~寄せにしたいなら「tr」内か「td」、「th」内に設定します。
「tr」・「td」・「th」では「style="text-align"」で書く以外にも、「align」「valign」でも設定できます。

alignでは左右に寄せるよう設定します。
left:左寄せ。初期値
center:中央寄せ
right:右寄せ

valignでは上下に寄せるよう設定します。
top:上寄せ
middle:中央寄せ。初期値
bottom:下寄せ

<table style="width: 300px; height: 200px;">/*見やすいよう幅・高さを変更*/
<tbody>
<tr align="right">/*この行の文字を右寄せに*/
<td>セル1</td>
<td>セル2</td>
</tr>
<tr>
<td aligh="center">セル3</td>/*このセルの文字を中央寄せに*/
<td valign="bottom">セル4</td>/*このセルの文字を下寄せに*/
</tr>
</tbody>
</table>
セル1セル2
セル3セル4

セルを結合する方法

ここでは複数のセル(マス目)を一つに結合する方法を紹介します。
システム上厳密にいえばセルを結合するのではなく、「セルを伸ばす」が正しいのでそちらの表現を使います。

横にセルを伸ばす

横向きにセルを伸ばすには「td」や「th」内で「colspan」を使います。

「colspan="~"」で~に数値を入れることで、数値分のセル数の大きさに伸ばせます。

<table>
<tbody>
<tr>
<td colspan="2">セル1</td>/*このセルを横2つ分に伸ばす*/
<td>セル2</td>
</tr>
<tr>
<td>セル3</td>
<td>セル4</td>
</tr>
</tbody>
</table>
セル1セル2
セル3セル4

普通に設定すると、このように伸ばしたセル数の分だけセルが余分にはみ出てしまいます。
それを防ぐため、この場合は「セル2」を消す必要があります。

<table>
<tbody>
<tr>
<td colspan="2">セル1</td>
<td>セル2</td>/*削除*/
</tr>
<tr>
<td>セル3</td>
<td>セル4</td>
</tr>
</tbody>
</table>
セル1
セル3セル4

こうすればセルがはみ出ることも無く、ちゃんとした形の表になります。

縦にセルを伸ばす

縦向きにセルを伸ばしたいなら「td」や「th」内に「rowspan」を記述します。

<table>
<tbody>
<tr>
<td rowspan="2">セル1</td>/*このセルを縦2つ分に伸ばす*/
<td>セル2</td>
</tr>
<tr>
<td>セル3</td>
<td>セル4</td>
</tr>
</tbody>
</table>
セル1セル2
セル3セル4

「rowspan」を使う場合も、はみ出た余分なセルを消さなければなりません。
この場合は「セル4」を消します。

<table>
<tbody>
<tr>
<td rowspan="2">セル1</td>
<td>セル2</td>
</tr>
<tr>
<td>セル3</td>
<td>セル4</td>/*削除*/
</tr>
</tbody>
</table>
セル1セル2
セル3

これでうまく表の形になりました。

表の行をストライプ(縞模様)にする

行間をはっきりさせるために、行ごとにストライプ(縞模様)にすることもできます。
これには独自のクラスを「style.css」や「追加CSS」に記述する必要があります。

/*style.cssや追加CSSにクラスを追加*/
.tbl-sima tr:nth-child(even){
  background:#e6f2ff;
}

/*追加したクラスを「table」内に設定*/
<table class="tbl-sima">
<tbody>
<tr>
<td>セル1</td>
<td>セル2</td>
</tr>
<tr>
<td>セル3</td>
<td>セル4</td>
</tr>
<tr>
<td>セル5</td>
<td>セル6</td>
</tr>
<tr>
<td>セル7</td>
<td>セル8</td>
</tr>
</tbody>
</table>

 

セル1セル2
セル3セル4
セル5セル6
セル7セル8

「tbl-sima」は自分でつくったクラス名で、そのあとに「tr:hth-child(even)」で偶数行に適用する設定を決めます。
奇数行に設定したい場合は「even」を「odd」に変えればOKです。

今回は背景色のみ変えてますが、文字の中央寄せなども設定できます。
偶数、あるいは奇数行のみ設定したい場合に使えるので覚えておきましょう。

セルごとに設定したいなら

行、あるいはセルごとに線の太さを変えたかったりする場合は「tr」や「td」、「th」内に上記のように記述すればOKです。

「tr」内に記述すればその行のセル全てが。
「td」「th」内に記述すればそのセルにのみ設定が活かされます。

<table>
<tbody>
<tr style="color: #0000ff;">/*この行の文字色を青に*/
<td>セル1</td>
<td>セル2</td>
</tr>
<tr>
<td style="border: 2px solid #ff0000;">セル3</td>/*このセルの枠線を赤の太めに*/
<td style="border: 2px solid #00ff00;">セル4</td>/*このセルの枠線を緑の太めに*/
</tr>
</tbody>
</table>
セル1セル2
セル3セル4

文章を縦書きにしたいところですが・・・

表のセル内の文章も縦書きにできますが、IE独自の要素で他のブラウザではまともに機能しません。

例えばchromeでは以下の設定をしても縦書きにできず、文字が変な向きで表示されてしまいます。
表の文章を縦書きにすることは少ないでしょうが、できれば止めておいたほうがいいです。

一応書き方だけ書いておきます。

<table>
<tbody>
<tr>
<td style="writing-mode: tb-rl;">あいうえお</td>
</tr>
</tbody>
</table>

最後に

上記の設定ができれば大抵の場面で表が使えると思います。

セル内の文章の設定は普通の文章を「style=""」や「class=""」で変更するのと一緒なので、共通した書き方ができます。

データや検証結果などを記事に書く場合に表は活躍するので、うまくデザインを設定して見やすい表をつくりましょう!