ここではHTMLを覚え始めたばかりの方がテーブルレイアウトを覚えるために、私の自己流の覚え方をご紹介します。tableの組み方を覚える目的で話の中に一部フィクションが含まれていますのでご了承ください。

テーブルの基本的な作り方

では、さっそくテーブルを作っていきます。まず、テーブルなのでtable要素を書いていきましょう。

ここまでは誰でも分かりますね。

ところで、みなさんはHTMLでテキストを改行したいときに使うタグって覚えてますか？
brタグでしたね。多分、このタグはHTMLを勉強している初期の頃に覚えるタグのひとつだと思います。

実は、テーブルにも「改行タグ」というものが存在します。テーブルの改行タグというのは、テーブルの「t」と改行タグ（br）の「r」を取って「tr」と記入しますbrじゃなくてtrですよ。

※trタグの本当の由来は「Table Row」の頭文字です。英語が得意な方はこちらの方が覚えやすいですね。

このtrの開始ダグと終了タグまでが１つの行になります。そして、その前後が改行されていると思ってください。

それでは、次にセルを入れていきます。セルはテーブルの中にデータを入れる場所なので、テーブルの「t」とデータの「d」の頭文字を取ってtdと書きます。

はい、これでセルがひとつできました。
セル（td要素）をさらに横に並べたい場合、trタグで改行されてしまわないよう<tr>~</tr>の間に入れていきましょう。

今回は分かりやすくHTMLのソース上でもtd要素を横に並べています。これで、セルが横に３つ並びました。

さて、セルが３つ並んだので、同じように１段下にも３つのセルを並べてみましょう。こういう場合、どうしたらよいと思いますか？また、<tr>~</tr>の改行を作って中にtd要素を同じように３つ並べればいいですね。

これでヨコ３つ、タテ２つのテーブルができました。
実際に見てみましょう。

ボタンで表示を切り替えてご覧ください。

さらに、下にもう２段追加して３×４のセルを作ってみます。

セルの中身が空のままだとアレなので何か例を入れてみますか。

適当に「名前」「性別」「出身地」という項目を作って中にデータを入れてみました。ここで、具体的な名前である「鈴木」や「田中」に対して、一番上にある項目名「名前」の部分は、いわばテキストでいうところの「見出し」となる部分です。HTMLで見出しといえばh1~h6の「見出しタグ」というものを使用するわけですが、同じようにテーブルにも見出しタグというのがあります。

勘の良い方はお気づきかもしれませんがテーブルの見出しタグは、テーブルの「t」と見出しタグの「h」を取って「th」と記入します。つまり、先ほどのテーブルは次のようになります。

一番上の行にあるセルが「td」から「th」に変わりました。

HTMLの見出しタグが太字になるのと同じように、テーブルの見出しタグも太字になりましたね。

テーブルの線を１本にする方法

さて、先ほどのテーブルを見ていて、線が２重になっててカッコ悪いなと思いませんでしたか？私も表が２重になっているのは好きじゃありません。これは「table要素の線」と「td要素の線」の２つがそれぞれ離れて表示されることが原因で起こっているものです。

テーブルの２重線を１本にするにはスタイルシートに次のように記入します。

ポイントは、table（もしくは、その属性のclassなど）をセレクタにすることです。

border-collapseは、tableの線を「重ねて表示（collapse;）」するか「離して表示（separate）」するかを設定するプロパティです。初期設定では「separate（離す）」になっているためこれを「collapse」に変更します。

実際に１本にした表がこちらです。

以上がテーブルの作り方の基本になります。複雑に思えたテーブルの構成が少しは覚えやすくなったのではないでしょうか。最後まで読んでいただいてありがとうございます。

2017.09.13

HTML｜テーブルのセルを結合したい

テーブルで表を作成していて、セルを結合したいときってありますよね。ここではその方法についてお話していきます。 th要素・td要素を横に結合させる方法 まずは、セルを横に結合させる方法です。セルの横の結合は、下記の属性を結合したいthタグまたはthタグに...

2017.11.16

テーブルを角丸にする方法

ここでは、tableの角を丸くする方法についてお話させていただきます。最初にお話しておきますが、tableの角を丸くするのは少しやっかいです。通常の角丸に効くプロパティborder-radiusを設定すれば済むという話ではありませんので、少し話が長くなってしま...