基本のテーブルを作る方法
基本のテーブルを作る方法を紹介します。このサンプルでは、HTMLのtable要素とCSSを使用して、見やすい一覧表を作成します。シンプルなデザインを採用しているため、表の基本構造を学びたい方はもちろん、業務システムやWebサイトでそのまま利用できるテーブルのベースとしても活用できます。
テーブルは、商品一覧、会員一覧、お問い合わせ履歴、管理画面のデータ一覧など、複数の情報を行と列で整理して表示したい場面に適しています。このサンプルでは、ヘッダー行とデータ行を備えた基本構成となっており、項目名と内容を分かりやすく表示できます。情報量が増えても一覧性を維持しやすく、さまざまな用途へ応用できます。
項目名や表示内容はHTMLから変更でき、CSSではテーブルの横幅、文字サイズ、背景色、枠線、余白などを自由に調整できます。また、レスポンシブにも対応しているため、スマートフォン・タブレット・PCでもレイアウトが崩れにくく、初心者でも導入しやすい基本的なテーブルのサンプルです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
シンプルな一覧表を表示する基本的なテーブルです。
| 名前 | 部署 | 役職 |
|---|---|---|
| 山田 太郎 | 営業部 | 主任 |
| 佐藤 花子 | 総務部 | 担当 |
| 鈴木 一郎 | 開発部 | リーダー |
基本的なHTMLテーブルの表示例です。ヘッダーとデータ行のレイアウトを確認できます。
コードをコピーして使おう！
<!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">
<!-- タイトル -->
<div class="basic-table_title">
基本のテーブル
</div>
<!-- 説明文 -->
<p class="basic-table_text">
シンプルな一覧表を表示する基本的なテーブルです。
</p>
<!-- 横スクロール対応エリア -->
<div class="basic-table_area">
<!-- テーブル -->
<table class="basic-table">
<!-- テーブルの見出し -->
<thead>
<tr>
<th>名前</th>
<th>部署</th>
<th>役職</th>
</tr>
</thead>
<!-- テーブルのデータ -->
<tbody>
<tr>
<td>山田 太郎</td>
<td>営業部</td>
<td>主任</td>
</tr>
<tr>
<td>佐藤 花子</td>
<td>総務部</td>
<td>担当</td>
</tr>
<tr>
<td>鈴木 一郎</td>
<td>開発部</td>
<td>リーダー</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではテーブルの構造と表示するデータを作成し、CSSでは見た目やレイアウトを設定します。シンプルな構成になっているため、一覧表の基本的な作り方を学びたい方や、そのまま業務システムやWebサイトへ導入したい場合にも利用しやすいサンプルです。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはテーブル全体を構成するファイルです。タイトル、説明文、列名、表示するデータを編集できます。行や列を追加・削除することで、用途に合わせた一覧表へ変更できます。
style.cssはテーブル全体のデザインを設定するファイルです。横幅、背景色、文字色、枠線、余白、見出しセルのデザインなどを自由に変更できます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開くと基本のテーブルを表示できます。HTMLを書き換えることで表示内容を自由に変更できます。
カスタマイズできる内容
index.htmlではタイトル、説明文、列名、表示データを変更できます。行や列を追加・削除して、会員一覧、商品一覧、売上一覧など用途に合わせたテーブルへ変更できます。
style.cssではテーブル全体の横幅、セルの余白、文字サイズ、背景色、文字色、枠線、見出しセルの色などを変更できます。用途に応じて見た目を自由に調整できます。
数値調整
style.css
max-width:760px;
テーブル全体の最大横幅です。値を大きくすると横幅が広がり、小さくするとコンパクトになります。
padding:32px;
テーブル全体の内側余白です。値を大きくすると余白が広がり、小さくすると詰まった表示になります。
padding:14px 16px;
セル内の余白です。値を大きくするとセルが広くなり、小さくするとコンパクトになります。
font-size:16px;
セル内の文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さく表示されます。
border-radius:18px;
テーブル全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:760pxにより、画面幅に応じてテーブル全体が縮小されます。また、overflow-x:auto;を使用しているため、画面幅が狭い場合は横スクロールで内容を確認できます。640px以下では余白と文字サイズも自動調整されるため、スマートフォン・タブレット・PCで利用できます。
コメント