【HTML講座】表の作成

キーボード

前回は リスト(箇条書き) について紹介しました。

【HTML講座】リスト(箇条書き)

2018.09.19

今回は 表の作成 についてです。

それでは見ていきましょう。



表の作成

HTML で表を作成するには tableタグを使います。

文章で説明するよりもコードを見てもらった方が早いと思うので。

先にコードを載せます。

<table>
  <thead>
  <tr>
  <th>表の見出し1</th>
  <th>表の見出し2</th>
  </tr>
  </thead>
  <tbody>
  <tr>
  <td>表の内容1</td>
  <td>表の内容2</td>
  </tr>
  </tbody>
  <tfoot>
  <tr>
  <td>表のフッター1</td>
  <td>表のフッター2</td>
  </tr>
  </tfoot>
</table>

あとで HTMLファイル にして、表示させて形を覚えましょう。。

ちなみに th は table header(ヘッダー)。

tr は table row(行)。

td は table data(データ)と覚えておけば良いでしょう。

thead と tbody と tfoot は指定した方が良いのですが、省略もできます。

これらを指定することにより、テーブルの構造が明確になります。

例えば、面倒であれば下記のようにも記述できます。

<table>
  <tr>
  <th>表の見出し1</th>
  <th>表の見出し2</th>
  </tr>
  <tr>
  <td>表の内容1</td>
  <td>表の内容2</td>
  </tr>
  <tr>
  <td>表のフッター1</td>
  <td>表のフッター2</td>
  </tr>
</table>

あと tableタグ の中でよく使われる属性を紹介しておきます。

border属性

テーブルに枠線をつけるための属性です。

例えば、border=”0″ とすれば、枠線がなくなります。

数値はピクセル単位で指定します。

width属性

テーブルの幅を指定するためには、width属性を使います。

こちらの値もピクセル単位で指定します。

width=”600″ というように指定します。

コーディングしてみると

それでは、今までのことを踏まえてコーディングしてみます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>ぱそたのHTML講座</title>
</head>
<body>
<p>表(thead、tbody、tfoot あり、ボーダー 0 で指定)</p>
<table border="0">
  <thead>
  <tr>
  <th>表の見出し1</th>
  <th>表の見出し2</th>
  </tr>
  </thead>
  <tbody>
  <tr>
  <td>表の内容1</td>
  <td>表の内容2</td>
  </tr>
  </tbody>
  <tfoot>
  <tr>
  <td>表のフッター1</td>
  <td>表のフッター2</td>
  </tr>
  </tfoot>
</table>
<p>表(thead、tbody、tfoot なし、幅 600、ボーダー 1 で指定)</p>
<table width="600" border="1">
  <tr>
  <th>表の見出し1</th>
  <th>表の見出し2</th>
  </tr>
  <tr>
  <td>表の内容1</td>
  <td>表の内容2</td>
  </tr>
  <tr>
  <td>表のフッター1</td>
  <td>表のフッター2</td>
  </tr>
</table>
</body>
</html>

これをブラウザ(Edge)で表示させるとこんな感じです。

表の作成

最後に

キーボード

いかがでしょうか。

今回は表の作成について学習しましたが。

昔、テーブルレイアウトという tableタグ を多用したホームページがありました。

しつこいようですが、あくまで HTML は文書の論理構造を指定するのがメインです。

tableタグ は、表を定義するものです。

それ以外の理由で使うのは好ましくないのです。

border属性を 0 にすれば、テーブルレイアウトは可能なのですが。

表の意味を持たないものに tableタグ を使うべきではありません。

見た目のレイアウトは、CSS(スタイルシート)で行うようにしましょう。

次回は、インライン要素とブロックレベル要素 についてです。

【HTML講座】インライン要素とブロックレベル要素

2018.09.21

コツコツやっていきます。