HTML の枠線のない表

枠線のない表は、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;
}

表の境界線を使用すると、表の表現、行と列の分離が簡単になります。

枠線のないテーブルの種類

境界線のないテーブルのタイプは次のとおりです。

1.ネストテーブル

ネストテーブルとは、テーブル内のテーブルを指します。テーブルのネストは良い習慣ではありませんが、場合によっては、テーブルの内部にテーブルを使用することが必要になります。アクセシビリティと紛らわしいマークアップのため、テーブルのネストを使用するのはばかげているかもしれません。

例:

以下のテーブルでは、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>

出力:

親テーブルには境界線がありません。ただし、内部テーブルには境界線が含まれています。明確に表現するために、ネストされたテーブルでは境界線が使用されます。枠線関連のスタイルを削除することで、ネストされたテーブルから枠線を削除できます。

2.ゼブラ ストライピング テーブル

ゼブラ ストライピング テーブルとは、交互の行に異なる色を持つテーブルを指します。交互の列で異なる色を使用すると、列を互いに区別しやすくなります。色によってテーブルの特定の行が見やすくなります。 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 サイトの他の関連記事を参照してください。