HTML で表を作成する方法と例

HTMLで表を作成する方法（例あり）

HTMLで表を作成する方法（例あり）

表は、データを整理して表示するための効果的な方法です。HTMLでは、<table>要素とその関連要素を使用して表を作成できます。この記事では、HTMLで表を作成する方法について、定義、使い方、例を挙げて詳しく説明します。

定義と使い方

<table>タグは、HTMLの表を定義します。HTMLの表は、1つの<table>要素と、1つ以上の<tr>、<th>、<td>要素で構成されます。

  • <table>：表全体を定義します。
  • <tr>：表の行を定義します。
  • <th>：表のヘッダーセルを定義します。ヘッダーセルの内容は通常、太字で中央揃えで表示されます。
  • <td>：表のデータセルを定義します。

基本的な表の作成

以下は、シンプルな表を作成する例です。

<table>
  <tr>
    <th>名前</th>
    <th>年齢</th>
    <th>都市</th>
  </tr>
  <tr>
    <td>田中太郎</td>
    <td>30</td>
    <td>東京都</td>
  </tr>
  <tr>
    <td>佐藤花子</td>
    <td>25</td>
    <td>大阪府</td>
  </tr>
</table>

このコードは、以下のような表を作成します。

名前 年齢 都市
田中太郎 30 東京都
佐藤花子 25 大阪府

表のスタイル設定

CSSを使用して、表のスタイルを設定できます。例えば、表に罫線を追加するには、以下のようにCSSを使用します。

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 1px solid black;
  padding: 8px;
  text-align: left;
}

その他の表の要素

表をさらに複雑にするには、以下のような要素を使用できます。

  • <thead>：表のヘッダーセクションを定義します。
  • <tbody>：表の本体セクションを定義します。
  • <tfoot>：表のフッターセクションを定義します。
  • <colgroup>：列のグループを定義します。
  • <col>：列の属性を定義します。

まとめ

この記事では、HTMLで表を作成する方法について、基本から応用まで解説しました。表は、データを効果的に表示するための強力なツールです。この記事で紹介した要素や属性を使いこなして、見やすく、分かりやすい表を作成しましょう。

関連QA

  1. Q: 表のセルを結合するにはどうすればよいですか？

    A: <td>または<th>要素のcolspan属性とrowspan属性を使用します。

  2. Q: 表の幅と高さを指定するにはどうすればよいですか？

    A: <table>要素のwidth属性とheight属性、またはCSSを使用します。

  3. Q: 表のセル内のテキストの配置を変更するにはどうすればよいですか？

    A: <td>または<th>要素のalign属性、またはCSSを使用します。