基本テーブルを作る方法【HTML/CSS・サンプルコード付き】

テーブル

基本テーブルを作る方法

基本テーブルを作る方法を紹介します。本記事では、HTMLとCSSを使用して、見出し行とデータ行を持つシンプルな表を作成します。商品一覧、料金表、スケジュール表、比較表など、情報を行と列で整理して表示したい場面で使える基本的なテーブルです。

このサンプルコードを利用すると、HTMLの table、thead、tbody、tr、th、td を使った基本構造を確認できます。CSSで余白、罫線、背景色、文字の見やすさを整えているため、そのままコピペして表デザインの土台として使いやすい構成です。

基本テーブルは、Webサイトの料金一覧、会社概要、商品スペック、イベント日程、管理画面の一覧表示など、幅広い用途で活用できます。まず基本の作り方を理解しておくことで、横スクロール対応、固定ヘッダー、並び替え、検索機能付きテーブルなどにも応用しやすくなります。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

項目名 内容 備考
項目A サンプル内容A 備考A
項目B サンプル内容B 備考B
項目C サンプル内容C 備考C
項目D サンプル内容D 備考D

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コードを指定 -->
  <meta charset="UTF-8">

  <!-- スマホ表示に対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>基本テーブル</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- テーブル全体を囲むエリア -->
  <div class="basic-table_wrap">

    <!-- 基本テーブル -->
    <table class="basic-table_table">

      <!-- テーブルの見出し行 -->
      <thead>
        <tr>
          <th>項目名</th>
          <th>内容</th>
          <th>備考</th>
        </tr>
      </thead>

      <!-- テーブルのデータ行 -->
      <tbody>

        <tr>
          <td>項目A</td>
          <td>サンプル内容A</td>
          <td>備考A</td>
        </tr>

        <tr>
          <td>項目B</td>
          <td>サンプル内容B</td>
          <td>備考B</td>
        </tr>

        <tr>
          <td>項目C</td>
          <td>サンプル内容C</td>
          <td>備考C</td>
        </tr>

        <tr>
          <td>項目D</td>
          <td>サンプル内容D</td>
          <td>備考D</td>
        </tr>

      </tbody>

    </table>

  </div>

</body>
</html>

ファイル構成と設置方法

このサンプルでは、HTMLとCSSを別ファイルで管理します。HTMLにテーブル構造を記述し、CSSで罫線や余白、背景色などの見た目を整えます。JavaScriptは使用しないため、シンプルな構成で利用できます。 

sample/
├── index.html
└── style.css

index.html と style.css を同じフォルダに配置し、ブラウザで index.html を開いてください。表の項目数を増やしたい場合は、HTML内の <tr> を追加します。見出しを変更したい場合は <th>、表示内容を変更したい場合は <td> を編集してください。色や余白などのデザインは style.css 側で自由に調整できます。

コメント