BinaryDevelop
  1. ホーム
  2. Web制作
  3. HTML/Xhtml

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

2022-01-07 09:36:01

htmlを使って複雑なテーブルを作る。複雑な表は一般的にtdの2つの属性、rowspan , colspanの属性値を使用します。

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

　　(1) rowspan属性は、セルがまたがることができる行数を指定します。

　　(2) colspan プロパティは、セルがまたがることができる列の数を指定します。 

<html>   
<head>   
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
    <title>Multi-table header form</title>   
</head>   
<body>   
<table id="tab" cellpadding="1" cellspacing="1" border="1">   
<tr>   
 <th rowspan="2">serial</th>
 <th rowspan="2">Monitoring location</th>
 <th rowspan="2">Power supply access</th>
 <th rowspan="2">Supply voltage</th>
 <th rowspan="2">load current</th>
 <th rowspan="2">Number of lightning strikes</th>
 <th rowspan="2">Time of last lightning strike</th>
 <th colspan="2">Back-up protection idle state</th>
 <th rowspan="2">SPD damage quantity</th>   
 <th colspan="2">Output idle state</th>
</tr>   
<tr>   
 <th>Class B</th> 
 <th>Class C</th>
 <th>1-way</th> 
 <th>2-way</th>  
</tr> 
<tr> <th rowspan="4">1</th>
</tr>  
<tr>   
    <th>1</th>   
    <th>78</th>   
    <th>96</th>   
    <th>67</th>   
    <th>98</th>   
    <th>88</th>   
    <th>75</th>   
    <th>94</th>   
    <th>69</th>   
    <th>23 </th>   
 <th>33 </th> 
</tr> 
<tr>
 <th colspan="2">Tip suggestions</th>   
    <th colspan="2">Smart Lightning Protection Box Status</th>   
    <th colspan="2">Lightning protection box model</th>   
    <th colspan="3">Lightning protection box serial number</th>   
    <th colspan="2">Lightning protection box version</th>
</tr>  
<tr>   
    <th colspan="2">It is recommended that the whole machine be tested according to the protocol</th>   
    <th colspan="2">Online</th>   
    <th colspan="2">2018041201-035PF</th>   
    <th colspan="3">2018041201-256</th>   
    <th colspan="2">V1.0.0</th>   
</tr>    
</table>   
</body>   
</html>

レンダリング

HTMLテーブルの設定 ボーダー、仕切りなし

ボーダーなし 

<table id="tbl" border=1 width="80%" frame=void ></table>

frame属性はボーダーの表示規則を指定するもので、以下の設定が可能である。

  • void ボーダーなしを設定します。
  • above 上部のボーダーのみを表示します。
  • below は下のボーダーのみを表示します。
  • vsidesは左右のボーダーのみを表示します。
  • hsidesは上下のボーダーのみを表示します。
  • lhsは左のボーダーのみを表示します。
  • rhs 右のボックスのみを表示します。

分割線がない 

<table id="tbl" border=1 width="80%" rules=none ></table>

rules属性は、分割線の表示規則を指定するもので、"none"は、分割線を全くつけないことを意味し、"rows"と"cols"が設定できる。 文字通り、誤解を生みやすいのだが、ここで注意すべきはrowsは行間の分割線なし、つまり同じ列のデータ間の分割線なし、colsは列間の分割線なし、つまり同じ列のデータ間の分割線なし、ということである。

この記事は、複雑なテーブルヘッダーのサンプルコードを達成するためにhtmlテーブルについて、これに導入され、より関連するhtmlテーブル複雑なテーブルヘッダー内容は、スクリプトハウスの以前の記事を検索したり、次の関連記事を閲覧を続けてください、私はあなたが将来的にもっとスクリプトハウスをサポートして願っています！,グッチ 財布。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します