CSS ile cellpadding ve cellspacing nasıl ayarlanır?

HTML tablosunda cellpadding ve cellspacing aşağıdaki gibi ayarlanabilir:

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

Aynı şey CSS kullanılarak nasıl gerçekleştirilebilir?

Temel Bilgiler

CSS ile “cellpadding”i kontrol etmek için tablo hücrelerindeki padding’i kullanabilirsiniz. Örneğin 10px “cellpadding” için:

td { 
    padding: 10px;
}

“Cellspacing” için CSS özelliğini tablonuza uygulayabilirsiniz:

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

Varsayılan

Tarayıcının varsayılan davranışı aşağıdakilere eşdeğerdir:

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

Cellpadding

Hücrenin içeriği ile hücre duvarı arasındaki boşluk miktarını ayarlar:

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

Hücre Aralığı

Tablo hücreleri arasındaki boşluğu kontrol eder

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

Her ikisi

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

Her ikisi de (özel)

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