Beranda>Tutorial Desain Web>tutorial HTML

HTML Tutorial: 10 Tag Terkait Tabel untuk HTML

Penulis：Eve Cole Waktu Pembaruan：2025-05-23 01:00:03

Berdasarkan beberapa praktik terbaru saya dan setelah berkomunikasi dengan beberapa pembaca tentang penggunaan formulir HTML, saya memutuskan untuk menulis artikel ini. Secara keseluruhan, saya perhatikan bahwa mereka memiliki rasa jijik yang terbentuk sebelumnya dengan penggunaan tabel karena informasi yang menyesatkan. Bahkan, banyak orang akan mengatakan bahwa saya melihat pernyataan bahwa saya tidak boleh menggunakan formulir, tetapi ini benar -benar salah! Saran ini hanya untuk menggunakan tabel HTML untuk menentukan tata letak halaman web, tetapi tabelnya sempurna untuk pengaturan baris dan kolom informasi data yang nyaman, dan jika Anda harus menampilkan data kolom tabel pada halaman, Anda harus menggunakannya! mengapa tidak? Namun, dalam hal ini beberapa orang mengabaikan keberadaan tag HTML tertentu yang digunakan untuk tabel dan tidak tahu bagaimana menggunakannya dengan benar.

HTML memiliki 10 tag terkait tabel. Berikut adalah daftar dengan pengantar, tetapi pertama -tama, dokumen harus didefinisikan dengan benar di bawah ini HTML 4.01/XHTML 1 atau HTML 5:

  • <Caption> Tentukan judul tabel (4, 5)
  • <col> Tentukan atribut untuk kolom tabel (4, 5)
  • <colgroup> mendefinisikan pengelompokan kolom tabel (4, 5)
  • <able> Tentukan tabel (4, 5)
  • <tbody> Tentukan tubuh meja (4, 5)
  • <td> Tentukan sel (4, 5)
  • <tfoot> Tentukan catatan tabel (bawah) (4, 5)
  • <t th> Tentukan tajuk meja (4, 5)
  • <head> Menentukan tajuk meja (4, 5)
  • <tr> mendefinisikan baris tabel (4, 5)

Struktur tabel dasar adalah sebagai berikut:

Ini berisi judul, kepala, tubuh, dan bawah. Urutan elemen HTML yang benar adalah:

  1. <able>
  2. <laption>
  3. <head>
  4. <tfoot>
  5. <tbody>

Anda juga dapat menggunakan <col> dan <colgroup> untuk mendefinisikan kolom tabel atau kolom grup:

  1. <able>
  2. <laption>
  3. <colgroup>
  4. <col>
  5. <head>
  6. <tfoot>
  7. <tbody>

Berikut adalah contoh yang benar dari struktur tabel:

 <table border=1><caption>table caption here</caption><colgroup span=1 style=background:#dedede;/><colgroup span=2 style=background:#efefef;/><!-- table header--><thead><tr><th>head 1</th><th>head 2</th><th>head 3</th></tr></thead><!-- table footer-> <tfoot> <tr> <td> kaki 1 </td> <td> kaki 2 </td> <td> kaki 3 </td> </tfoot> <!-Table Body-> <tbody> <tr> <td> a </td> <td> b </td> <td> c </td> </tr> <tr> <td> d </td> <td> E </td> <td> f </td> </tr> </tbody> </lech>

Hasil di browser ditunjukkan pada gambar di bawah ini:

Beberapa tips pada formulir

  • Menurut penjelasan dan penggunaan W3Schools, dalam definisi tabel, elemen <tfoot> harus muncul sebelum <tBody> , sehingga browser dapat membuat catatan tabel sebelum menerima semua data. Juga, jika bukan pesanan ini, itu tidak akan divalidasi oleh HTML4 dan XHTML W3C, tidak peduli apa pun DTD yang Anda nyatakan.
  • Dalam HTML 4.01, sifat Align dan Bgcolor dari tabel tidak disukai, sehingga tidak ada atribut tabel yang didukung dalam HTML 5 (pada kenyataannya, sifat Align dan Bgcolor tidak lagi didukung dalam XHTML 1.0 ketat DTD);
  • Semua browser arus utama mendukung tag <colgroup>, tetapi firefox, chrome, dan safari hanya mendukung atribut rentang dan lebar elemen colgroup;
  • Sel kosong: Tampilkan | Sembunyikan di CSS dapat mengatur apakah sel kosong menampilkan perbatasan. Perhatikan bahwa ini perlu diatur dalam tabel alih -alih TD/TH . Masalah ini lebih mungkin ditemui di IE6;
  • Border-Collapse: Runtuhnya | terpisah dalam CSS dapat mengatur apakah perbatasan meja digabung menjadi perbatasan;
  • Properti spasi perbatasan di CSS setara dengan properti sel-sel tabel.

Untuk mewujudkan model pengembangan kinerja dan pemisahan struktur yang dianjurkan sekarang, pengamatan front-end merekomendasikan bahwa semua hal yang terkait dengan lapisan presentasi di halaman dikendalikan oleh CSS, dan tidak menggunakan atribut yang disediakan oleh HTML untuk mengontrol kinerja halaman, dan tabel adalah yang paling mudah diabaikan.

Untuk detail lebih lanjut tentang tabel, silakan periksa dokumentasi W3C: W3 Pengantar Tabel

Akhirnya, saya akan meninggalkan pertanyaan yang sangat sederhana untuk Anda. Atribut CSS mana yang setara dengan atribut tabel selpadding?

Artikel Terkait