システム開発

2024.01.09

【HTML・CSS】表作成の基本から装飾方法までコード付き解説

css html

HTMLでの表作成は、指定できることが多くてコードも複雑に見えるため、抵抗感のある方も多いのではないでしょうか。HTMLの中身を知れば知るほど、使い方に悩んでしまいます。

タグの使い方が多数あるHTMLは動作の基本をひとつずつ抑えれば、表作成もスムーズにこなせます。デザインが豊富なレイアウトも、CSSを使用すれば複雑になりません。

そこで今回は、HTMLでの基本的な表作成方法と、CSSを使用しての装飾方法を紹介します。コード付きで解説していますので参考にしてください。

この記事でわかること

HTMLの基本タグ
HTMLでの基本的な表作成方法と編集方法
CSSでの装飾方法

HTMLにおける表とは

HTMLにおける表とは、行と列にデータを配置して表示したものです。実際にはスプレッドシートのような形で表示されます。表の行と列には、画像・リンク・テキストなどが配置可能です。表を使用すると情報が整理されて見やすくなるため、よく使用されています。

文章のみが並んだ単調なWebサイトよりも、表を利用して見やすく工夫されたサイトの方が、知らせたい情報をわかりやすく伝えられるところがメリットです。

HTMLの基礎的tableタグ

HTMLで表を作成するために必要なタグは、table・tr・th・tdの4種類です。それぞれのタグの書き方と、タグの役割について解説します。タグはすべて開始を「<>」、終了を「」でくくります。

tableタグ

tableタグは表の開始と終了を示すタグです。

開始を

<table>

終了を

</table>

と書きます。

tableタグの間に挟まれたテキストやリンクなどが表で表示されます。

trタグ

trは「Table Row」の略で、Rowは行を意味します。trタグは文字列を行に分けるタグです。

行の開始を

<tr>

終了を

</tr>

と書きます。

trタグで挟むことで、テキストを1行として認識します。

thタグ

thは「Table Header」の略で、Headerは見出しを意味します。thタグは見出しを設定するタグです。

開始を

<th>

終了を

</th>

と書きます。

thタグで挟むことで、表の見出しとなるセルを作成します。

tdタグ

tdは「Table Date」の略で、Dateはデータを意味します。tdタグは表の内容を設定するタグです。

開始を

<td>

終了を

</td>

と書きます。

tdタグで挟むことで、表のデータとなるセルを作成します。

HTMLでの表作成方法

HTMLのtableタグを使った表の作成方法を、5つのステップで紹介します。まずは、基本となる表を4つのタグを使用して作成します。用途に合わせて見出しを作成、行や列を追加、セルを統合することも可能です。

step1.基礎的タグ4種で表を作成

名前	年齢
山田	20
山本	30

上記の表をHTMLのtableタグを使用して作成すると、以下のとおりになります。


 <table>

   <tr>

     <th>名前</th><th>年齢</th>

   </tr>

  <tr>

     <td>山田</td><td>20</td>

  </tr>

  <tr>

     <td>山本</td><td>30</td>

  </tr>

 </table>

step2.見出しを作成

上記の表での見出しは「名前」と「年齢」の部分です。見出しは表の一番上に配置されるのが一般的ですが、下記のように左端の列が見出しになる場合もあります。

番号	名前	年齢
1	山田	20
2	山本	30

この見出しが追加された表のイメージを、HTMLのtableタグを使用して作成すると、以下のとおりになります。


 <table>

   <tr>

     <th>番号</th><th>名前</th><th>年齢</th>

   </tr>

  <tr>

     <th>1</th><td>山田</td><td>20</td>

  </tr>

  <tr>

     <th>2</th><td>山本</td><td>30</td>

  </tr>

 </table>

step3.行を増やす

thタグとtdタグの組み合わせを増やすだけで、好きなだけ行を増やせます。

番号	名前	年齢
1	山田	20
2	山本	30
3	山根	40

上記のように、下に1行増やす場合のHTMLのtableタグは、以下のとおりになります。


 <table>

   <tr>

     <th>番号</th><th>名前</th><th>年齢</th>

   </tr>

  <tr>

     <th>1</th><td>山田</td><td>20</td>

  </tr>

  <tr>

     <th>2</th><td>山本</td><td>30</td>

  </tr>

  <tr>

     <th>3</th><td>山根</td><td>40</td>

  </tr>

 </table>

step4.列を増やす

行と同じように、列もthタグとtdタグを配置したい場所に追加すれば、自由に増やせます。

番号	名前	年齢	性別
1	山田	20	男
2	山本	30	男

上記のように、右端に1列増やす場合のHTMLのtableタグは、以下のとおりになります。


 <table>

   <tr>

     <th>番号</th><th>名前</th><th>年齢</th><th>性別</th>

   </tr>

  <tr>

     <th>1</th><td>山田</td><td>20</td><td>男</td>

  </tr>

  <tr>

     <th>2</th><td>山本</td><td>30</td><td>男</td>

  </tr>

 </table>

step5.セルを統合する

以下の表のように「男」部分のセルを統合させたいとします。

番号	名前	年齢	性別
1	山田	20	男
2	山本	30	男

セルを統合する場合のHTMLのtableタグは、タテとヨコのどちらを統合させるのかで異なります。今回のようにタテを統合させる場合に使用するタグは「rowspan」です。

タテに並んでいる2つのセルを統合するには、「rowspan=2」を必要箇所に指定します。上記のイメージどおりに書き変えるなら、1の列にセル統合の指示を出しましょう。


<th>1</th><td>山田</td><td>20</td><td rowspan="2">男</td>

同じく、ヨコのセルを結合させる場合は、「colspan」を指定箇所で使用します。

CSSを使って表を装飾する

HTMLで作成した表を装飾するには、CSSを使用します。HTMLタグでも指定できますが複雑になるため、CSSを使用するのが一般的です。CSSを使用した装飾方法をそれぞれ紹介します。

表の余白を取る

表内を見やすくするために、セルに余白を作成することも可能です。余白を作成するには、それぞれのthやtdに対して「padding」を指定してテキスト周りに余白をとります。たとえば、5pxの余白をとりたい場合は、

padding: 5px;

と指定します。

表に枠線をつける

セルに枠線をつけるには「border:~~」を指定します。セルの罫線と重ならず、1本の線のようにきれいに見せるには、tableに

border-collapse:collapse;

と指定しましょう。

テキストの色・サイズを変更する

テキストの色を変更するには「color」を使用します。「color」の後に指定するカラーを入力しますが、色の表現方法は3つです。

色の表現方法	説明	例
英語	色を英語に変換する	color: red
RPG	青・赤・緑の3色を組み合わせて表現 0から255まである	color: rgb(255,0,0);
16進数	AからFまでの文字と0から9までの数字を使用して表現	#000000

テキストのサイズを変更するには「font-size」を使用します。サイズはいくつかの単位から指定できますが、主に使われているのは以下の3つです。

単位	説明	例
px	画素を表す	front-size 14px
rem	フォントサイズを基準にしたもの	front-size 1rem
em	現在の要素のフォントサイズに基づいたサイズ	front-size 2em

背景色をつける

背景色は「background-color」で指定可能です。色の指定方法は、テキスト色の変更と同じように、英語・RPG・16進数で表示できます。背景色は見出しのセルで使うと、テキストとの違いがわかりやすくなります。

1行ごとに背景色を変える

1行ごとに背景色を変えるには「nth-child」を使用します。2番目と4番目など、偶数行を変更する場合は、以下のとおりです。

nth-child(2n){
background:（カラー）;
}

ただし、表に見出しがある場合、同じように偶数行を指定するときは「＋1」で指定します。

nth-child(2n＋1){
background:（カラー）;
}

見出しを装飾する

見出しを強調させるには、テキストの色や背景色を変更するだけではありません。影付きやラインなど、さまざまな装飾方法もあります。豊富な装飾方法の中でも、定番の方法を紹介します。

影付き文字	text-shadow
点線のアンダーライン	border-bottom
左に太めのライン	border-left
斜線の背景色	background: repeating-linear-gradient