htmlで基本的な表をつくる方法を解説

htmlで基本的な表をつくる方法を解説

この記事では、htmlで表を作成する方法を解説します。

 

htmlで基本的な表をつくる方法

まず、htmlで表をつくるには「table」タグを使います。

また、一般的に、表は「列」や「行」、「見出し」(ヘッダ)「データセル」で構成されていますが、htmlでは表の見出しやセルを表すのに「th」「td」タグ行を表すのに「tr」というタグを使います。

htmlで表をつくるためのタグ

tableタグ:表全体の範囲を表す

trタグ:行の範囲を表す

thタグ:見出しを表す

tdタグ:データセルを表す

※他にも表のタイトルを表す「caption」タグや、見出し行のグループを表す「thead」タグなどを使うことも可能です。

これらのタグを組み合わせて表を作成していきます。

具体的に例を挙げてみると、たとえば1行目に見出し、2行目にデータセルがある、「2行✕2列」の表をつくるとします。

この場合は、以下のようにタグを記述します。

<table>
<tr><th>データ1</th><th>データ2</th></tr>
<tr><td>110</td><td>120</td></tr>
</table>

つまり、表全体を<table></table>、行を<tr></tr>で囲い、trタグの中にある見出しに<th></th>、データセルに<td></td>で囲うということです。

この表をブラウザで表示すると、以下の画像のようになります。

ブラウザ上の表示

tableタグでテーブルを作成した時のブラウザ表示

2行✕2列の表のレイアウトでテキストが表示されているのが分かります。

ただ、ここまでの作業では表の枠線は表示されません。

枠線を表示して表としての体裁を整える場合は、CSSでスタイルの調整が必要です。

 

表の枠線を表示する

表の枠線を表示するには、CSSの「border」プロパティを使います。

borderプロパティは枠線を表示するプロパティです。

以下のように記述して、表の枠線の幅・スタイル・色を指定することができます。

th, td {
border: 1px solid #E5E5E5;
}

ブラウザ上の表示

borderプロパティで表の枠線を表示した場合

これでそれぞれのセルに枠線が表示されました。

ただし、borderプロパティでセルに枠線を付けても、枠線が個々のセルの周りに表示され、2重で枠線が表示されてしまいます。

枠線を1本の線で表示するには、さらに「border-collapse」プロパティを使って調整が必要です。

table {
border-collapse: collapse;
}

ブラウザ上の表示

枠線を1本の線で表示した場合の表

border-collapseプロパティを使うと、上の画像のように、表のそれぞれのセルが1本の線で区切られ、一般的な表の見栄えになります。

 

セルの余白を調整する

上記の作業で枠線の付いた表を作成することができますが、セルの余白を調整して見栄えを整えたい場合もあるかと思います。

セルの余白は、CSSで「padding」プロパティを使って調整が可能です。

たとえば、padding(余白)を上下左右10px開ける場合には、以下のように記述します。
th, td { 
border: 1px solid #E5E5E5; 
padding: 10px;
}

ブラウザ上の表示

 それぞれのセルに10pxの余白を付けた場合

 

見出し行の背景色を指定する

また、表の見出し行に色を付けたい場合は、「background-color」プロパティを使って背景色を付けることができます。

th {
background-color: #F7F6F6;
}

ブラウザ上の表示

見出しに背景色を付けた表

 

まとめ

以上、htmlで表を作成する方法について説明しました。

htmlでは「table」タグや「tr」「th」「td」タグを使って表をつくることができます。

ただ、htmlで表のレイアウトを作成することができますが、作成した表に枠線を表示させるには、CSSでborderプロパティやborder-collapseプロパティを使って調整する必要があります。

他にも、paddingプロパティでセルの余白部分を調整するなどして、見栄えの整った表をつくることが可能です。

htmlで簡単な表を作成したい時には、上記を参考にしてみてください。

htmlの書き方カテゴリの最新記事