Cara Mengatur Cellpadding dan Cellspacing pada HTML

Perhatikan tabel yang telah dibuat pada latihan 32, jika diperhatikan lebih seksama, terlihat bahwa jarak antar tabel sangat dekat antara satu data dengan data lainnya. Begitu pula dengan jarak antar teks terhadap bingkai masing-masing sel pada tabel. Karena jarak yang terlalu berdekatan tersebut, maka bentuk tabel jadi terlihat sangat rapat dan tekesan kurang rapi. Oleh karena itu, untuk membuat tampilan jarak atau lebar antara sel tabel dan garis tabel menjadi lebih renggang, maka pada tag table dapat digunakan atribut cellpadding dan cellspacing untuk mengatur ukuran renggangan antara sel tabel terhadap garis tabel yang terdapat pada halaman website. Dari penjelasan tersebut, maka pada materi ini peserta didik akan belajar bagaimana cara menggunakan atribut cellpadding dan cellspacing pada tag table untuk mengatur jarak renggang antara tabel dan sel tabel. Sebelum memulai kegiatan, peserta didik mempersiapkan alat-alat praktiknya terlebih dahulu mulai dari PC atau perangkat mobile yang didalamnya terdapat aplikasi Notepad atau teks editor yang dapat digunakan untuk membuat file html. Setelah proses persiapan selesai, peserta didik dapat memulai praktik dengan mengikuti instruksi berikut ini:
Cara Mengatur Cellpadding dan Cellspacing pada HTML - elfanmauludi
Ilustrasi Cellspacing dan Cellpadding HTML

satu, Jalankan Notepad.
dua, Ketik baris kode program berikut ini.

<html>

 

<head>

<title>

Mengatur cellpadding dan cellspacing

</title>

</head>

 

<body>

<table border="1" align="center" cellspacing=3 cellpadding=5>

 

<!-- bagian heading -->

<tr>

<th bgcolor="gray"> No </th>

<th bgcolor="gray"> Nama </th>

<th bgcolor="gray"> Nilai </th>

</tr>

 

<!-- tabel baris ke-1 -->

<tr>

<td align="right"> 1 </td>

<td> Monkey D. Luffy </td>

<td align="center"> 80 </td>

</tr>

 

<!-- tabel baris ke-2 -->

<tr>

<td align="right"> 2 </td>

<td> Via Vallen </td>

<td align="center"> 85 </td>

</tr>

 

<!-- tabel baris ke-3 -->

<tr>

<td align="right"> 3 </td>

<td> Joko widodo </td>

<td align="center"> 25 </td>

</tr>

 

</table>

</body>

 

</html>


tiga, Simpan dengan nama "latihan33.html".
empat, Jalankan file latihan33.html pada browser.

Komentar

  1. Balasan
    1. Modul HTML Bimbingan Teknologi Informasi dan Komunikasi Kelas X SMAN 8 Semarang Edisi 1. 2020. Jawa Tengah.

      Hapus
  2. Ada dua atribut yang disebut cellpadding dan cellspacing yang dapat digunakan oleh perancang web untuk mengatur white space pada sel tabel. Atribut cellspacing mendefinisikan spasi antara sel tabel, sedangkan cellpadding mewakili jarak antara batas sel dan konten yang ada dalam sel.

    BalasHapus
  3. Atribut cellspacing menentukan ukuran ruang antar sel dalam satuan pixel. Cellspacing berbeda dengan cellpadding yang digunakan untuk menentukan ruang antara border sell dan konten sel.

    BalasHapus
  4. Bagaimana cara menambahkan cellpadding pada laman html, menggunakan atribut STYLE?

    BalasHapus
    Balasan
    1. Untuk dapat mengisi cell pada html, maka dapat digunakan atribut style. Atribut style menentukan gaya sebaris dari sebuah elemen. Atribut digunakan dengan tag HTML TABLE yang didalamnya terdapat properti padding.

      Hapus
  5. Apa perbedaan mendasar antara cellspacing dan cellpadding pada html?

    BalasHapus
    Balasan
    1. Cellspacing juga digunakan untuk pemformatan tabel tetapi ada beberapa perbedaan besar antara cellspacing dan cellpadding. Cellpadding digunakan untuk mengatur ruang ekstra yang berguna untuk memisahkan dinding sel dari isinya. Sedangkan untuk cell spacing, digunakan untuk mengatur jarak antar cell.

      Hapus

Posting Komentar

*Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung. :D

*Jika terdapat typo, link bermasalah, dan lain sebagainya, pengunjung dapat melaporkan permasalahan tersebut melalui WA: +62-896-2514-6106




~ Ikatlah Ilmu dengan Memostingkannya ~

Referensi Tambahan:

Enkapsulasi pada Java

2 Jenis Utama Kegiatan Penelitian Berdasarkan Waktunya, Crosssectional Salah Satunya

6 Contoh Program Method Overloading pada Java

3 Jenis Utama Looping pada Java

Perbedaan stdio.h dan stdlib.h pada Bahasa C