枠線のない表は、HTML 表を使用したウェブページのデザインビューです。表を使用すると、大量の情報を最も単純な形式で簡単に表示できます。
HTML ページでは、多くの表構造が枠線なしで作成されます。テーブルのデザインで枠線を使用するかどうかは、その用途によって異なります。ページの表形式のデザインは、次の HTML を使用して作成できます。
例:
<table> <thead> <th>S.No</th> <th>Name</th> <th>Date of Birth</th> <th>Profile</th> <th>Salary</th> </thead> <tbody> <tr> <td>1</td><td>Jeff Smith</td> <td>35</td> <td>Assistant Manager</td> <td>120,000</td> </tr> <tr> <td>2</td> <td>Maria Garcia</td> <td>42</td> <td>Department Head</td> <td>85,000</td> </tr> <tr> <td>3</td> <td>David Rodriguez</td> <td>37</td> <td>Senior Sales Executive</td> <td>45,000</td> </tr> <tr> <td>4</td> <td>Eyon Shih</td> <td>32</td> <td>Sales Executive</td> <td>35,000</td> </tr> </tbody> </table>
上記のテーブル構造では、以下のスクリーンショットに示すようなテーブル形式でデータが表示されます。
上記のスクリーンショットでは、境界線は使用できません。デフォルトでは、表のデザインでは枠線は使用できないままになっています。表で境界線を有効にするには、スタイル境界線を追加する必要があります。この境界線には、境界線のサイズ (ピクセルなど)、境界線のタイプ (実線、細線、継承など) の 3 つの要素が含まれています。3 番目は色 (赤、青、黒など) です。緑、カラーコード)。
table{ border : 1px solid #000000; }
表の境界線を使用すると、表の表現、行と列の分離が簡単になります。
境界線のないテーブルのタイプは次のとおりです。
ネストテーブルとは、テーブル内のテーブルを指します。テーブルのネストは良い習慣ではありませんが、場合によっては、テーブルの内部にテーブルを使用することが必要になります。アクセシビリティと紛らわしいマークアップのため、テーブルのネストを使用するのはばかげているかもしれません。
以下のテーブルでは、2 つのテーブルが親テーブルの列内にネストされています。
コード:
<table width="80%" cellspacing="0" cellpadding="5"> <thead> <th>Description</th> <th>Electricals & Electronics</th> <th>Computers & Accessories</th> </thead> <tbody> <tr> <td class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </td> <td> <table width="400" cellspacing="0"> <tbody> <tr> <td>Television</td> <td>Washing Machine</td> <td>Fan</td> </tr> <tr> <td>Induction</td> <td>Room Heater</td> <td>Iron</td> </tr> <tr> <td>Inverter Kits</td> <td>Circuits</td> <td>CPU</td> </tr> <tr> <td>Keyboard</td> <td>Mouse</td> <td>Scanner</td> </tr> </tbody> </table> </td> <td> <table width="250" cellspacing="0"> <tbody> <tr> <td>Laptop</td> <td>Monitor</td> <td>CPU</td> </tr> <tr> <td>Keyboard</td> <td>Mouse</td> <td>Scanner</td> </tr> </tbody> </table> </td> </tr> </tbody> </table>
以下のスタイルは、ネストされたテーブルのデザインをより明確に表現するために使用されます。
コード:
<style type="text/css"> table th{ width: 200px; text-align: center; } td.text{ text-align: justify; padding: 5px; } table table, table table td{ border: 1px solid #000; } </style>
出力:
親テーブルには境界線がありません。ただし、内部テーブルには境界線が含まれています。明確に表現するために、ネストされたテーブルでは境界線が使用されます。枠線関連のスタイルを削除することで、ネストされたテーブルから枠線を削除できます。
ゼブラ ストライピング テーブルとは、交互の行に異なる色を持つテーブルを指します。交互の列で異なる色を使用すると、列を互いに区別しやすくなります。色によってテーブルの特定の行が見やすくなります。 table タグへのスタイルの配置は、jQuery を使用して追加することもできます。
例は基本的なものです。ここでは、HTML タグ テーブルによって表形式のデザインが作成され、その後、スタイルが追加されてこのテーブルがゼブラ ストライピング テーブルとして作成されます。
コード:
<table width="50%" cellspacing="0"> <thead> <th width="100">S.No.</th> <th width="150">Country Code</th> <th width="200">Country</th> <th width="150">Phone Code</th> </thead> <tbody> <tr> <td>1</td> <td>AW</td> <td>Aruba</td> <td>297</td> </tr> <tr> <td>2</td> <td>AU</td> <td>Australia</td> <td>61</td> </tr> <tr> <td>3</td> <td>AT</td> <td>Austria</td> <td>43</td> </tr> <tr> <td>4</td> <td>AZ</td> <td>Azerbaijan</td> <td>994</td> </tr> <tr> <td>5</td> <td>BS</td> <td>Bahamas</td> <td>1241</td> </tr> <tr> <td>6</td> <td>BH</td> <td>Bahrain</td> <td>973</td> </tr> </tbody> </table>
以下の CSS では、HTML テーブルにゼブラストライプが作成されます。
コード:
<style type="text/css"> table th, table td{ text-align: center; } tbody tr:nth-child(even) { background: #e8e7e1; } </style>
出力:
以下の出力では、異なる色を持つテーブルの行を交互に配置する方法がわかります。
枠線のない表は、表の表現方法の 1 つです。表形式は、ul > などの他の HTML タグを使用して実現することもできます。 li、div などがありますが、表形式の構造に table を使用すると、スタイル設定の作業が軽減されますが、レスポンシブ デザインのアプローチにより、表形式のデザインに div を使用することが増加しています。
以上がHTML の枠線のない表の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。