Jadual Tanpa Sempadan dalam HTML

Jadual tanpa sempadan ialah paparan reka bentuk halaman web menggunakan jadual HTML. Penggunaan jadual memudahkan pembentangan maklumat besar dalam bentuk yang paling mudah.

• Jadual dengan atau tanpa sempadan digunakan untuk perbandingan di antara item.
• Maklumat teks & berangka kedua-duanya boleh hadir dalam format jadual.

Dalam halaman HTML, banyak struktur jadual dibuat tanpa sempadan. Penggunaan sempadan dalam reka bentuk jadual bergantung pada kegunaannya. Reka bentuk jadual pada halaman boleh dibuat menggunakan HTML berikut.

Contoh:

<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>

Struktur jadual yang diberikan di atas akan memaparkan data dalam format jadual seperti yang diberikan dalam tangkapan skrin di bawah.

Dalam tangkapan skrin yang diberikan di atas, sempadan tidak tersedia. Secara lalai, sempadan kekal tidak tersedia dalam reka bentuk jadual. Untuk mendayakan jidar dalam jadual, perlu menambah jidar gaya; sempadan ini mengandungi tiga perkara seperti saiz sempadan (seperti dalam px), jenis sempadan (seperti pepejal, nipis, warisan, dll.) & yang ketiga ialah warna (seperti merah, biru, hitam, hijau, kod warna).

table{
border : 1px solid #000000;
}

Sempadan jadual memudahkan perwakilan jadual, pemisahan baris dan lajur.

Jenis Meja Tanpa Sempadan

Diberikan jenis-jenis jadual tanpa sempadan:

1. Meja Bersarang

Jadual bersarang merujuk kepada jadual di dalam jadual. Bersarang jadual bukanlah amalan yang baik, tetapi dalam beberapa kes, ia menjadi perlu untuk menggunakan jadual di dalam jadual. Mungkin tidak masuk akal untuk menggunakan sarang jadual kerana kebolehaksesannya & penanda yang mengelirukan.

Contoh:

Dalam jadual yang diberikan di bawah, dua jadual bersarang di dalam lajur jadual induk.

Kod:

<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>

Gaya:

Gaya yang diberikan di bawah digunakan untuk mewakili pandangan yang lebih jelas bagi reka bentuk meja bersarang.

Kod:

<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>

Output:

Meja induk tidak mempunyai sempadan. tetapi meja dalam yang mengandungi sempadan di dalamnya. Untuk perwakilan yang jelas, sempadan digunakan dalam jadual bersarang. Kita boleh mengalih keluar jidar daripada jadual bersarang dengan mengalih keluar penggayaan berkaitan jidar.

2. Meja Belang Zebra

Jadual Zebra Striping merujuk kepada jadual yang mempunyai warna yang berbeza dalam baris ganti. Warna yang berbeza dalam baris ganti memudahkan dalam membezakan baris antara satu sama lain. Lebih mudah untuk melihat baris tertentu jadual mengikut warna. Meletakkan penggayaan pada teg jadual juga boleh ditambah menggunakan jQuery.

Contoh:

Contohnya ialah yang asas; di sini jadual teg HTML mencipta reka bentuk jadual & selepas itu, penggayaan ditambah untuk menjadikan jadual ini sebagai jadual Zebra Striping.

Kod:

<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>

Gaya:

Di bawah CSS yang diberikan menjadikan jadual HTML berjalur Zebra.

Kod:

<style type="text/css">
table th, table td{
text-align: center;
}
tbody tr:nth-child(even) {
background: #e8e7e1;
}
</style>

Output:

Dalam output yang diberikan di bawah, kita dapat melihat cara menukar baris jadual yang mempunyai warna yang berbeza.

Kesimpulan

Jadual tanpa Sempadan ialah salah satu cara perwakilan jadual. Format jadual juga boleh dicapai menggunakan teg HTML lain seperti ul > li, div, dsb., tetapi penggunaan jadual untuk struktur jadual mengurangkan kerja penggayaan manakala penggunaan div untuk reka bentuk jadual semakin meningkat disebabkan pendekatan reka bentuk responsif.

Atas ialah kandungan terperinci Jadual Tanpa Sempadan dalam HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!