ここではHTMLを覚え始めたばかりの方がテーブルレイアウトを覚えるために、私の自己流の覚え方をご紹介します。tableの組み方を覚える目的で話の中に一部フィクションが含まれていますのでご了承ください。
テーブルの基本的な作り方
では、さっそくテーブルを作っていきます。まず、テーブルなのでtable要素を書いていきましょう。
<table> </table>
ここまでは誰でも分かりますね。
ところで、みなさんはHTMLでテキストを改行したいときに使うタグって覚えてますか？
brタグでしたね。多分、このタグはHTMLを勉強している初期の頃に覚えるタグのひとつだと思います。
<br>
実は、テーブルにも「改行タグ」というものが存在します。テーブルの改行タグというのは、テーブルの「t」と改行タグ（br）の「r」を取って「tr」と記入しますbrじゃなくてtrですよ。
※trタグの本当の由来は「Table Row」の頭文字です。英語が得意な方はこちらの方が覚えやすいですね。
<table> <tr> </tr> </table>
このtrの開始ダグと終了タグまでが１つの行になります。そして、その前後が改行されていると思ってください。
それでは、次にセルを入れていきます。セルはテーブルの中にデータを入れる場所なので、テーブルの「t」とデータの「d」の頭文字を取ってtdと書きます。
<table>
<tr>
<td></td>
</tr>
</table>
はい、これでセルがひとつできました。
セル（td要素）をさらに横に並べたい場合、trタグで改行されてしまわないよう<tr>~</tr>の間に入れていきましょう。
<table>
<tr>
<td></td><td></td><td></td>
</tr>
</table>
今回は分かりやすくHTMLのソース上でもtd要素を横に並べています。これで、セルが横に３つ並びました。
さて、セルが３つ並んだので、同じように１段下にも３つのセルを並べてみましょう。こういう場合、どうしたらよいと思いますか？また、<tr>~</tr>の改行を作って中にtd要素を同じように３つ並べればいいですね。
<table>
<tr>
<td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td>
</tr>
</table>
これでヨコ３つ、タテ２つのテーブルができました。
実際に見てみましょう。
ボタンで表示を切り替えてご覧ください。
See the Pen table01 by ken (@ken81) on CodePen.
さらに、下にもう２段追加して３×４のセルを作ってみます。
See the Pen table02 by ken (@ken81) on CodePen.
セルの中身が空のままだとアレなので何か例を入れてみますか。
See the Pen table03 by ken (@ken81) on CodePen.
適当に「名前」「性別」「出身地」という項目を作って中にデータを入れてみました。ここで、具体的な名前である「鈴木」や「田中」に対して、一番上にある項目名「名前」の部分は、いわばテキストでいうところの「見出し」となる部分です。HTMLで見出しといえばh1~h6の「見出しタグ」というものを使用するわけですが、同じようにテーブルにも見出しタグというのがあります。
勘の良い方はお気づきかもしれませんがテーブルの見出しタグは、テーブルの「t」と見出しタグの「h」を取って「th」と記入します。つまり、先ほどのテーブルは次のようになります。
<table>
<tr>
<th>名前</th><th>性別</th><th>出身地</th>
</tr>
<tr>
<td>鈴木</td><td>男性</td><td>東京都</td>
</tr>
<tr>
<td>田中</td><td>女性</td><td>埼玉県</td>
</tr>
<tr>
<td>佐藤</td><td>男性</td><td>千葉県</td>
</tr>
</table>
一番上の行にあるセルが「td」から「th」に変わりました。
See the Pen table04 by ken (@ken81) on CodePen.
HTMLの見出しタグが太字になるのと同じように、テーブルの見出しタグも太字になりましたね。
テーブルの線を１本にする方法
さて、先ほどのテーブルを見ていて、線が２重になっててカッコ悪いなと思いませんでしたか？私も表が２重になっているのは好きじゃありません。これは「table要素の線」と「td要素の線」の２つがそれぞれ離れて表示されることが原因で起こっているものです。
テーブルの２重線を１本にするにはスタイルシートに次のように記入します。
table{border-collapse:collapse;}
ポイントは、table（もしくは、その属性のclassなど）をセレクタにすることです。
border-collapseは、tableの線を「重ねて表示（collapse;）」するか「離して表示（separate）」するかを設定するプロパティです。初期設定では「separate（離す）」になっているためこれを「collapse」に変更します。
実際に１本にした表がこちらです。
See the Pen table05 by ken (@ken81) on CodePen.
以上がテーブルの作り方の基本になります。複雑に思えたテーブルの構成が少しは覚えやすくなったのではないでしょうか。最後まで読んでいただいてありがとうございます。
