En son web geliştirme öğreticiler
×

CSS Eğitimi

CSS EV CSS Giriş CSS Sözdizimi CSS Nasıl CSS Renkler CSS Arka CSS Kenarlıklar CSS Kenar boşlukları CSS Dolgu malzemesi CSS Yükseklik genişlik CSS Metin CSS Yazı CSS Bağlantılar CSS Listeler CSS Tablolar CSS Kutu Modeli CSS Özeti CSS Gösterimi CSS Maksimum genişlik CSS Konumu CSS şamandıra CSS Inline-block CSS hizalama CSS combinators CSS Sözde sınıf CSS Sözde elemanı CSS Gezinti çubuğu CSS Açılır menülerde CSS Araç ipuçları CSS Resim Galerisi CSS Görüntüdeki Opaklık CSS Görüntü Spritleri CSS Attr Seçicileri CSS Formları CSS Sayaçlar

CSS3

CSS3 Giriş CSS3 Yuvarlatılmış köşeler CSS3 Sınır Resimleri CSS3 Arka CSS3 Renkler CSS3 Renk Geçişleri CSS3 Gölgeler CSS3 Metin CSS3 Yazı CSS3 2D Dönüşümler CSS3 3D Dönüşümler CSS3 Geçişler CSS3 Animasyonlar CSS3 Görüntüler CSS3 Düğmeler CSS3 sayfalara numara koyma CSS3 Birden Çok Sütun CSS3 Kullanıcı arayüzü CSS3 Kutu Boyutlandırma CSS3 Flexbox CSS3 Medya Sorguları CSS3 MQ Örnekleri

CSS Duyarlı Web Tasarımı

Duyarlı Web Tasarımı giriş Duyarlı Web Tasarımı Görünüm Duyarlı Web Tasarımı Izgara Görünümü Duyarlı Web Tasarımı Medya Sorguları Duyarlı Web Tasarımı Görüntüler Duyarlı Web Tasarımı Videolar Duyarlı Web Tasarımı çerçeveler

CSS Examples

CSS Örnekler CSS bilgi yarışması CSS sertifika

CSS References

CSS Referans CSS Seçiciler CSS Fonksiyonlar CSS Referans Resmi CSS Web Safe Yazı CSS canlandırılabilir CSS Birimler CSS PX-EM Dönüştürücü CSS Renkler CSS Renk Değerleri CSS Renkli İsimler CSS3 Tarayıcı Desteği

 

CSS Tablolar

❮ Önceki Sonraki bölüm ❯

Bir HTML tablosunun görünümünü büyük ölçüde CSS ile geliştirilebilir:

şirket Temas ülke
Alfreds Futterkiste Maria Anders Almanya
Berglunds snabbkop Christina Berglund İsveç
Centro Comercial Moctezuma Francisco Chang Meksika
Ernst Handel Roland Mendel Avusturya
ada Ticaret Helen Bennett UK
Königlich Essen Philip Cramer Almanya
Bacchus Winecellars Laughing Yoshi Tannamuri Kanada
Magazzini Alimentari Riuniti Giovanni Rovelli İtalya

Tablo Sınırlar

BB'de tablo sınırlarını belirtmek için, kullanmak border özelliği.

Aşağıdaki örnek için siyah kenarlık belirtir <table> , <th> ve <td> elemanlar:

Örnek

table, th, td {
   border: 1px solid black;
}
Kendin dene "

Örneğin masa üstünde çift sınırları var dikkat edin. Masa ve hem olmasıdır <th> ve <td> elemanları ayrı sınırları var.

Tablo Sınırı kapa

border-collapse özelliği Sınırlar tek sınıra içine çökmüş gerekip gerekmediğini belirler:

Örnek

table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}
Kendin dene "

Yalnızca masanın etrafına kenarlık istiyorsanız, sadece belirtmek border mülkü <table> :

Örnek

table {
    border: 1px solid black;
}
Kendin dene "

Tablo Genişlik ve Yükseklik

Genişlik ve bir masa yüksekliği ile tanımlanır width ve height özellikleri.

Aşağıdaki örnek,% 100 tablonun genişliği ve yüksekliğini ayarlar <th> piksel x 50 için elemanlar:

Örnek

table {
    width: 100%;
}

th {
    height: 50px;
}
Kendin dene "

Yatay hizalama

text-align özelliği yatay hizalama ayarlar (like left, right, or center) içeriğin <th> veya <td> .

Varsayılan olarak, içeriği <th> elemanları Ortalanmıştır ve içeriği <td> elemanları sola hizalanır.

Aşağıdaki örnek metni sola hizalar <th> elemanları:

Örnek

th {
    text-align: left;
}
Kendin dene "

Dikey hizalama

vertical-align özelliği dikey hizalamasını ayarlar (like top, bottom, or middle) içerik <th> veya <td> .

Varsayılan olarak, bir tablodaki içeriğin dikey hizalama ortasıdır (hem <th> ve <td> elemanları).

Aşağıdaki örnek için alta dikey metin hizalamasını ayarlar <td> elemanları:

Örnek

td {
    height: 50px;
    vertical-align: bottom;
}
Kendin dene "

Tablo Dolgu

Sınır ve bir tabloda içerik arasındaki boşluğu kontrol etmek için, kullanmak padding mülk <td> ve <th> elemanları:

Örnek

th, td {
    padding: 15px;
    text-align: left;
}
Kendin dene "

Yatay Bölücüler

İsim Soyadı Tasarruf
Peter kızıl akbaba 100 $
Lois kızıl akbaba 150 $
Joe Swanson 300 $

Ekle border-bottom mülkü <th> ve <td> yatay bölücülerin:

Örnek

th, td {
    border-bottom: 1px solid #ddd;
}
Kendin dene "

Hoverable Tablo

Kullanım :hover üzerinde seçici <tr> farenin üzerinde tablo satırlarını vurgulamak için:

İsim Soyadı Tasarruf
Peter kızıl akbaba 100 $
Lois kızıl akbaba 150 $
Joe Swanson 300 $

Örnek

tr:hover {background-color: #f5f5f5}
Kendin dene "

Çizgili Tablolar

İsim Soyadı Tasarruf
Peter kızıl akbaba 100 $
Lois kızıl akbaba 150 $
Joe Swanson 300 $

Zebra desenli tablolar için kullanın nth- child() seçici ve bir ekleme background-color tüm çift için (or odd) tablo satırları:

Örnek

tr:nth-child(even) {background-color: #f2f2f2}
Kendin dene "

Tablo Renk

Aşağıdaki örnekte arka plan rengini ve metin rengini belirler <th> elemanları:

İsim Soyadı Tasarruf
Peter kızıl akbaba 100 $
Lois kızıl akbaba 150 $
Joe Swanson 300 $

Örnek

th {
    background-color: #4CAF50;
    color: white;
}
Kendin dene "

duyarlı Masa

Ekran tam içeriğini görüntülemek için çok küçükse bir tepki tablo yatay kaydırma çubuğunu görüntüler:

İsim Soyadı makas makas makas makas makas makas makas makas makas makas makas makas
Jill demirci 50 50 50 50 50 50 50 50 50 50 50 50
Havva Jackson 94 94 94 94 94 94 94 94 94 94 94 94
Adem Johnson 67 67 67 67 67 67 67 67 67 67 67 67

Bir kap öğesi ekleyin (like <div> ) ile overflow-x:auto etrafında <table> elemanı o duyarlı hale getirmek için:

Örnek

<div style="overflow-x:auto;">

<table>
... table content ...
</table>

</div>
Kendin dene "
Örnekler

Diğer Örnekler

Süslü bir tablo yapın
Bu örnek, bir fantezi tablo oluşturulması gösterilmiştir.

Tablo başlığı pozisyonunu ayarlayın
Bu örnek Tablo başlığını konumlandırmak için nasıl kullanılacağını gösterir.

Egzersizleri ile Yourself test edin!

Egzersiz 1 » Alıştırma 2» Egzersiz 3 » Egzersiz 4» Egzersiz 5 » Egzersiz 6»

CSS Tablo Özellikleri

özellik Açıklama
border tek bildiriminde bütün sınır özelliklerini belirler
border-collapse tablo sınırları daraltılmış gerektiğini olup olmadığını belirtir
border-spacing komşu hücreler sınırları arasındaki mesafeyi belirler
caption-side Bir tablo başlığı yerleşimini belirtir
empty-cells Bir tabloda boş hücreleri üzerinde sınırları ve arka plan görüntülemek için olmadığını belirtir
table-layout düzen algoritma bir tablo için kullanılacak ayarlar

❮ Önceki Sonraki bölüm ❯