CSSを使って美しい表を作成するにはどうすればよいですか? 【例】-CSSチュートリアル-php.cn

CSSを使って美しい表を作成するにはどうすればよいですか? 【例】

藏色散人

リリース： 2018-09-05 14:57:27

オリジナル

7389 人が閲覧しました

この記事では、css を使用して美しく簡潔な HTML テーブルを作成する方法を詳しく紹介します。誰もが HTML 関連の知識に触れると、多かれ少なかれ自分で小さなコードを書いて、小さな効果を生み出すことになると思います。たとえば、さまざまな Web サイトを閲覧すると、常にさまざまなテーブル表示が表示されますが、その中にはまったくスタイルのない従来のテーブルもあります。表示形式に特徴のあるものもあります。

初心者にとっては、CSS にまったく触れずにテーブルを作成することもできますが、そのようなテーブルは退屈で退屈です。それでは、CSS スタイルで作成された非常に美しく簡潔な表を共有しましょう。

div+css 見栄えの良いテーブルを作成するための具体的なコード例は次のとおりです:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用css制作的一款好看表格样式示例</title>
    <style>
        #t1
        {
            font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
            width:100%;
            border-collapse:collapse;
        }

        #t1 td, #t1 th
        {
            font-size:1em;
            border:1px solid #1094f2;
            padding:3px 7px 2px 7px;
        }

        #t1 th
        {
            font-size:1.1em;
            text-align:left;
            padding-top:5px;
            padding-bottom:4px;
            background-color: #029789;
            color:#ffffff;
        }

        #t1 tr.alt td
        {
            color:#000000;
            background-color: #94ef9a;
        }
    </style>
</head>
<body>
<table id="t1">
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>爱好</th>
    </tr>

    <tr>
        <td>张三</td>
        <td>男</td>
        <td>唱歌</td>
    </tr>

    <tr class="alt">
        <td>李四</td>
        <td>女</td>
        <td>跳舞</td>
    </tr>

    <tr>
        <td>王二</td>
        <td>男</td>
        <td>看书</td>
    </tr>

    <tr class="alt">
        <td>赵五</td>
        <td>男</td>
        <td>爬山</td>
    </tr>
</table>
</body>
</html>

ログイン後にコピー

上記のコードにブラウザからアクセスすると、その効果は次のようになります:

CSSを使って美しい表を作成するにはどうすればよいですか? 【例】