みなさんこんにちは！HTMLを使って表を作りたいと思ったことはありませんか？
tableタグを使ってみても思うよういかなかった経験がある人も多いのではないでしょうか。そこで今日は、「tableタグで表を自由自在に作成する」ということを目標として、
- tableタグの使い方
- tr, th, tdタグとは
- セルの連結方法
- 表の罫線デザインを変える
といった基本的な内容からといった応用的な内容までどこよりもわかり易く解説していきます。表を自由自在に使えるようにしたいという方は参考にしていただければ幸いです！
表を作成するには？
それでは、既知の方もいるかもしれませんがHTMLで表を作成するにはtableタグというものを使います。しかし、tableタグとは表の大枠でしかなくいわばここから表を始めるよ！という合図になるタグです。
tableの中身には他にもtrタグや、thタグ、tdタグなどセット使うものをうまく使いこなして初めて思うような表が完成します。なので、それぞれのセットで使うタグについて詳しく見ていきましょう。
trタグとは
まずは、trタグです。trとはTable Rowの略でrowから分かるように、tableの行部分を指定するタグになります。
<table>
<tr>
行の中身を書く
</tr>
</table>
つまりこういうことですね。
thタグとは
次にthタグを見ていきましょう。thとはTable Headerの略でHeaderの通りセルの内容の見出しを書くタグになります。通常見出しは右に並ぶ(行としてならぶので)trタグの中に書きます。
<table>
<tr>
<th>見出し</th>
</tr>
こういうことですね。
実際のコードをみてみると
<!DOCTYPE html>
<html lang="jp" dir="ltr">
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body style="background: #00ff00">
<table border="1">
<tr>
<th>見出し1</th>
<th>見出し2</th>
</tr>
</table>
</body>
</html>
こんなかんじですね。
table border=“1"
についてはまた後で説明します。
tdタグとは
さて最後がこのtdタグですね。tdはTable Dataの略で実際のデータを入れていきます。tableのデータも行で定義していきますので、trタグの中に入れることになりますね。
<table>
<tr>
<td>データ</td>
</tr>
</table>
こんな感じですね。
実際に使ってみると、
<!DOCTYPE html>
<html lang="jp" dir="ltr">
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body style="background: #00ff00">
<table border="1">
<tr>
<td>データ1</td>
<td>データ2</td>
</tr>
</table>
</body>
</html>
こんな感じです。
表を作成しよう！
さて、これまでの知識を合わせて実際に機能する表を作ってみます。とはいっても、先程したことを合わせるだけで、
<!DOCTYPE html>
<html lang="jp" dir="ltr">
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body style="background: #00ff00">
<table border="1">
<tr>
<th>見出し1</th>
<th>見出し2</th>
</tr>
<tr>
<td>データ1</td>
<td>データ2</td>
</tr>
</table>
</body>
</html>
このように実際に表になっていますね。
また、trタグで囲わずにtdタグで見出しっぽいデザインにすれば見出しっぽく見せることもできますが、それはHTMLとしては間違っています。
視覚的には良くてもHTMLとして間違っていると詳しくは述べませんが様々なよろしくないことがあるので、意味的に正しいHTMLを使うとうことを常に心がけましょう。
<table border="1">
<tr>
<th>見出し1</th>
<th>見出し2</th>
<th>見出し3</th>
</tr>
<tr>
<td>データ1</td>
<td>データ2</td>
</tr>
</table>
もちろんこのようにして、見出ししかない列も作れます。
これが表を作成する基本ですので必ずこれらの使い分けはマスターするようにしましょう！
表のセルを連結しよう！
さて、ここまでで表を作成する基本を得てきましたが実際にはここはセル2子分の幅がほしいとかいうことはよくあることです。これらもマスターしてしまいましょう！
具体的には、セルを連結するのですが、縦に連結するパターンと横に連結するパターンがあるのでひとつずつみてきます。
縦にセルを連結しよう！
まずは縦に連結するパターンから見ていきましょう。
<!DOCTYPE html>
<html lang="jp" dir="ltr">
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body style="background: #00ff00">
<table border="1">
<tr>
<th>見出し1</th>
<th>見出し2</th>
</tr>
<tr>
<td>データ1</td>
<td>データ2</td>
</tr>
<tr>
<td>データ3</td>
<td>データ4</td>
</tr>
</table>
</body>
</html>
例えばこのような表があったとき、”データ1”は縦に2つ分のセルにしたいと思った場合は、tdにrowspan属性をつけてあげます。
コードをみていきましょう。
<!DOCTYPE html>
<html lang="jp" dir="ltr">
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body style="background: #00ff00">
<table border="1">
<tr>
<th>見出し1</th>
<th>見出し2</th>
</tr>
<tr>
<td rowspan="2">データ1</td>
<td>データ2</td>
</tr>
<tr>
<td>データ4</td>
</tr>
</table>
</body>
</html>
その場合2つ分にしたいセルにrowspan=“2”を指定してやると、
このように連結できます。
横にセルを連結してみよう！
さて、縦への分割はrowspanでしたね。と、いうことは、、、そうですね、横への分割はcolspanを使います。
<!DOCTYPE html>
<html lang="jp" dir="ltr">
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body style="background: #00ff00">
<table border="1">
<tr>
<th>見出し1</th>
<th>見出し2</th>
</tr>
<tr>
<td colspan="2">データ1</td>
</tr>
<tr>
<td>データ3</td>
<td>データ4</td>
</tr>
</table>
</body>
</html>
こうしてやると、
しっかり横に連結されていますね。
表のデザインも変更してみよう！
さて、セルの分割も自由にできるようになったところで、表のデザインを少しだけいじってみましょう！先ほど、
table border=“1"
というのがでてきましたね。これは実はborderの線の幅を表していたんですね。これを変えることにより、ボーダーの線の幅が変わるのでためしてみてください。
tableは様々なオプションがあるので全ては紹介できませんが、表として見やすくするために、色々変えて見ましょう。
<!DOCTYPE html>
<html lang="jp" dir="ltr">
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body style="background: #00ff00">
<table border="1" cellspacing="10" cellpadding="10" bgcolor="#fff">
<tr>
<th>見出し1</th>
<th>見出し2</th>
</tr>
<tr>
<td>データ1</td>
<td>データ2</td>
</tr>
<tr>
<td>データ3</td>
<td>データ4</td>
</tr>
</table>
</body>
</html>
どうでしょう。tableに色々属性を加えることで見やすくなりましたね。
ここでは、こんなふうに色々弄れることを知ってもらえれば大丈夫なので詳しく説明はしませんが、詳しく知りたい方は以下の記事で全て詳しく書かれているので参考にしてみてください！
重なった解説も多いので目次から自分の知りたいところをチョイスするのがおすすめです！
まとめ
いかがでしたか。表の作り方はもちろん、各種タグを理解して自由自在に扱えるようになってもらえたのではないでしょうか？
tableタグは上手く使えばとても見やすい表ができあがるので是非表マスターになっていただければ幸いです！それでは！！
