HTML と CSS を使用して簡潔なテーブルレイアウトを実装する方法-htmlチュートリアル-php.cn

HTML と CSS を使用して簡潔なテーブルレイアウトを実装する方法

王林

リリース： 2023-10-19 10:34:48

オリジナル

894 人が閲覧しました

HTML と CSS を使用して簡潔なテーブルレイアウトを実装する方法

HTML と CSS を使用して単純なテーブルレイアウトを実装する方法

HTML と CSS は、フロントエンド開発で最も一般的に使用される 2 つの言語です。 Web ページの作成と美化に使用できます。テーブルは Web ページの一般的な要素の 1 つであり、データを表示するために使用されます。 HTML と CSS を使用して単純なテーブルレイアウトを実装するにはどうすればよいですか?コード例を示しながら、具体的な手順を以下に説明します。

ステップ 1: HTML 構造の作成
まず、HTML ファイルを作成し、テーブルの基本構造をそのファイルに追加する必要があります。コードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
    <title>简洁表格布局</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>表头1</th>
                <th>表头2</th>
                <th>表头3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>数据1</td>
                <td>数据2</td>
                <td>数据3</td>
            </tr>
            <tr>
                <td>数据4</td>
                <td>数据5</td>
                <td>数据6</td>
            </tr>
            <tr>
                <td>数据7</td>
                <td>数据8</td>
                <td>数据9</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

ログイン後にコピー

上記のコードでは、テーブルとテーブルのコンテンツを含む基本的な HTML 構造を作成しました。

ステップ 2: CSS スタイルを追加する
次に、CSS を使用してテーブルを美しくする必要があります。 style.css という名前の CSS ファイルを作成し、HTML ファイルに含めます。コードは次のとおりです。

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

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

th {
    background-color: #f2f2f2;
}

tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

tbody tr:hover {
    background-color: #f5f5f5;
}

ログイン後にコピー

上記のコードでは、CSS スタイルを設定してテーブルを美しくしています。具体的なスタイルは次のとおりです。

表の幅を 100% に設定し、border-collapse 属性を使用して境界線を 1 行に結合します。
パディングやテキストの配置など、テーブルヘッダーとテーブルコンテンツのスタイルを設定します。
ヘッダーの背景色をライトグレーに設定します。
n 番目の子の擬似クラスセレクターを使用して、テーブルの中央の偶数行に背景色を追加します。
マウスをホバーしたときのテーブル行の背景色を設定します。

ステップ 3: テーブルスタイルを調整する
必要に応じて、テーブルスタイルをさらに調整できます。たとえば、表の境界線とテキストの色を設定したり、表のヘッダーと表の内容のスタイルを調整したりできます。

table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #ddd;
    color: #333;
}

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

th {
    background-color: #f2f2f2;
    font-weight: bold;
}

tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

tbody tr:hover {
    background-color: #f5f5f5;
}

ログイン後にコピー

上記のコードでは、境界線のスタイルを追加し、テキストの色を黒に設定しました。同時に、ヘッダーのフォントを太字に設定して強調表示します。

これまでに、単純なテーブルレイアウトの実装が完了しました。実際のニーズに応じて、さらにスタイルを調整できます。

概要:
HTML と CSS を使用すると、単純なテーブルレイアウトを簡単に実装できます。まず、HTML ファイルを作成し、そのファイルにテーブルの基本構造を追加する必要があります。次に、CSS スタイルを使用して表を美しくし、表の境界線、テキストの配置、背景色、その他の属性を設定します。最後に、必要に応じてテーブルスタイルをさらに調整し、設計要件との一貫性を高めます。同時に、CSS を使用して、マウスをホバーしたときに表の行の色を変更するなど、いくつかのインタラクティブな効果を実現することもできます。

以上がHTML と CSS を使用して簡潔なテーブルレイアウトを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。