HTML テーブルに複雑なテーブルヘッダーを実装するためのサンプルコード

複雑な表を作成するには HTML を使用します。複雑なテーブルでは通常、td の rowspan 属性値と colspan 属性値という 2 つの属性が使用されます。

HTML では、<td> タグは HTML テーブル内の標準セルを定義します。

（１）rowspan属性はセルがまたがる行数を指定します。

（2）colspan属性は、セルがまたがる列の数を指定します。

<html>   
<ヘッド>   
    <meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />   
    <title>複数のヘッダーテーブル</title>   
</head>   
<本文>   
<テーブル id="タブ" セルパディング="1" セル間隔="1" 境界線="1">   
<tr>   
 <th rowspan="2">シリアル番号</th>
 <th rowspan="2">監視場所</th>
 <th rowspan="2">電源パス</th>
 <th rowspan="2">供給電圧</th>
 <th rowspan="2">負荷電流</th>
 <th rowspan="2">落雷回数</th>
 <th rowspan="2">最新の落雷時刻</th>
 <th colspan="2">バックアップ保護オープン状態</th>
 <th rowspan="2">SPD ダメージ量</th>   
 <th colspan="2">出力オープン状態</th>
</tr>   
<tr>   
 <th>クラス B</th> 
 <th>Cレベル</th>
 <th>1番道路</th> 
 <th>2nd Road</th>  
</tr> 
<tr> <th rowspan="4">1</th>
</tr>  
<tr>   
    <th>1</th>   
    78   
    96   
    67   
    98 番目   
    88 番目   
    75   
    94   
    69 69   
    23日   
 33 
</tr> 
<tr>
 <th colspan="2">ヒントと提案</th>   
    <th colspan="2">インテリジェント雷保護ボックスの状態</th>   
    <th colspan="2">避雷ボックスモデル</th>   
    <th colspan="3">避雷ボックスのシリアル番号</th>   
    <th colspan="2">雷保護ボックスバージョン</th>
</tr>  
<tr>   
    <th colspan="2">規則に従って機械全体を検査することをお勧めします</th>   
    <th colspan="2">オンライン</th>   
    <th colspan="2">2018041201-035PF</th>   
    <th colspan="3">2018041201-256</th>   
    <th colspan="2">V1.0.0</th>   
</tr>    
</テーブル>   
</本文>   
</html>

効果画像:

境界線や区切り線のない HTML テーブル設定

ボーダーレス

<テーブル id="tbl" 境界線=1 幅="80%" フレーム=void ></テーブル>

frame 属性は、境界線の表示ルールを指定します。使用可能な設定は次のとおりです。

void 境界線を設定しません。
上記では上部の境界線のみが表示されます。
以下は下の境界線のみを表示します。
vsides は左と右の境界線のみを表示します。
hsides は上部と下部の境界線のみを表示します。
lhs は左の境界線のみを表示します。
rhs 右の境界線のみを表示します。

境界線はない

<table id="tbl" border=1 width="80%" ルール=なし ></table>

ルール属性は、区切り線の表示ルールを指定します。「none」は区切り線がまったくないことを意味します。また、「rows」と「cols」も設定できます。文字どおりの意味だけでは誤解を招きやすいです。ここで注意すべき点は、rows は行間に区切り線がない、つまり同じ行のデータが区切り線で区切られていないことを意味し、cols は列間に区切り線がない、つまり同じ列のデータが区切り線で区切られていないことです。

これで、HTML テーブルに複雑なヘッダーを実装するためのサンプルコードに関するこの記事は終了です。HTML テーブルに複雑なヘッダーを実装するための関連コンテンツの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: HTML5 と HTML4 の 10 の主な違い

>>: Vue3は現在のルーティングアドレスを取得します