プログラミング

美しいテーブルの作り方

最終更新： 06/04/2025
1 分の読み

HTMLとCSSを使用して、ウェブページ上に美しくて整然としたテーブルを作成する方法について詳しく説明します。このガイドでは、基本的なテーブルの作成から、デザインをカスタマイズして魅力的に仕上げる方法までを扱います。この記事を読めば、HTMLとCSSを使って、視覚的に洗練されたテーブルを作成できるようになるでしょう。

1. 基本的なHTMLテーブルの作成

まずは、HTMLを使ってテーブルを作成する基本的な構造を理解しましょう。HTMLのテーブルは、

関連記事
タグを使って定義します。テーブルの行は

タグ、テーブルのセルは

タグを使用してヘッダー行を作成し、

タグ内にテーブルデータ行を定義しています。これが基本的なテーブルの構造です。

2. CSSを使ったテーブルのスタイリング

次に、CSSを使ってテーブルをスタイリングしてみましょう。テーブルのデザインは、色、境界線、余白、フォントの変更などで大きく改善できます。

以下のCSSコードは、基本的なテーブルにスタイリングを加え、見やすく美しいテーブルを作成する例です。

css
/* テーブル全体のスタイル */
table {
    width: 100%;
    border-collapse: collapse; /* 境界線の重なりをなくす */
    margin: 20px 0;
    font-family: Arial, sans-serif;
}

/* テーブルヘッダーのスタイル */
th {
    background-color: #4CAF50; /* 緑色 */
    color: white;
    padding: 12px 15px;
    text-align: left;
}

/* テーブルデータセルのスタイル */
td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #ddd; /* 薄い灰色の下線 */
}

/* 行の交互背景色を設定 */
tr:nth-child(even) {
    background-color: #f2f2f2; /* 灰色 */
}

/* 行をホバーしたときのスタイル */
tr:hover {
    background-color: #ddd; /* 薄い灰色 */
}

3. スタイリングの詳細説明

  • border-collapse: collapse;

    このプロパティは、テーブルの境界線が重ならないようにします。デフォルトでは、セルの間に隙間が開くことがありますが、このプロパティを使うと、境界線が一つに統一されます。

  • th（テーブルヘッダーセル）のスタイル

    ヘッダー行は、通常のセルとは異なるデザインが望ましいため、背景色を緑に設定し、文字色を白にしています。paddingを設定して、セル内のコンテンツに余白を加えています。また、text-align: left;で文字を左揃えにしています。

  • td（テーブルデータセル）のスタイル

    データセルには、背景色やフォントサイズの変更が加えられています。border-bottom: 1px solid #ddd;で、各行の間に薄い線を引いています。これにより、行が視覚的に区切られて見やすくなります。

  • tr:nth-child(even)

    このセレクタは、偶数行に異なる背景色（灰色）を設定するために使用します。これにより、テーブルの行が交互に色分けされ、読みやすさが向上します。

  • tr:hover

    行にカーソルを合わせたときに背景色が変わるように設定しています。この効果により、ユーザーがどの行を選択しているかが視覚的に示され、インタラクティブな印象を与えます。

4. レスポンシブデザイン

モバイルデバイスでもテーブルが見やすいようにするため、レスポンシブデザインを導入することが重要です。小さい画面では、テーブルの列を横スクロールさせて表示することがよく行われます。以下はそのためのCSSコード例です。

css
@media screen and (max-width: 600px) {
    table {
        width: 100%;
        overflow-x: auto;
        display: block;
    }

    th, td {
        white-space: nowrap; /* テキストを折り返さずに1行に表示 */
    }
}

このコードは、画面幅が600px以下の場合にテーブルが横スクロールできるようにし、またテーブル内のテキストが一行に収まるように設定します。これにより、スマートフォンなどの小さな画面でもテーブルが適切に表示されます。

5. 高度なテーブルデザイン

さらにテーブルを洗練させるためには、影やグラデーションを加えることも有効です。以下のコードは、テーブルの枠に影をつける例です。

css
table {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

これにより、テーブルがページ上で浮き上がっているような効果を与えることができます。また、background-imageを使ってグラデーションを追加することもできます。

結論

HTMLとCSSを使用したテーブルの作成方法とデザインのカスタマイズについて説明しました。基本的なHTMLの構造に加えて、CSSを使用することで、視覚的に魅力的なテーブルを作成することができます。レスポンシブデザインを取り入れることで、どのデバイスでも快適に閲覧できるようになります。テーブルのデザインをカスタマイズすることで、よりプロフェッショナルなウェブページを作成することができるので、ぜひ様々なスタイリング方法を試してみてください。

最終更新： 06/04/2025
1 分の読み
Back to top button
タグ（データセル）で作成します。ヘッダー行は

タグを使用します。

html
html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>テーブルの例title>
    <link rel="stylesheet" href="styles.css">
head>
<body>

<table>
    <thead>
        <tr>
            <th>名前th>
            <th>年齢th>
            <th>職業th>
        tr>
    thead>
    <tbody>
        <tr>
            <td>山田 太郎td>
            <td>28td>
            <td>エンジニアtd>
        tr>
        <tr>
            <td>佐藤 花子td>
            <td>35td>
            <td>デザイナーtd>
        tr>
        <tr>
            <td>鈴木 次郎td>
            <td>42td>
            <td>マネージャーtd>
        tr>
    tbody>
table>

body>
html>

このHTMLコードでは、