【HTML】tableでキレイな表テーブルの作り方【徹底解説】

HTMLでキレイなテーブルを作る方法【徹底解説】
mono
mono
こんにちは、monoです。

Web制作やブログでよく使うHTMLといえばtableタグ

tableタグの使い方を知っているのと知らないのとでは、テーブルの美しさには雲泥の差が生まれます。

当記事では、

tableタグは知ってるけど、調整の仕方はよくわからない

という方向けに、

  1. tr,th,tdの違いについて
  2. テーブルの行高や列幅を調節・固定する方法
  3. セル内の文字を上下左右中央に寄せる方法
  4. セルの枠線の太さや色を変える方法
  5. セルを結合する方法
  6. セル内の余白を調整する方法
  7. セル内の文字色や背景色を変更する方法

について解説していきます。

美しいテーブルを作成する一助になれたら幸いです。

それでは早速、tableタグの使い方について解説します。

目次

tr,th,tdの違いについて

tableタグの中に記述するhtmlタグは主に「trタグ」「thタグ」「tdタグ」の3種類があります。

trタグ・・・行部分の指定(table-rowの略)
thタグ・・・見出しセルの指定(table-headerの略)
tdタグ・・・一般セルの指定(table-dataの略)

下記のようなHTMLを記述すると、

<table>
<tr>
<th>見出し1</th>
<th>見出し2</th>
</tr>
<tr>
<td>セル1-1</td>
<td>セル1-2</td>
</tr>
<tr>
<td>セル2-1</td>
<td>セル2-2</td>
</tr>
</table>

こんな感じで表テーブルが生成されます。

見出し1 見出し2
セル1-1 セル1-2
セル2-1 セル2-2

テーブルの行高や列幅を調節・固定する方法

テーブルの行高と列幅は、HTMlタグ内の、「height属性」と「width属性」にそれぞれ値を与えることで指定できます。

height・・・テーブルおよびセルの行の高さを指定する
width・・・テーブルおよびセルの列の幅を指定する

下記のようなHTMLを記述すると、

<table>
<tr height=100px>
<th width=30%>見出し1</th>
<th width=70%>見出し2</th>
</tr>
<tr height=50px>
<td>セル1-1</td>
<td>セル1-2</td>
</tr>
<tr height=200px>
<td>セル2-1</td>
<td>セル2-2</td>
</tr>
</table>

こんな感じで表テーブルが生成されます。

見出し1 見出し2
セル1-1 セル1-2
セル2-1 セル2-2

セル内の文字を上下左右中央に寄せる方法

セル内の文字を上下左右中央に寄せるには、「align属性」と「vAlign属性」にそれぞれ値を与えることで指定できます。

align・・・水平方向(左右中央)に文字を寄せる
vAlign・・・垂直方向(上下中央)に文字を寄せる

下記のようなHTMLを記述すると、

<table>
<tr height=100px>
<th align="left" vAlign="top">align="left" vAlign="top"</th>
<th align="center" vAlign="top">align="center" vAlign="top"</th>
<th align="right" vAlign="top">align="right" vAlign="top"</th>
</tr>
<tr height=100px>
<td align="left" vAlign="middle">align="left" vAlign="middle"</td>
<td align="center" vAlign="middle">align="center" vAlign="middle"</td>
<td align="right" vAlign="middle">align="right" vAlign="middle"</td>
</tr>
<tr height=100px>
<td align="left" vAlign="bottom">align="left" vAlign="bottom"</td>
<td align="center" vAlign="bottom">align="center" vAlign="bottom"</td>
<td align="right" vAlign="bottom">align="right" vAlign="bottom"</td>
</tr>
</table>

こんな感じで表テーブルが生成されます。

align="left" vAlign="top" align="center" vAlign="top" align="right" vAlign="top"
align="left" vAlign="middle" align="center" vAlign="middle" align="right" vAlign="middle"
align="left" vAlign="bottom" align="center" vAlign="bottom" align="right" vAlign="bottom"

セルの枠線の太さや色を変える方法

セルの枠線の太さや色を変えるには、「border属性」にそれぞれ値を与えることで指定できます。

border・・・線の太さを指定する
bordercolor・・・線の色を指定する
border-collapse・・・枠線の空間を指定する
border-spacing・・・境界線の空間を指定する

下記のようなHTMLを記述すると、

<table border="1" style="border-color: red; border-collapse: separate; border-spacing: 1px">
<tr>
<th>見出し1</th>
<th>見出し2</th>
</tr>
<tr>
<td>セル1-1</td>
<td>セル1-2</td>
</tr>
</table>

こんな感じで表テーブルが生成されます。

見出し1 見出し2
セル1-1 セル1-2

セルを結合する方法

複数のセルを結合するには、「colspan属性」と「rowspan属性」にそれぞれ値を与えることで指定できます。

colspan・・・水平方向のセル結合
rowspan・・・垂直方向のセル結合

下記のようなHTMLを記述すると、

<table>
<tr>
<th>見出し1</th>
<th colspan="2">見出し2</th>
</tr>
<tr>
<td rowspan="2">セル1-1</td>
<td>セル1-2</td>
</tr>
<tr>
<td>セル2-2</td>
</tr>
</table>

こんな感じで表テーブルが生成されます。

見出し1 見出し2
セル1-1 セル1-2
セル2-2

セル内の余白を調整する方法

セル内の余白は、「thタグ」や「tdタグ」の「padding属性」に値を与えることで指定できます。

padding・・・セル内の余白を指定する

下記のようなHTMLを記述すると、

<table>
<tr>
<th style="padding: 20px; width:50%;">見出し1</th>
<th>見出し2</th>
</tr>
<tr>
<td style="padding: 30px;">セル1-1</td>
<td>セル1-2</td>
</tr>
<tr>
<td style="padding: 50px;">セル2-1</td>
<td>セル2-2</td>
</tr>
</table>

こんな感じで表テーブルが生成されます。

見出し1 見出し2
セル1-1 セル1-2
セル2-1 セル2-2

セル内の文字色や背景色を変更する方法

セル内を文字色や背景色を変更するには、「color属性」と「background-color属性」にそれぞれ値を与えることで指定できます。

color・・・文字色を指定する
background-color・・・セルの背景色を指定する

下記のようなHTMLを記述すると、

<table>
<tr>
<th style="color:white; background-color:red;">見出し1</th>
<th style="color:white; background-color:blue;">見出し2</th>
</tr>
<tr>
<td style="color:red; background-color:white;">セル1-1</td>
<td style="color:blue; background-color:white;">セル1-2</td>
</tr>
<tr>
<td style="color:yellow; background-color:gray;">セル2-1</td>
<td style="color:green; background-color:gray;">セル2-2</td>
</tr>
</table>

こんな感じで表テーブルが生成されます。

見出し1 見出し2
セル1-1 セル1-2
セル2-1 セル2-2

まとめ

今回はHTMLタグの1つ、tableタグの書き方についてあれこれ解説しました。

あなたの表テーブルを美しくする一助になれたら幸いです。

では、また。

目次