HIZLI
TEKLİF AL
WEB TASARIM AJANSI TÜRKİYE

CSS Table Özellikleri

  1. Anasayfa
  2. CSS Table Özellikleri

 

 

Sayfa Başlıkları

Border-collapse Özelliği

border-collapse:collapse; Özelliği hücrelerin sınırlarının ve boş hücre etkilerini ortadan kaldırır.
resetlemek için table{border-collapse:collapse;} yazabilirsiniz. Bootstrap gibi bir kütüphane ya da hali hazırda bir reset css kullanıyor iseniz border-collapse:collapse; olarak ayarlanmış gelebilir.

HTML table öğelerini stillendirmek <table>, <tr>, <th>, <td> öğelerini seçerek stillendirme yapmanız gerekecektir.

HTML Tablo Öğeleri

Etiket Adı Açıklaması
<table> Sayfaya tablo eklemek için kullanılır.
<thead> Tablonun üst içeriğini eklemek için kullanılır.
<tbody> Tablonun gövde grup içeriklerini eklemek için kullanılır.
<tr> <table> içerisindeki bir satırı belirtmek için kullanılır.
<td> Tablo satırındaki her bir hücreyi belirlemek için kullanılır.
<th> <table> içerisindeki başlık hücrelerini belirlemek için en üstte kullanılır.
<tfoot> Tablonun alt kısmını eklemek için kullanılabilir.

border-collapse:separate Özelliği

Border colapse özelliği ile her tablo hücresi kendi sınırları içerisinde gösterilir ve hücreler arası sınırlar birbirinden ayrılır.

border-spacing özelliği ile de hücreler arası boşuğun uzunluğunu belirtebilirisiniz.


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

    <table>
    <tr>
        <th>Öğrenci İsmi</th>
        <th>Bölümü</th>
        <th>Okulu</th>
    </tr>
    <tr>
        <td>Ali</td>
        <td>Sayısal</td>
        <td>Cumhuriyet Lisesi</td>
    </tr>
    <tr>
        <td>Ayşe</td>
        <td>Sözel</td>
        <td>Cumhuriyet Lisesi</td>
    </tr>
    <tr>
        <td>Ahmet</td>
        <td>Sayısal</td>
        <td>Anadolu Teknik Lisesi</td>
    </tr>
    </table>
CSS Kodları

    table.c-separate {
        border-collapse: separate;
        border-spacing: 5px;
      }
      table,
      table tr,
      table td,
      table th {
        border: 1px solid #bbb;
        padding: 5px;
    }
Sonuç
Öğrenci İsmi Bölümü Okulu
Ali Sayısal Cumhuriyet Lisesi
Ayşe Sözel Cumhuriyet Lisesi
Ahmet Sayısal Anadolu Teknik Lisesi
Örnek HTML Kodu

<table>
    <tr>
        <th>Öğrenci İsmi</th>
        <th>Bölümü</th>
        <th>Okulu</th>
    </tr>
    <tr>
        <td>Ali</td>
        <td>Sayısal</td>
        <td>Cumhuriyet Lisesi</td>
    </tr>
    <tr>
        <td>Ayşe</td>
        <td>Sözel</td>
        <td>Cumhuriyet Lisesi</td>
    </tr>
    <tr>
        <td>Ahmet</td>
        <td>Sayısal</td>
        <td>Anadolu Teknik Lisesi</td>
    </tr>
</table>
Örnek CSS Kodu

table {
    border-collapse: collapse;
    background-color: #fff;
  }
  table tr,
  table td,
  table th {
    border: 1px solid #bbb;
    padding: 10px 20px;
  }
  table th {
    background-color: #d1084b;
    color: #fff;
    font-weight: 600;
  }
Sonuç
Öğrenci İsmi Bölümü Okulu
Ali Sayısal Cumhuriyet Lisesi
Ayşe Sözel Cumhuriyet Lisesi
Ahmet Sayısal Anadolu Teknik Lisesi
CSS Form Önceki Ders CSS Animation Sonraki Ders