CSS'de h├╝cre pedini ve h├╝cre aral─▒klar─▒n─▒ ayarlama


Al─▒nan cevaba git


Bir HTML tablosunda, cellpadding ve cellspacing ┼č├Âyle ayarlanabilir:

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

Ayn─▒s─▒ CSS kullan─▒larak nas─▒l ba┼čar─▒labilir?


3187









Cevap say─▒s─▒n─▒ say: 26






temeller

CSS'de "cellpadding" i kontrol etmek i├žin, basit├že padding tablo h├╝crelerinde kullanabilirsiniz . ├ľrne─čin "cellpadding" nin 10 pikseli i├žin:

 td { 
    padding: 10px;
}
 

"H├╝cre aral─▒─č─▒" i├žin, border-spacing CSS ├Âzelli─čini tablonuza uygulayabilirsiniz . ├ľrne─čin, "h├╝cre bo┼čluklar─▒" n─▒n 10 pikselinde:

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

Bu ├Âzellik, eski okul "h├╝cre alan─▒" ile yapamayaca─č─▒n─▒z, ayr─▒ yatay ve dikey bo┼čluklara bile izin verecektir.

IEÔÇÖdeki sorunlar <= 7

Bu, neredeyse ┼čans─▒n t├╝kendi─či Internet Explorer 7 ile Internet Explorer d─▒┼č─▒ndaki hemen hemen t├╝m pop├╝ler taray─▒c─▒larda ├žal─▒┼čacakt─▒r. "Neredeyse" diyorum ├ž├╝nk├╝ bu taray─▒c─▒lar border-collapse , biti┼čik tablo h├╝crelerinin s─▒n─▒rlar─▒n─▒ birle┼čtiren ├Âzelli─či hala destekliyor . H├╝cre bo┼čluklar─▒n─▒ (yani cellspacing="0" ) ortadan kald─▒rmaya ├žal─▒┼č─▒yorsan─▒z border-collapse:collapse , ayn─▒ etkiye sahip olmal─▒d─▒r: Tablo h├╝creleri aras─▒nda bo┼čluk kalmaz . Bu destek, cellspacing tablo ├Â─česinde varolan bir HTML niteli─čini ge├žersiz k─▒lmad─▒─č─▒ndan buggy i├žindir .

K─▒sacas─▒: Internet Explorer d─▒┼č─▒ndaki 5-7 taray─▒c─▒lar i├žin border-spacing sizi idare eder. Internet Explorer i├žin durumunuz do─čru ise (0 h├╝cre aral─▒─č─▒ istiyorsan─▒z ve tablonuzda zaten tan─▒mlanmam─▒┼čsa) kullanabilirsiniz border-collapse:collapse .

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

Not: Biri tablolara uygulayabilece─činiz ve hangi taray─▒c─▒lar i├žin uygulanabilecek CSS ├Âzelliklerine genel bir bak─▒┼č i├žin bu harika Quirksmode sayfas─▒na bak─▒n .


3463







Varsay─▒lan

Taray─▒c─▒n─▒n varsay─▒lan davran─▒┼č─▒ ┼čuna e┼čittir:

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

         
Resim tan─▒m─▒n─▒ buraya girin

cellpadding

H├╝cre i├žeri─či ve h├╝cre duvar─▒ aras─▒ndaki bo┼čluk miktar─▒n─▒ ayarlar

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

        
Resim tan─▒m─▒n─▒ buraya girin

cellspacing

Tablo h├╝creleri aras─▒ndaki bo┼člu─ču kontrol eder

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

        
Resim tan─▒m─▒n─▒ buraya girin

Her ikisi de

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

        
Resim tan─▒m─▒n─▒ buraya girin

Her ikisi (├Âzel)

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

        
Resim tan─▒m─▒n─▒ buraya girin

Not: varsa border-spacing seti, bu i┼čaret border-collapse tablonun ├Âzelliktir separate .

Kendin dene!

Burada buna ula┼čman─▒n eski HTML yolunu bulabilirsiniz.


919


2012-06-12





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

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

334


2009-08-24





Tablo h├╝crelerinde marjlar─▒ ayarlamak bildi─čim kadar─▒yla ger├žekten bir etkisi olmaz. ─░├žin de ge├žerlidir CSS e┼čde─čer cellspacing oldu─čunu border-spacing - ancak Internet Explorer ├žal─▒┼čmaz.

border-collapse: collapse H├╝cre bo┼člu─čunu belirtildi─či gibi 0'a g├╝venli bir ┼čekilde ayarlamak i├žin kullanabilirsiniz , ancak di─čer herhangi bir de─čer i├žin taray─▒c─▒lar─▒n tek yolunun bu cellspacing ├Âzelli─či kullanmaya devam etmektir .


113







Bu sald─▒r─▒ Internet Explorer 6 ve sonras─▒, Google Chrome , Firefox ve Opera i├žin ├žal─▒┼č─▒yor :

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

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

* Deklarasyon Internet Explorer 6 ve 7 i├žin, ve di─čer taray─▒c─▒lar d├╝zg├╝n g├Âz ard─▒ eder.

expression('separate', cellSpacing = '10px') d├Âner 'separate' , ancak her iki ifade de ├žal─▒┼čt─▒r─▒l─▒r, ├ž├╝nk├╝ JavaScript'te beklenenden daha fazla arg├╝man iletebilirsiniz ve hepsi de─čerlendirilecektir.


97







S─▒f─▒r olmayan bir h├╝cre bo┼čluk de─čeri isteyenler i├žin, a┼ča─č─▒daki CSS benim i├žin ├žal─▒┼čt─▒, ancak bunu yaln─▒zca Firefox'ta test edebiliyorum.

Bkz Quirksmode ba─člant─▒s─▒n─▒ ba┼čka yerde yay─▒nlanan uyumluluk detaylar─▒ i├žin. Eski Internet Explorer s├╝r├╝mleriyle ├žal─▒┼čmayabilir gibi g├Âr├╝n├╝yor.

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

69







Bu sorunun basit ├ž├Âz├╝m├╝ ┼čudur:

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

53







Ayr─▒ca, isterseniz stil sayfan─▒za cellspacing="0" eklemeyi unutmay─▒n . border-collapse: collapse table


46


2008-12-04





H├╝crenin i├žeri─čini bir div ile sar─▒n ve istedi─činiz her ┼čeyi yapabilirsiniz, ancak d├╝zg├╝n bir etki elde etmek i├žin her h├╝creyi bir s├╝tuna sarman─▒z gerekir. ├ľrne─čin, yaln─▒zca sol ve sa─č kenar bo┼čluklar─▒n─▒ geni┼čletmek i├žin:

Yani CSS olacak,

 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> 

Evet, bir g├╝├žl├╝k. Evet, Internet Explorer ile ├žal─▒┼č─▒r. Asl─▒nda, bunu yaln─▒zca Internet Explorer ile test ettim, ├ž├╝nk├╝ i┼čte kullanmam─▒za izin verildi.


41







Sadece border-collapse: collapse masan─▒z padding i├žin ve th veya i├žin kullan─▒n td .


23


2014-01-03





Bu stil tablolar─▒n tamamen s─▒f─▒rlanmas─▒ i├žindir - h├╝cre yast─▒klama , h├╝cre bo┼čluklar─▒ ve kenarl─▒klar .

Reset.css dosyamda bu stil vard─▒:

 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 */
}
 

21







TBH. CSS ile u─čra┼čan t├╝m merakl─▒lar─▒n─▒z i├žin, kullan─▒mdan cellpadding="0" cellspacing="0" kald─▒r─▒lmad─▒klar─▒ i├žin kullanabilirsiniz.

Bu konuda marjlar ├Âneren bir ba┼čkas─▒ <td> bunu kesinlikle denememi┼čtir.


20







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

18







Tablo verisiyle basit├že CSS doldurma kurallar─▒n─▒ kullan─▒n:

 td { 
    padding: 20px;
}
 

Ve s─▒n─▒r bo┼člu─ču i├žin:

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

Ancak, kutu modelinin farkl─▒ uygulanmas─▒ nedeniyle, Internet Explorer gibi eski taray─▒c─▒ s├╝r├╝mlerinde sorunlara neden olabilir.


17







W3C s─▒n─▒fland─▒rmalar─▒ndan anlad─▒─č─▒m kadar─▒yla, <table> 'sadece' verilerini g├Âr├╝nt├╝lemek i├žindir.

Buna dayanarak <div> , arkaplanlar─▒ ve bunlar─▒n hepsini bir araya getirmeyi ├žok daha kolay buldum ve kullanarak veri kayan bir tabloya sahiptim position: absolute; ve background: transparent; ...

Chrome, Internet Explorer (6 ve ├╝st├╝) ve Mozilla Firefox (2 ve ├╝st├╝) ├╝zerinde ├žal─▒┼č─▒r.

Kenar muhafaza elemanlar─▒ gibi aras─▒nda bir mesafe par├žas─▒ olu┼čturmak i├žin kullan─▒lan (ya da her durumda demek) vard─▒r <table> , <div> ve <form> de─čil <tr> , <td> , <span> ya da <input> . Konteyner ├Â─čeleri d─▒┼č─▒ndaki herhangi bir ┼čey i├žin kullanmak, web sitenizi gelecekteki taray─▒c─▒ g├╝ncellemeleri i├žin ayarlamakla me┼čgul etmenizi sa─člar.


15







CSS:

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

13







CSS doldurma ├Âzelli─čini kullanarak, tablo h├╝crelerinin i├žindeki dolguyu kolayca ayarlayabilirsiniz. Tablonun cellpadding niteli─či ile ayn─▒ efekti ├╝retmek i├žin ge├žerli bir yoldur.

 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> 

Benzer ┼čekilde, h├╝cre bo┼čluklama niteli─či gibi biti┼čik tablo h├╝cre s─▒n─▒rlar─▒ aras─▒ndaki bo┼člu─ču uygulamak i├žin CSS kenar bo┼čluk ├Âzelli─čini kullanabilirsiniz. Bununla birlikte, s─▒n─▒r bo┼čluklar─▒n─▒ ├žal─▒┼čmak i├žin s─▒n─▒r daraltma ├Âzelli─činin de─čeri muse ayr─▒d─▒r, bu varsay─▒land─▒r.

 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> 


12







Bunu dene:

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

Veya ┼čunu deneyin:

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

10







Ben !important s─▒n─▒r ├ž├Âk├╝┼č├╝nden sonra kulland─▒m.

 border-collapse: collapse !important;
 

ve IE7'de benim i├žin ├žal─▒┼č─▒yor. H├╝cre aral─▒─č─▒ ├Âzelli─čini ge├žersiz k─▒l─▒yor gibi g├Âr├╝n├╝yor.


9







 <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-padding Tablo ayar─▒ yap─▒larak padding CSS ile verilebilir . cell-spacing border-spacing

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

Keman .


8







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

E─čer margin ├žal─▒┼čma yoktu, sete denemek display ait tr etmek block ve sonra marj─▒ ├žal─▒┼čacakt─▒r.


6







Tablolar i├žin, h├╝cre bo┼čluklar─▒ ve h├╝cre yast─▒klar─▒ HTML 5'de kullan─▒lmamaktad─▒r.

┼×imdi h├╝cre bo┼čluklar─▒ i├žin s─▒n─▒r bo┼čluklar─▒n─▒ kullanmak zorundas─▒n─▒z. Ve h├╝cre yast─▒─č─▒ i├žin kenarl─▒k daraltmay─▒ kullanman─▒z gerekir.

Ve bunu HTML5 kodunuzda kullanmad─▒─č─▒n─▒zdan emin olun. Her zaman bu de─čerleri bir CSS 3 dosyas─▒nda kullanmaya ├žal─▒┼č─▒n.


5







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

4


2016-09-05





CSS'inizde b├Âyle bir ┼čeyi basit├že border-spacing ve kullanarak yapabilirsiniz 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> 


3







Bir HTML tablosunda, cellpadding ve cellspacing ┼č├Âyle ayarlanabilir:

─░├žin h├╝cre dolgusu :

Sadece basit td/th h├╝creyi aray─▒n padding .

├ľrnek:

 /******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;
}
 

─░├žin h├╝cre aral─▒─č─▒

Sadece basit ara table border-spacing

├ľrnek:

 /********* 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;
}
 

CSS kaynak linkine g├Âre daha fazla tablo stili burada CSS'e g├Âre daha fazla tablo stili elde edersiniz .


3







Stili do─črudan masaya eklemeye ne dersiniz? Bu, sayfan─▒zda birden fazla tablonuz varsa table , bir BAD yakla┼č─▒m─▒ olan CSSÔÇÖnizde kullanmak yerine :

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

0



─░lgili yay─▒nlar


Arka planda bir CSS g├Âr├╝nt├╝s├╝n├╝ uzat─▒n ve ├Âl├žeklendirin - yaln─▒zca CSS ile

CSSÔÇÖde kenarl─▒k opakl─▒─č─▒ ayarlayabilir misiniz?

HTML5 tablolar─▒nda h├╝cre pedini, h├╝cre alan─▒n─▒, de─čerini de─či┼čtirip hizalaman─▒n yerini ne al─▒r?

CSSÔÇÖde metin ve alt ├žizgi aras─▒ndaki bo┼čluk nas─▒l art─▒r─▒l─▒r?

CSS'de, bir stil k├╝mesi bildirirken ÔÇť.ÔÇŁ ─░le ÔÇť#ÔÇŁ aras─▒ndaki fark nedir?

CSS se├žicisinde s─▒n─▒f ve ID nas─▒l birle┼čtirilir?

CSS'de id ve class aras─▒ndaki fark ve ne zaman kullan─▒laca─č─▒ [duplicate]

Common Lisp'te ÔÇťsetÔÇŁ, ÔÇťsetqÔÇŁ ve ÔÇťsetfÔÇŁ aras─▒ndaki fark?

CSS'de @import ve link aras─▒ndaki fark

Div'in en boy oran─▒n─▒ koru ama CSS'de ekran geni┼čli─čini ve y├╝ksekli─čini doldur?

Etiketle ilgili di─čer sorular [html]


Taray─▒c─▒y─▒ ├Ânbelle─če al─▒nm─▒┼č CSS / JS dosyalar─▒n─▒ yeniden y├╝klemeye zorlama?

Bir Docker konteynerinin kabu─čuna nas─▒l girebilirim?

Yeni ba┼člayanlar i├žin Git: Kesin pratik rehber

CSS Dolgu / kenar bo┼člu─ču ile% 100 y├╝kseklik

Jilet G├Âr├╝n├╝m├╝ Sayfas─▒nda bir ad alan─▒n─▒ nas─▒l i├že aktar─▒r─▒m?

Komut sat─▒r─▒ndan 'git commit -m' sat─▒r sonu ekleyin

Os / path format─▒ ne olursa olsun, dosya ad─▒n─▒ yoldan ├ž─▒kar─▒n.

Kakao: ├çer├ževe ve s─▒n─▒rlar aras─▒ndaki fark nedir?

─░stemcileri JavaScript dosyalar─▒n─▒ yenilemeye nas─▒l zorlayabilirim?

Bir web sayfas─▒n─▒n ba┼čl─▒─č─▒n─▒ dinamik olarak nas─▒l de─či┼čtirebilirim?