HTML でテーブルを分割および結合する (colspan、rowspan)

このコードは水平マージを示しています。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <ヘッド>
        <meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=UTF-8">
        <title>デモンストレーション テーブル タグ 2 - セルの結合</title>
        <スタイル タイプ="text/css">
            td{
                テキスト配置: 中央;
            }
        </スタイル>
    </head>
    <本文>
        <表の境界線="1" セル間隔="0" 幅="50%" 高さ="150">
            <caption>セルを水平方向に結合</caption>
<!--colspan は、結合する列の数 (2 列か 3 列かなど) を指定する必要があります -->        
            <tr> <th colspan="2">名前と年齢</th> <th>電話番号</th> </tr>
            <tr> <td>ジャック</td> <td>24</td> <td>1351234567</td> </tr>
            <tr> <td>トム</td> <td>22</td> <td>1351234567</td> </tr>
            <tr> <td>ローズ</td> <td>22</td> <td>1351234567</td> </tr>
            <tr> <td>张三</td> <td>25</td> <td>1351234567</td> </tr>
        </テーブル>
        <br/>

        <表の境界線="1" セル間隔="0" 幅="50%" 高さ="150">

実行結果:

這里寫圖片描述

このコードは垂直結合を示しています。

<表の境界線="1" セル間隔="0" 幅="50%" 高さ="150">
            <caption>セルを垂直に結合</caption>
            <tr><th>クラス</t> <th>名前</th><th>年齢</th> <th>電話番号</th> </tr>
            <tr><td rowspan="2">クラス 601</td> <td>ジャック</td> <td>24</td> <td>1351234567</td> </tr>
            <tr> <td>トム</td> <td>22</td> <td>1351234567</td> </tr>
<!--rowspan は、結合する列の数 (2 行か 3 行かなど) を指定する必要があります。-->    
            <tr><td rowspan="3">クラス 602</td> <td>ローズ</td> <td>22</td> <td>1351234567</td> </tr>
            <tr> <td>张三</td> <td>25</td> <td>1351234567</td> </tr>
            <tr> <td>李思</td> <td>25</td> <td>1351234567</td> </tr>
        </テーブル>
    </本文>
</html>

実行結果:

這里寫圖片描述

HTML でのテーブル分割と結合 (colspan、rowspan) に関するこの記事はこれで終わりです。テーブル分割と結合に関するその他の関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: HTML でランダムロールコーラーを実装するためのサンプルコード

>>: HTML ページをスクロールするときに一部のコンテンツを固定位置に固定する方法