htmlでの表の作り方。基本プログラムや表のマス目の結合の仕方など

2021年10月10日ブログ作成html,WordPress,ブログ

ブログでなんらかのデータを扱うと使いたくなる「表」。

簡単かつ一括で内容をまとめられるため、検証データをまとめるときに役立ちます。

しかし一概に表といってもプログラムによっては微妙な違いが出ることがあります。

今回は表の簡単な作り方や、ちょっとした応用を紹介します。

コピペで使えるので、書くのが面倒な人にもどうぞ。

※表を作ってから幅の設定をしないと画面幅全部に表が伸びてしまうので、都合上表の幅を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>/*テーブルを閉じる*/

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

まずは「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」の略です。

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

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

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

ただ、別に全て「td」でマス目を作っても特に問題ありません。

自分の感性で使うか使わないか決めましょう。

表の諸設定をする

ここからは線の太さなど、表の細かい設定をする方法の紹介になります。

基本ここら辺を覚えておけば、表の各設定を変更できるようになります。

線の種類を変える

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

<table style="border-collapse:collapse">

表を作る最初のプログラムの<table>内に「style="border-collapse:～"」を入れるだけ。

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

表の囲い線を初期値の「separate」がこちら。

あまり見ない表だとは思います。

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

枠線の色を変える

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

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

できれば線の太さは2px以上に設定しましょう。

少し太めに設定しないと、色が反映されてないように見えることがあります。

あとこの方法では表の中の線の色は変わりません。（上の表だと中央線）

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

CSSでの設定の仕方がこちら。

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

表の線の太さを変える

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

<table border="4" >

注意したいのが、「style="～"」ではなく直接「border=""」と書いているところです。

「table」ではこのように専用の書き方があるものが多いです。

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

表の大きさを変える

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

「width=""」と「height=""」といった専用の書き方もありますが、偶に変更が適用されないことがあります。

「height」にいたってはブラウザによってもうまく適用されず、設定しないのが無難です。

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

<table style=" width: 300px;">

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

「px」なら上記のようにピクセル数を書けばOKです。

この場合PC・スマホ問わず、固定された数値で表示されます。

「%」なら画面の大きさによって表の大きさが変化します。

「width:100%」なら画面横いっぱいにまで広がり、「width:80%」なら画面の80%の幅になります。

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

表の文字の配置

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

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

<table style="text-align:center">

あるいは行・セルごとに～寄せにしたいなら「tr」内か「td」、「th」内に設定します。

「tr」「td」「th」では「style="text-align"」で書く以外にも、「align」「valign」でも設定できます。

alignでは左右に寄せるよう設定します。

valignでは上下に寄せるよう設定します。

プログラムはこちら。

<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>

セルを結合する方法

ここでは表内の複数のセル（マス目）を一つに結合する方法を紹介します。

項目をひとまとめにしたい時に使います。

ただ厳密にいえばセルを結合するのではなく、「セルを伸ばす」が正しいのでそちらの表現を使います。

横にセルを伸ばす

横向きにセルを伸ばすには「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>

普通に設定すると、このように伸ばしたセル数の分だけセルが余分にはみ出てしまいます。

それを防ぐため、この場合は「セル2」を消す必要があります。

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

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

縦にセルを伸ばす

縦向きにセルを伸ばしたいなら「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>

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

この場合は「セル4」を消します。

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

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

表の行をストライプ（縞模様）にする

行間をはっきりさせるために、行ごとにストライプ（縞模様）にすることもできます。

これには独自のクラスを「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>

「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>

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

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

例えばchromeでは以下の設定をしても縦書きにできず、文字が変な向きで表示されてしまいます。

表の文章を縦書きにすることは少ないでしょうが、できれば止めておいたほうがいいです。

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

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

最後に

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

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

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