Atur cellpadding dan cellspacing di CSS?

Dalam tabel HTML, cellpaddingdan cellspacingdapat diatur seperti ini:

<table cellspacing="1" cellpadding="1">

Bagaimana hal yang sama dapat dilakukan dengan menggunakan CSS?

Dasar-dasar

Untuk mengendalikan "cellpadding" di CSS, Anda cukup menggunakan paddingsel tabel. Misalnya untuk 10px "cellpadding":

td { 
    padding: 10px;
}

Untuk "ruang seluler", Anda bisa menerapkan border-spacingproperti CSS ke tabel Anda. Misalnya untuk 10px "ruang seluler":

table { 
    border-spacing: 10px;
    border-collapse: separate;
}

Properti ini bahkan akan memungkinkan jarak horizontal dan vertikal yang terpisah, sesuatu yang tidak dapat Anda lakukan dengan "ruang sel" sekolah lama.

Masalah di IE <= 7

Ini akan berfungsi di hampir semua browser populer kecuali Internet Explorer melalui Internet Explorer 7, di mana Anda hampir tidak beruntung. Saya mengatakan "hampir" karena browser ini masih mendukung border-collapseproperti, yang menggabungkan batas sel tabel yang berdampingan. Jika Anda mencoba untuk menghilangkan spasi sel (yaitu, cellspacing="0") maka border-collapse:collapseseharusnya memiliki efek yang sama: tidak ada ruang di antara sel-sel tabel. Dukungan ini buggy, karena tidak mengesampingkan yang sudah adacellspacing atribut HTML yang pada elemen tabel.

Singkatnya: untuk browser non-Internet Explorer 5-7, border-spacingmenangani Anda. Untuk Internet Explorer, jika situasinya tepat (Anda ingin 0 ruang seluler dan tabel Anda belum menentukannya), Anda dapat menggunakannya border-collapse:collapse.

table { 
    border-spacing: 0;
    border-collapse: collapse;
}

Catatan: Untuk ikhtisar besar properti CSS yang dapat diterapkan ke tabel dan untuk browser mana, lihat halaman Quirksmode yang fantastis ini .

Default

Perilaku default browser setara dengan:

table {border-collapse: collapse;}
td    {padding: 0px;}

Cellpadding

Mengatur jumlah ruang antara isi sel dan dinding sel

table {border-collapse: collapse;}
td    {padding: 6px;}

Cellspacing

Mengontrol ruang antar sel tabel

table {border-spacing: 2px;}
td    {padding: 0px;}

Kedua

table {border-spacing: 2px;}
td    {padding: 6px;}

Keduanya (khusus)

table {border-spacing: 8px 2px;}
td    {padding: 6px;}

Catatan: Jika ada yang border-spacingdiset, ini menunjukkan border-collapseproperti dari tabel tersebut separate.

Cobalah sendiri!

Di sini Anda dapat menemukan cara HTML lama untuk mencapai ini.

table
{
    border-collapse: collapse; /* 'cellspacing' equivalent */
}

table td, table th
{
    padding: 0; /* 'cellpadding' equivalent */
}

Mengatur margin pada sel tabel tidak benar-benar memiliki efek sejauh yang saya tahu. Setara CSS sebenarnya cellspacingadalahborder-spacing - tetapi tidak bekerja di Internet Explorer.

Anda bisa menggunakan border-collapse: collapseuntuk mengatur spasi sel dengan andal ke 0 seperti yang disebutkan, tetapi untuk nilai lain saya pikir satu-satunya cara lintas browser adalah tetap menggunakan cellspacingatribut.

Retasan ini berfungsi untuk Internet Explorer 6 dan yang lebih baru, Google Chrome , Firefox, dan Opera :

table {
    border-collapse: separate;
    border-spacing: 10px; /* cellspacing */
    *border-collapse: expression('separate', cellSpacing = '10px');
}

table td, table th {
    padding: 10px; /* cellpadding */
}

The *deklarasi untuk Internet Explorer 6 dan 7, dan browser lainnya benar akan mengabaikannya.

expression('separate', cellSpacing = '10px')kembali 'separate', tetapi kedua pernyataan dijalankan, seperti dalam JavaScript Anda dapat memberikan lebih banyak argumen dari yang diharapkan dan semuanya akan dievaluasi.

Bagi mereka yang menginginkan nilai ruang sel non-nol, CSS berikut ini berfungsi untuk saya, tetapi saya hanya dapat mengujinya di Firefox.

Lihat tautan Quirksmode yang diposting di tempat lain untuk detail kompatibilitas. Tampaknya ini mungkin tidak bekerja dengan versi Internet Explorer yang lebih lama.

table {
    border-collapse: separate;
    border-spacing: 2px;
}

Solusi sederhana untuk masalah ini adalah:

table
{
    border: 1px solid #000000;
    border-collapse: collapse;
    border-spacing: 0px;
}
table td
{
    padding: 8px 8px;
}

Juga, jika Anda ingin cellspacing="0", jangan lupa untuk menambahkan border-collapse: collapsedi Anda table's stylesheet.

Bungkus isi sel dengan div dan Anda dapat melakukan apa pun yang Anda inginkan, tetapi Anda harus membungkus setiap sel dalam kolom untuk mendapatkan efek yang seragam. Misalnya, untuk mendapatkan margin kiri & kanan yang lebih lebar:

Jadi CSS akan menjadi,

div.cellwidener {
  margin: 0px 15px 0px 15px;
}
td.tight {
  padding: 0px;
}

<table border="0">
  <tr>
    <td class="tight">
      <div class="cellwidener">My content</div>
    </td>
  </tr>
</table>

Ya, itu merepotkan. Ya, ia bekerja dengan Internet Explorer. Bahkan, saya hanya mengujinya dengan Internet Explorer, karena hanya itu yang diizinkan untuk digunakan di tempat kerja.

Cukup gunakan border-collapse: collapseuntuk meja Anda, dan paddinguntuk thatau td.

Gaya ini untuk reset penuh untuk tabel - cellpadding , cellspacing , dan border .

Saya memiliki gaya ini di file reset.css saya:

table{
    border:0;          /* Replace border */
    border-spacing: 0px; /* Replace cellspacing */
    border-collapse: collapse; /* Patch for Internet Explorer 6 and Internet Explorer 7 */
}
table td{
    padding: 0px; /* Replace cellpadding */
}

TBH. Untuk semua penggemar dengan CSS Anda mungkin juga hanya menggunakancellpadding="0" cellspacing="0" karena mereka tidak usang ...

Orang lain yang menyarankan margin pada <td>jelas belum mencoba ini.

table th,td {
    padding: 8px 2px;
}
table {
    border-collapse: separate;
    border-spacing: 2px;
}

Cukup gunakan aturan padding CSS dengan data tabel:

td { 
    padding: 20px;
}

Dan untuk spasi perbatasan:

table { 
    border-spacing: 1px;
    border-collapse: collapse;
}

Namun, ini dapat membuat masalah di browser versi lama seperti Internet Explorer karena implementasi model kotak yang berbeda.

Dari apa yang saya pahami dari klasifikasi W3C adalah bahwa <table>s dimaksudkan untuk menampilkan data 'hanya'.

Berdasarkan itu saya merasa jauh lebih mudah untuk membuat <div>dengan latar belakang dan semua itu dan memiliki tabel dengan data melayang menggunakan position: absolute;danbackground: transparent; ...

Ia bekerja di Chrome, Internet Explorer (6 dan yang lebih baru) dan Mozilla Firefox (2 dan yang lebih baru).

Margin yang digunakan (atau dimaksudkan anyways) untuk membuat spacer antara unsur-unsur wadah, seperti <table>, <div>dan <form>, tidak <tr>, <td>, <span>atau <input>. Menggunakannya untuk apa pun selain elemen wadah akan membuat Anda sibuk menyesuaikan situs web Anda untuk pembaruan peramban di masa mendatang.

CSS:

selector{
    padding:0 0 10px 0; // Top left bottom right 
}

Anda dapat dengan mudah mengatur padding di dalam sel tabel menggunakan properti padding CSS. Ini adalah cara yang valid untuk menghasilkan efek yang sama dengan atribut cellpadding tabel.

table,
th,
td {
  border: 1px solid #666;
}

table th,
table td {
  padding: 10px;
  /* Apply cell padding */
}

<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>Set Cellpadding in CSS</title>

</head>

<body>

  <table>
    <thead>
      <tr>
        <th>Row</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Clark</td>
        <td>Kent</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

Demikian pula, Anda bisa menggunakan properti spasi perbatasan CSS untuk menerapkan spasi antara batas sel tabel yang berdekatan seperti atribut cellspacing. Namun, untuk bekerja jarak-perbatasan nilai muse properti border-collapse terpisah, yang merupakan default.

table {
  border-collapse: separate;
  border-spacing: 10px;
  /* Apply cell spacing */
}

table,
th,
td {
  border: 1px solid #666;
}

table th,
table td {
  padding: 5px;
  /* Apply cell padding */
}

<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>Set Cellspacing in CSS</title>

</head>

<body>

  <table>
    <thead>
      <tr>
        <th>Row</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Clark</td>
        <td>Kent</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

Coba ini:

table {
    border-collapse: separate;
    border-spacing: 10px;
}
table td, table th {
    padding: 10px;
}

Atau coba ini:

table {
    border-collapse: collapse;
}
table td, table th {
    padding: 10px;
}

Saya gunakan !importantsetelah perbatasan-runtuh suka

border-collapse: collapse !important;

dan itu bekerja untuk saya di IE7. Tampaknya menimpa atribut cellspacing.

<table>
    <tr>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

cell-paddingdapat diberikan oleh paddingdalam CSS sementara cell-spacingdapat diatur dengan mengatur border-spacinguntuk tabel.

table {
    border-spacing: 10px;
}
td {
    padding: 10px;
}

Biola .

td {
    padding: npx; /* For cellpadding */
    margin: npx; /* For cellspacing */
    border-collapse: collapse; /* For showing borders in a better shape. */
}

Jika margintidak bekerja, coba set displaydari truntuk blockdan kemudian marjin akan bekerja.

Untuk tabel, spasi dan cellpadding sudah usang dalam HTML 5.

Sekarang untuk ruang seluler Anda harus menggunakan spasi-perbatasan. Dan untuk cellpadding Anda harus menggunakan border-collapse.

Dan pastikan Anda tidak menggunakan ini dalam kode HTML5 Anda. Selalu mencoba menggunakan nilai-nilai ini dalam file CSS 3.

table {
    border-spacing: 4px; 
    color: #000; 
    background: #ccc; 
}
td {
    padding-left: 4px;
}

Dalam tabel HTML, cellpaddingdan cellspacingdapat diatur seperti ini:

Untuk sel-padding :

Panggil saja td/thsel sederhana padding.

Contoh:

/******Call-Padding**********/

table {
    border-collapse: collapse;
}

td {
  border: 1px solid red;
  padding: 10px;
}

<table>
        <tr>
            <th>Head1 </th>
            <th>Head2 </th>
            <th>Head3 </th>
            <th>Head4 </th>
        </tr>
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
            <td>34</td>
        </tr>
        <tr>
            <td>41</td>
            <td>42</td>
            <td>43</td>
            <td>44</td>
        </tr>
    </table>

table {
    border-collapse: collapse;
}

td {
  border: 1px solid red;
  padding: 10px;
}

Untuk spasi sel

Sebut saja sederhana table border-spacing

Contoh:

/********* Cell-Spacing   ********/
table {
    border-spacing: 10px;
    border-collapse: separate;
}

td {
  border: 1px solid red;
}

<table>
        <tr>
            <th>Head1</th>
            <th>Head2</th>
            <th>Head3</th>
            <th>Head4</th>
        </tr>
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
            <td>34</td>
        </tr>
        <tr>
            <td>41</td>
            <td>42</td>
            <td>43</td>
            <td>44</td>
        </tr>
    </table>

/********* Cell-Spacing   ********/
table {
    border-spacing: 10px;
    border-collapse: separate;
}

td {
  border: 1px solid red;
}

Lebih banyak gaya tabel dengan tautan sumber CSS di sini Anda mendapatkan lebih banyak gaya tabel dengan CSS .

Anda dapat melakukan hal seperti ini di CSS, menggunakan border-spacingdan padding:

table {
  border-collapse: collapse;
}

td, th {
  padding: 1em;
  border: 1px solid blue;
}

<table>
  <tr>
    <th>head_1</th>
    <th>head_2</th>
    <th>head_3</th>
    <th>head_4</th>
  </tr>
  <tr>
    <td>txt_1</td>
    <td>txt_2</td>
    <td>txt_3</td>
    <td>txt_4</td>
  </tr>
</table>

Bagaimana kalau menambahkan gaya langsung ke tabel itu sendiri? Ini alih-alih digunakan tabledalam CSS Anda, yang merupakan pendekatan BAD jika Anda memiliki beberapa tabel di halaman Anda:

<table style="border-collapse: separate;border-spacing: 2px;">
    <tr>
        <td style="padding: 4px 4px;">Some Text</td>
    </tr>
</table>

Saya menyarankan ini dan semua sel untuk tabel tertentu dipengaruhi.

table.tbl_classname td, th {
    padding: 5px 5px 5px 4px   ;
 }

Anda dapat memeriksa kode di bawah ini hanya dengan membuat index.htmldan menjalankannya.

<!DOCTYPE html>
<html>
   <head>
      <style>
         table{
         border-spacing:10px;
         }
         td{
         padding:10px;
         }
      </style>
   </head>
   <body>
      <table cellspacing="0" cellpadding="0">
         <th>Col 1</th>
         <th>Col 2</th>
         <th>Col 3</th>
         <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
         </tr>
      </table>
   </body>
</html>

OUTPUT: