HTML

HTML|tableの作り方を覚えよう

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

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

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

<table>
</table>

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

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

<br>

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

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

<table>
  <tr>
  </tr>
</table>

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

それでは、次にセルを入れていきます。セルはテーブルの中にデータを入れる場所なので、テーブルの「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要素を横に並べています。これで、セルが横に3つ並びました。

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

<table>
  <tr>
    <td></td><td></td><td></td>
  </tr>
  <tr>
    <td></td><td></td><td></td>
  </tr>
</table>

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

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

See the Pen table01 by ken (@ken81) on CodePen.

さらに、下にもう2段追加して3×4のセルを作ってみます。

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の見出しタグが太字になるのと同じように、テーブルの見出しタグも太字になりましたね。

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

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

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

table{border-collapse:collapse;}

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

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

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

See the Pen table05 by ken (@ken81) on CodePen.

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


最近の記事

  1. CSS

    要素の配置が簡単に決まるFlexboxの使い方
  2. WordPress

    WordPressの立ち上げからサイト構築までの初期手順
  3. CSS

    レスポンシブウェブデザインの基本|メディアクリエリの設定
  4. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…
  5. CSS

    CSS|中央寄せが効かないときは・・・
PAGE TOP