※当サイトではアフィリエイト広告を利用しています

HTML / CSS

【tableタグ】基本的な表の作り方【HTML】

 
【tableタグ】基本的な表の作りかた【HTML】

HTMLのtableタグってがなんだか独特ですよね。。

今回はHTMLのtableタグを使った基本的な表の作り方をまとめてみたいと思います。

完成イメージはこんなかんじです。

See the Pen
qBOzyje by notebook (@orange-notebook)
on CodePen.

テーブルの作りかた

HTMLの構成

表を構成するために、似たようなタグ名が何個も登場します。

  • tableタグ：
    表全体を囲むタグ。

 

  • trタグ：
    table rowの略。trで指定した部分が1行分(横列)になる。

 

  • thタグ：
    table headerの略。表の見出しで、trタグの中に入る。

 

  • tdタグ：
    table dataの略。表の見出しに対する値で、trタグの中に入る。

言葉の説明だけだとイメージを掴みづらいと思うので、
よくある1行目が見出しになっている表のHTML構成を図にまとめてみました。

tableタグの図解

 

またこれらのタグを使って表を作ると、どんなかんじになるのかみてみましょう。

See the Pen
VwvJEpE by notebook (@orange-notebook)
on CodePen.

<table>
  <tr>
    <th>姓 (th)</th>
    <th>名 (th)</th>
    <th>性別 (th)</th>
  </tr>
  <tr>
    <td>山田 (td)</td>
    <td>太郎 (td)</td>
    <td>男性 (td)</td>
  </tr>
  <tr>
    <td>山田 (td)</td>
    <td>花子 (td)</td>
    <td>女性 (td)</td>
  </tr>
</table>

 

tableタグの中にtrタグが3つあり、3行の表になっています。
1行目のtrタグの中は見出しのthタグで「姓」、「名」、「性別」を作りました。
見出しなのでデフォルトで太字になっていますね。

そして2行目と3行目は、見出しに対する値としてtdタグで入力されています。

HTMLだけだとなんともシンプルすぎるので、これからCSSでデザインを整えていきます。

基本的なCSSの設定

表はデザインによって見栄えがかなりちがうと思いますが、
今回は基本的な部分だけご紹介したいと思います。

  • border (table, th, tdに指定する)：
    HTMLだけだと表に線が入らないので、borderで線を加えます。

 

  • border-collapse: collapse; (table, th, tdに指定する)：
    borderを指定しただけだと問題があり、線が二重線になってしまいます！
    border-collapse: collapse;を追加すると、線がダブらなくなります。

 

  • padding (th, tdに指定する)：
    何も設定しないと余白がありません。
    th, tdのセル内に余白を入れると表が見やすくなります。

上記を適用させると、こんなかんじの表になりました！

See the Pen
qBOzyje by notebook (@orange-notebook)
on CodePen.

Sass(SCSS)で記載しています。

table, th, td {
  border: 1px solid #333;
  border-collapse: collapse;
}

table {
  margin: 20px;
  color: #333;
  
  tr:first-child {
    background: aliceblue;
  }
  
  th, td {
    padding: 5px 15px;
  }
}

 

また追加で、1つめのtrタグ(中に見出しのthタグが入っている)に薄い水色背景色を入れています。

超シンプルではありますが、HTMLだけのときと比べると、表らしくなりましたね。

以上、tableタグでの基本的な表の作りかたでした。

関連する記事