HTML ではテーブルはどのように作成されるのでしょうか? (コード例)

藏色散人
リリース: 2018-08-09 17:01:02
オリジナル
11625 人が閲覧しました

データ テーブルは誰にとっても馴染みのあるものではありません。 Excelの表以外にもホームページ制作で表示する表もあります。表の機能が一目でわかる データや統計をより直接的に見るために、Web サイトの HTML ページ上の表はどのように作成されますか?そこでこの記事では、HTML テーブルの作成に関するチュートリアルを紹介します。

まず、HTML テーブルの作成に関連するタグを紹介します。

HTML テーブルを定義します

タグ テーブルの本文 (テキスト) を定義します

表のフッター (脚注または表の注記) を定義します

要素は表のヘッダーを定義します

タグはテーブル内の 1 つ以上の列の属性値を定義します。

タグは、書式設定のためにテーブル内の列をグループ化するために使用されます。

HTMLテーブル作成の具体的なコードと例は以下の通りです:

<style type="text/css">
    /*公共样式*/
    li{
        width: 600px;
        margin: auto;
        margin-top: 20px;
    }
    p{
        width: 600px;
        margin: auto;
    }
    table{
        width: 600px;
        margin: auto;
        text-align: center;
    }

    /*基本表格样式*/
    .table-1{
        border: 1px solid #ccc;
        border-collapse: collapse;/*合并相邻表格的间距*/

    }
    .table-1 tr,.table-1 td{
        border: 1px solid #ccc;
    }

    /*无边框表格*/
    .table-2{
    }

    /*双线表格*/
    .table-3{
        border: 1px solid #ccc;
    }
    .table-3 tr,.table-3 td{
        border: 1px solid #ccc;
    }

    /*合并表格列*/
    .table-4{
        border: 1px solid #ccc;
        border-collapse: collapse;/*合并相邻表格的间距*/
    }
    .table-4 tr,.table-4 td{
        border: 1px solid #ccc;
    }

    /*合并表格行*/
    .table-5{
        border: :1px solid #ccc;
        border-collapse: collapse;
    }
    .table-5 tr,.table-5 td{
        border: 1px solid #ccc;
    }

    /*复杂表格一*/
    .table-6{
        border: :1px solid #ccc;
        border-collapse: collapse;
    }
    .table-6 tr,.table-6 td{
        border: 1px solid #ccc;
    }

    /*复杂表格二*/
    .table-7{
        border: :1px solid #ccc;
        border-collapse: collapse;
    }
    .table-7 tr,.table-7 td{
        border: 1px solid #ccc;
    }
</style>
<body>
<div class="container">
    <ol>
        <li>基本表格样式:</li>
        <table class="table-1">
            <tr>
                <td>1.1</td>
                <td>1.2</td>
                <td>1.3</td>
            </tr>
            <tr>
                <td>2.1</td>
                <td>2.2</td>
                <td>2.3</td>
            </tr>
            <tr>
                <td>3.1</td>
                <td>3.2</td>
                <td>3.3</td>
            </tr>
        </table>

        <li>无边框表格:</li>
        <table class="table-2">
            <tr>
                <td>1.1</td>
                <td>1.2</td>
                <td>1.3</td>
            </tr>
            <tr>
                <td>2.1</td>
                <td>2.2</td>
                <td>2.3</td>
            </tr>
            <tr>
                <td>3.1</td>
                <td>3.2</td>
                <td>3.3</td>
            </tr>
        </table>

        <li>双线表格:</li>
        <table class="table-3">
            <tr>
                <td>1.1</td>
                <td>1.2</td>
                <td>1.3</td>
            </tr>
            <tr>
                <td>2.1</td>
                <td>2.2</td>
                <td>2.3</td>
            </tr>
            <tr>
                <td>3.1</td>
                <td>3.2</td>
                <td>3.3</td>
            </tr>
        </table>

        <li>合并表格列:</li>
        <table class="table-4">
            <tr>
                <!--未找到在css中的处理方式-->
                <td colspan="3">1.1</td>
            </tr>
            <tr>
                <td>2.1</td>
                <td>2.2</td>
                <td>2.3</td>
            </tr>
            <tr>
                <td>3.1</td>
                <td>3.2</td>
                <td>3.3</td>
            </tr>
        </table>
        <p>注:colspan在css中失效</p>

        <li>合并表格行:</li>
        <table class="table-5">
            <tr>
                <!--未找到在css中的处理方式-->
                <td rowspan="3">1.1</td>
                <td>1.2</td>
                <td>1.3</td>
            </tr>
            <tr>
                <td>2.2</td>
                <td>2.3</td>
            </tr>
            <tr>
                <td>3.2</td>
                <td>3.3</td>
            </tr>
        </table>
        <p>注:rowspan在css中失效</p>

        <li>复杂表格(一)</li>
        <table class="table-6">
            <tr>
                <!--未找到在css中的处理方式-->
                <td>1.1</td>
                <td colspan="2">1.2</td>
            </tr>
            <tr>
                <td>2.1</td>
                <td rowspan="2">2.2</td>
                <td>2.3</td>
            </tr>
            <tr>
                <td>3.1</td>
                <td>3.3</td>
            </tr>
        </table>

        <li>复杂表格(二)</li>
        <table class="table-7">
            <tr>
                <!--未找到在css中的处理方式-->
                <td>1.1</td>
                <td>1.2</td>
                <td>1.3</td>
            </tr>
            <tr>
                <td colspan="2">2.1</td>
                <td rowspan="2">2.3</td>
            </tr>
            <tr>
                <td>3.1</td>
                <td>3.2</td>
            </tr>
        </table>
    </ol>
</div>
</body>
ログイン後にコピー

効果は以下の通りです:

そこで、この記事ではテーブルのデモンストレーションを通してHTMLテーブルを作成する方法を紹介します。 htmlコード。困っている人たちの役に立てば幸いです!

HTML ではテーブルはどのように作成されるのでしょうか? (コード例)


以上がHTML ではテーブルはどのように作成されるのでしょうか? (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート