Rumah >hujung hadapan web >html tutorial >Perbandingan susun atur Div dan susun atur jadual dalam HTML
Perbandingan susun atur Div dan susun atur jadual dalam HTML
- WBOYke hadapan
- 2023-09-08 14:13:021584semak imbas
Dalam HTML, reka letak mentakrifkan struktur asas dan penampilan tapak web. Reka letak HTML ialah pelan tindakan yang menunjukkan kepada kita bagaimana elemen HTML disusun dalam halaman web. Ia memberi anda keupayaan untuk membuat halaman web menggunakan tag HTML mudah.
susun atur DIV
Susun atur div ialah reka letak yang paling biasa dalam HTML, berdasarkan elemen. Elemen dalam HTML digunakan untuk menentukan bahagian dokumen. Teg ialah teg bekas, iaitu teg permulaan dan teg akhir.
Kami boleh mentakrifkan berbilang elemen dalam dokumen HTML, dan setiap elemen boleh digunakan untuk memaparkan set maklumat yang berbeza. Di dalam elemen, kita boleh menggunakan berbilang elemen HTML seperti paragpraph(
), heading(
), span(), dsb. Kami boleh mengumpulkan semua elemen HTML teg dan boleh menggunakan CSS padanya untuk menjadikannya lebih mudah untuk difahami dan dipaparkan.
Contoh
Berikut ialah contoh susun atur div
<html>
<head>
<style>
h2,p {
border: 2px;
background-color: lightblue;
text-align: center;
}
</style>
</head>
<body>
<div>
<h2>Introduction to Div tag</h2>
<p>Div tag is the most commonly used tag for creating layout in HTML.</p>
</div>
</body>
</html>
Susun atur meja
Susun atur jadual ialah salah satu reka letak yang paling kurang disyorkan dalam HTML kerana kerumitannya. Seperti namanya, ia berdasarkan elemen
. Elemen menyediakan fungsi untuk menyusun data dalam bentuk baris dan lajur.
Tag
juga merupakan tag bekas, iaitu, ia mempunyai tag permulaan dan tag akhir. Dalam elemen , kita boleh menggunakan berbilang elemen HTML, tetapi tiga teg meta diperlukan untuk menyusun data ke dalam jadual. Yang pertama ialah teg yang mewakili baris jadual dan ia menambah baris baharu dalam jadual.
Yang kedua ialah teg
, yang mewakili tajuk jadual, yang menyimpan tajuk jadual jadual. Yang terakhir ialah
, iaitu data jadual, yang menyimpan maklumat atau data jadual.
Contoh
<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
}
</style>
<body>
<table>
<tr>
<th>This contains heading of the Table</th>
</tr>
<tr>
<td>This tag contains the data to be shown by the table.</td>
</tr>
<tr>
<p> we can use html elements inside table tag and we can also have multiple table row and table data in a table.</p>
</tr>
</table>
</body>
</html>
susun atur meja DIV VS
Berikut ialah perbezaan antara DIV dan susun atur jadual –
-
Saiz Halaman - Dalam kes susun atur Div kami mempunyai
tag yang mengandungi hanya elemen HTML dan kami boleh menentukan gaya mereka dalam satu fail CSS manakala dalam kes susun atur jadual kami mempunyai elemen ke, td, tr dan Berbilang, setiap satu dengan gaya individunya sendiri, akan meningkatkan saiz keseluruhan halaman.
Penyampaian Halaman - Penyampaian halaman ialah masa yang diambil oleh penyemak imbas untuk memaparkan kandungan halaman web. Dalam kes susun atur div, penyemak imbas tidak mencari teg penutup, manakala dalam kes susun atur jadual, penyemak imbas tidak memaparkan kandungan halaman sehingga penghujung dicapai. Oleh itu, kelajuan pemaparan halaman susun atur jadual adalah lebih perlahan berbanding dengan susun atur div.
Penyelenggaraan - Susun atur Div memberikan kami keupayaan untuk mengubah suai reka bentuk web semasa dengan mudah dengan hanya menukar CSS, manakala mengubah suai reka bentuk semasa dalam susun atur jadual adalah sukar kerana kami perlu menukar kod.
Ketekalan - Dalam susun atur div kita tidak perlu mengikuti mana-mana corak elemen HTML untuk mendapatkan konsistensi dalam halaman web tetapi jika kita terlepas mana-mana elemen seperti baris jadual maka dalam susun atur jadual, pengepala jadual, data jadual, maka struktur keseluruhan kandungan akan berubah dan kehilangan konsistensi.
Cadangan - Sangat disyorkan untuk menggunakan reka letak div untuk membina halaman web kerana data di dalam teg div diasingkan dengan cara yang betul, yang membolehkan labah-labah halaman web bertindak dengan cepat, manakala elemen HTML tambahan dalam jadual reka letak akan meningkatkan masa pemaparan halaman.
-
Fleksibiliti - Fleksibiliti adalah salah satu faktor penting yang kami gunakan untuk mengukur prestasi laman web. Ia memberitahu kami sama ada tapak web kami dapat memaparkan kandungan yang sama dengan cara yang sama pada peranti yang berbeza.
Dalam kes susun atur jadual, kami perlu menyediakan lebar tertentu pada jadual, yang menyebabkan jadual tidak fleksibel dan anda hanya boleh melihat kandungan di mana saiz skrin sepadan dengan lebar jadual. Tetapi untuk susun atur div, fleksibiliti bukanlah satu isu kerana ia boleh diselesaikan menggunakan sifat CSS yang akan membolehkannya menyesuaikan diri dengan saiz skrin yang berbeza.
Kesimpulan
Ringkasnya, susun atur div dan susun atur meja masing-masing mempunyai kelebihan dan kekurangan tersendiri. Reka letak berasaskan div lebih fleksibel daripada reka letak berasaskan jadual, tetapi memerlukan lebih banyak kemahiran pengekodan untuk mencipta dan menyelenggara. Jadual, sebaliknya, lebih mudah dipelajari untuk pemula dan boleh digunakan untuk susun atur kompleks yang sebaliknya memerlukan banyak kod tambahan dengan div. Akhirnya, pendekatan mana yang lebih baik untuk keperluan anda bergantung pada perkara yang ingin anda capai dengan reka bentuk tapak web anda.
| , yang mewakili tajuk jadual, yang menyimpan tajuk jadual jadual. Yang terakhir ialah | , iaitu data jadual, yang menyimpan maklumat atau data jadual.
Contoh<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
}
</style>
<body>
<table>
<tr>
<th>This contains heading of the Table</th>
</tr>
<tr>
<td>This tag contains the data to be shown by the table.</td>
</tr>
<tr>
<p> we can use html elements inside table tag and we can also have multiple table row and table data in a table.</p>
</tr>
</table>
</body>
</html>
susun atur meja DIV VSBerikut ialah perbezaan antara DIV dan susun atur jadual –
KesimpulanRingkasnya, susun atur div dan susun atur meja masing-masing mempunyai kelebihan dan kekurangan tersendiri. Reka letak berasaskan div lebih fleksibel daripada reka letak berasaskan jadual, tetapi memerlukan lebih banyak kemahiran pengekodan untuk mencipta dan menyelenggara. Jadual, sebaliknya, lebih mudah dipelajari untuk pemula dan boleh digunakan untuk susun atur kompleks yang sebaliknya memerlukan banyak kod tambahan dengan div. Akhirnya, pendekatan mana yang lebih baik untuk keperluan anda bergantung pada perkara yang ingin anda capai dengan reka bentuk tapak web anda. |
|---|
Atas ialah kandungan terperinci Perbandingan susun atur Div dan susun atur jadual dalam HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!