Apa itu meja? Ini terdiri dari sel sel. Dalam tabel, jumlah <td> tergantung pada jumlah sel sel yang dibungkus di setiap baris <tr>! Selain itu, tabel tabel default tidak memiliki baris tabel yang ditampilkan di browser sebelum gaya CSS ditambahkan;
Metode Penulisan Meja Umum di HTML: A. <tr> ... </tr>: satu deretan meja, ada beberapa pasang TR, dan ada beberapa baris; B. <td> ... </td>: sel tabel, yang berisi beberapa pasang <td> ... </td>, yang berarti ada beberapa kolom dalam satu baris; C. <t th> ... </t>: sel di kepala tabel, tajuk tabel, dan teksnya tebal dan ditampilkan di tengah; D. <Table Ringkasan = Tabel Pendahuluan Teks>/*Konten ringkasan tidak akan ditampilkan di browser. Fungsinya adalah untuk meningkatkan keterbacaan (semantik) dari tabel, memungkinkan mesin pencari untuk lebih memahami konten tabel, dan juga memungkinkan pembaca layar untuk lebih membantu pengguna khusus membaca konten tabel. */ E.Caption Tag, tambahkan judul dan ringkasan ke tabel, judul digunakan untuk menggambarkan konten tabel, lokasi tampilan judul: di atas tabel
<Table Border = CellPacing = CellPadding => <tr> <t th> header </t th> </tr> <tr> <td> data </td> </tr> </able>
<tabel border = cellPacing = cellPadding = ringkasan => <caption> </comption> <tr> <t th> hari ini adalah hari Jumat </td> </tr> </able>
Kembali ke topik, mari kita kembali ke titik di mana perbedaan antara cellpadding dan cellpacing adalah perbandingan antara set gambar tabel berikut dan kode cellpacing:
<! Doctype html> <html> <head> <meta charset = utf-8> <itement> Perbedaan dalam cellpacing di tabel </iteme> <style type = text/css> Tabel {margin-bottom: 50px; } .ceshi {spasi batas: 20px; /*Menentukan jarak antara perbatasan sel yang berdampingan dalam sebuah tabel. */} </tyle> </head> <width table = 600 sel kopor = 0 bordercolor =#333 border = 1> <laption> sel pertama </clastion> <Tr> <td> uji 1 </td> <td> </tdaber = 600 cell = 20 sel = 600 sel = 20 sel = 20 sel = 20 Cell = 20 Cell = 20 CELP = TABLOP = 20 CELP = TABLEP = TABLEP = TABLEP = TABLEP = TABLOC/TABLOC/TERDOC/TERDOC/TABLOC/TABLOC = border=1> <caption>Second cell</caption> <tr> <td>Test 1</td> <td>Test 2</td> <td>Test 3</td> </tr> </table> <table width=600 bordercolor=#333 border=1 class=ceshi> <caption>Third cell</caption> <tr> <td>Test 1</td> <td>Test 2 </td> <td> tes 3 </td> </tr> </able> </html>Membandingkan kode, dua tabel atas memiliki pengaturan yang berbeda, satu adalah 0 dan yang lainnya adalah 20. Hasil yang ditampilkan adalah bahwa jarak antara setiap sel di tabel pertama adalah 0, dan jarak antara setiap sel dalam tabel kedua adalah 20. Diperpanjang: Tabel kedua konsisten dengan tabel ketiga, tetapi tabel ketiga tidak memiliki spacing sel. Kami menemukan bahwa jarak perbatasan ini: 20px; sama dengan hasil jarak sel = 20. EG Ringkasan: Atribut jarak sel digunakan untuk menentukan celah antara sel -sel tabel. Nilai parameter properti ini adalah angka, yang menunjukkan jumlah titik piksel yang ditempati oleh celah sel.
<! Doctype html> <html> <head> <meta charset = utf-8> <itement> Perbedaan dalam cellpadding dalam tabel </ title> <style type = text/css> tabel {margin-bottom: 50px; } </style> </head> <body> <table width=600px border=1 bordercolor=#ccc cellpadding=0> <tr> <th>I am a happy cell table</th> <th>I am a happy cell table</th> <th>I am a happy cell table</th> </tr> </table> <table width=600px border=1 bordercolor=#cc cellpadding=20> <tr> <t th> Saya adalah bentuk sel yang bahagia </th> <t th> Saya adalah bentuk sel yang bahagia </th> <th> Saya adalah bentuk sel yang bahagia </t th> <t th> Saya adalah bentuk sel yang bahagia </th> </tr> </able> </body> </html>Dilihat dari kode yang berjalan di atas Hasil: Dua tabel memiliki nilai yang berbeda dari kode cellpadding. Di tabel pertama, kata -kata "I Am Happy Cell" adalah 0 dari sel tempat ia berada, itu karena cellpadding = 0 diatur; Di tabel kedua, kata -kata "I Am Happy Cell" jauh dari sel tempat ia berada, yaitu jarak antara sel tempat saya sel bahagia adalah 20 piksel. Sederhananya, berapa nilai cellpadding yang sama dengan, berapa banyak kosong yang dibiarkan ke dalam dari batas sel dalam tabel, dan elemen -elemen dalam sel tidak akan pernah memasuki kosong itu. || Perhatikan bahwa properti cellpadding digunakan untuk menentukan ukuran jarak kosong antara konten sel dan batas sel. Nilai parameter properti ini juga merupakan angka, yang menunjukkan jumlah piksel yang ditempati oleh ketinggian jarak kosong antara kandungan sel dan batas atas dan bawah dan jumlah piksel yang ditempati oleh lebar jarak kosong antara kandungan sel dan batas kiri dan kanan.
EG Ringkasan: Cellpacing mewakili jarak antara sel, sel -sel mewakili jarak antara kandungan sel dan perbatasan; Yang pertama seperti margin, yang terakhir seperti padding; sarang (sel)-konten tabel; Pengisian sarang (pengisian meja) (cellpadding)-mewakili jarak di luar sarang, yang digunakan untuk memisahkan ruang sarang dan sarang; Ruang sarang (jarak meja)-mewakili jarak antara batas tabel dan pengisian sarang, dan juga jarak antara pengisian sarang
Ekspansi 1: Bagaimana cara menggabungkan baris dan kolom tabel? Colspan Cross-Column Merge, Gabungan Baris-Baris Rowspan
Tampilan Kode:
<! Doctype html> <html> <head> <meta charset = utf-8> <itement> Perbedaan antara colspan dan rowspan </title> <style type = text/css> tabel {margin: 0 auto; margin-bottom: 50px; Teks-Align: tengah; } </style> </head> <body> <table width=600 cellpadding=10 cellpacing=2 border=1 bordercolor=#ccc> <caption>Normal display: one row and three columns</caption> <tr> <td>Say something, don't know</td> <td>Say something, don't know</td> <td>Say something, I don't know</td> </tr> </table> <table width = 600 cellpadding = 10 sel cellpacing = 2 border = 1 bordercolor =#cc> <caption> Apa yang harus saya lakukan sekarang untuk menampilkan satu baris dan dua kolom? Colspan Cross-Column Merge </caption> <tr> <td> Katakan sesuatu, tidak tahu </td> <td colspan = 2> mengatakan sesuatu, tidak tahu </td> <!-<td> Katakan sesuatu, tidak tahu </td>-> </tr> </able> <!- ======================================================================================================================================================= ======================================================================================================================================================= ======================================================================================================================================================= ====================================================================================================================================================================== <td>Say something, don't know</td> </tr> <tr> <td>Say something, don't know</td> <td>Say something, don't know</td> <td>Say something, don't know</td> </tr> </table> <table width=600 cellpadding=10 cellpacing=2 border=1 bordercolor=#ccc> <caption>What to do now is to display one row and two kolom? Rowspan Cross-Row Merge </clastion> <tr> <td rowspan = 2> mengatakan sesuatu, tidak tahu </td> <td> Katakan sesuatu, tidak tahu </td> </tr> <tr> <!-<td> tidak tahu </t/TD </TD> </TD </TD>Ekspansi 2: Bagaimana cara menggabungkan perbatasan meja? Border-Collapse: runtuh;
<!-Gabungan sel meja-> <style type = text/css> tabel {border-collapse: collapse; /* Border-Collapse: terpisah; * / /*Menunjukkan apakah baris dan batas sel tabel bergabung dalam satu perbatasan atau terpisah seperti pada html standar. */} </style> <width table = 600 cellpadding = 10 selpacing = 2 border = 1 bordercolor =#ccc> <tbody> <tr> <td> sel 1 </td> <td> sel 2 </td> <td> sel 3 </td> </tbody> </table> </td> <td>Akhirnya, di browser chrome, sistem default tabel warna abu -abu, jarak perbatasan adalah 2, dll.
/* stylesheet agen pengguna* / /* table {display: table; Border-Collapse: terpisah; spasi perbatasan: 2px; Color perbatasan: abu-abu; } * / / * border = 1 default sama dengan batas = 1px-top-top-lebar: 1px; Batas-lebar-lebar: 1px; Border-Bottom-Width: 1px; perbatasan-kiri-lebar: 1px; * / /* BorderColor Mengembalikan atau mengatur warna perbatasan dari objek BorderColor: W3C - String menentukan warna perbatasan elemen. Tentukan nama warna atau kode warna RGB. */Ini adalah artikel tentang detail perbedaan antara cesllpacing dan cellpadding di tabel. Untuk konten cesllpacing dan cellpadding yang lebih terkait dalam tabel, silakan cari artikel sebelumnya dari wulin.com atau terus menelusuri artikel terkait di bawah ini. Saya harap semua orang akan mendukung wulin.com di masa depan!