Menyingkirkan Spasi di Tabel HTML

click fraud protection

Jika Anda menggunakan tabel untuk tata letak halaman (tidak-tidak dalam XHTML), kemungkinan Anda akan mengalami penambahan ruang ekstra yang tidak sedap dipandang dalam tata letak Anda. Untuk memperbaiki masalah ini, Anda perlu memeriksa definisi tabel HTML Anda dan spesifikasi dari setiap lembar gaya yang mengatur.

Definisi Tabel HTML

HTML menandai untuk tabel secara default tidak mengontrol beberapa persyaratan spasi. Verifikasi tiga hal tentang about meja tag dalam dokumen HTML Anda:

  1. Apakah tabel Anda memiliki atribut cellpadding yang disetel ke 0?
    1. cellpad="0"
  2. Apakah tabel Anda memiliki atribut cellspacing yang disetel ke 0?
    1. spasi sel = "0"
  3. Apakah ada spasi sebelum atau sesudah konten Anda dan tag tabel?

Nomor 3 adalah penendang. Banyak editor HTML ingin kode semua diberi spasi, agar mudah dibaca. Tetapi banyak browser menginterpretasikan tab, spasi, dan carriage return tersebut sebagai ruang ekstra yang diinginkan di dalam tabel Anda. Singkirkan spasi putih di sekitar tag Anda dan Anda akan memiliki tabel yang lebih tajam.

instagram viewer

Lembar Gaya

Namun, mungkin bukan HTML yang mati. Lembar gaya berjenjang lakukan kontrol beberapa atribut tampilan tabel dan tergantung pada halaman, Anda mungkin atau mungkin tidak sengaja menambahkan CSS khusus tabel di tempat pertama.

Pindai file CSS yang mengatur untuk salah satu dari nilai berikut di dalam inside meja, ini, atau tdproperti dan sesuaikan sesuai kebutuhan:

  • berbatasan: Menentukan atribut tabel atau batas sel
  • perbatasan-runtuh: Memperlakukan perbatasan yang berdekatan sebagai satu, untuk menghindari duplikasi lebar perbatasan
  • lapisan: Menawarkan ruang kosong, dalam piksel, di sekitar setiap sel
  • perataan teks: Menentukan perataan teks di dalam sel
  • spasi-batas: Mengatur jarak antar sel, dalam piksel

Alternatif

Meskipun Anda masih dapat menggunakan tabel HTML (standarnya sudah mapan dan didukung secara universal saat ini browser), sebagian besar desain web responsif modern menggunakan lembar gaya berjenjang untuk menempatkan elemen pada halaman. Tabel masih masuk akal untuk tujuan aslinya menampilkan data tabular, tetapi untuk mengatur tata letak dan konten halaman, Anda lebih baik menggunakan tata letak CSS saja.

instagram story viewer