Web制作やブログでよく使うHTMLといえばtableタグ。
tableタグの使い方を知っているのと知らないのとでは、テーブルの美しさには雲泥の差が生まれます。
当記事では、
「tableタグは知ってるけど、調整の仕方はよくわからない」
という方向けに、
- tr,th,tdの違いについて
- テーブルの行高や列幅を調節・固定する方法
- セル内の文字を上下左右中央に寄せる方法
- セルの枠線の太さや色を変える方法
- セルを結合する方法
- セル内の余白を調整する方法
- セル内の文字色や背景色を変更する方法
について解説していきます。
美しいテーブルを作成する一助になれたら幸いです。
それでは早速、tableタグの使い方について解説します。
tr,th,tdの違いについて
tableタグの中に記述するhtmlタグは主に「trタグ」「thタグ」「tdタグ」の3種類があります。
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属性」にそれぞれ値を与えることで指定できます。
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属性」にそれぞれ値を与えることで指定できます。
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属性」にそれぞれ値を与えることで指定できます。
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属性」にそれぞれ値を与えることで指定できます。
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属性」に値を与えることで指定できます。
下記のような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属性」にそれぞれ値を与えることで指定できます。
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タグの書き方についてあれこれ解説しました。
あなたの表テーブルを美しくする一助になれたら幸いです。
では、また。
