CSS Tablo

CSS kullanarak HTML tablolarının görünümünü büyük ölçüde iyileştirebilirsiniz：

Company Contact Address City
Alibaba Ma Yun No. 699, Wangshang Road, Binjiang District Hangzhou
APPLE Tim Cook 1 Infinite Loop Cupertino, CA 95014 Cupertino
BAIDU Li YanHong Lixiang guoji dasha,No 58, beisihuanxilu Beijing
Canon Tsuneji Uchida One Canon Plaza Lake Success, NY 11042 New York
Google Larry Page 1600 Amphitheatre Parkway Mountain View, CA 94043 Mountain View
HUAWEI Ren Zhengfei Putian Huawei Base, Longgang District Shenzhen
Microsoft Bill Gates 15700 NE 39th St Redmond, WA 98052 Redmond
Nokia Olli-Pekka Kallasvuo P.O. Box 226, FIN-00045 Nokia Group Helsinki
SONY Kazuo Hirai Park Ridge, NJ 07656 Park Ridge
Tencent Ma Huateng Tencent Building, High-tech Park, Nanshan District Shenzhen

Kişisel olarak deneyin

Tablo çerçeveleri

CSS'de tablo çerçevelerini ayarlamak için border Özellik.

Örnek, <table>, <th> ve <td> elementlerine siyah çerçeve ayarlar:

Firstname Lastname
Bill Gates
Steve Jobs

Örnek

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

Kişisel olarak deneyin

Dikkat:Yukarıdaki örnekteki tablo iki kenar çerçeveli. Bu, table ve <th> ve <td> elementlerinin ayrı kenar çerçeveleri sahip olması nedeniyle budur.

Tam genişlik tablo

Bazı durumlarda, yukarıdaki tablo çok küçük gibi görünebilir. Tüm ekranı (tam genişlik) kaplayacak bir tablo oluşturmak için <table> elementine width: 100% ekleyin:

Örnek

table {
  width: 100%;
}

Kişisel olarak deneyin

İki kenar çerçeve

Lütfen yukarıdaki tabloyu iki kenar çerçeveli olduğunu unutmayın. Bu, tablo ve th, td elementlerinin ayrı kenar çerçeveleri sahip olması nedeniyle budur.

İki kenar çerçeve kaldırmak için aşağıdaki örneğe bakın.

Tablo kenar çerçeveleri birleştirme

border-collapse Özellik, tablo kenar çerçevelerinin tek bir kenar çerçeveye katılmasını ayarlar:

Firstname Lastname
Bill Gates
Steve Jobs

Örnek

table {
  border-collapse: collapse;
}
table, th, td {
  border: 1px solid black;
}

Kişisel olarak deneyin

Tablo etrafında sadece bir çerçeve istiyorsanız, <table> için yalnızca belirtin: border özellik:

Firstname Lastname
Bill Gates
Steve Jobs

Örnek

table {
  border: 1px solid black;
}

Kişisel olarak deneyin

Tablo genişliği ve yüksekliği

Tablonun genişliği ve yüksekliği width ve height Özellik tanımları.

Örnek, tabloyu genişliğini %100 olarak ayarlar ve <th> elementinin yüksekliğini 50px olarak ayarlar:

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Örnek

table {
  width: 100%;
}
th {
  height: 50px;
}

Kişisel olarak deneyin

Sayfanın yarısını kaplayacak bir tablo oluşturmak için width: 50% kullanın:

Örnek

table {
  width: 50%;
}
th {
  height: 70px;
}

Kişisel olarak deneyin

Yatay hizalama

text-align Özellik, <th> veya <td> içindeki içeriğin yatay hizalama biçimini (sola, sağa veya ortada) ayarlar.

Varsayılan durumda, <th> elementindeki içerik ortada hizalanır, <td> elementindeki içerik ise sola hizalanır.

<td> elementinin içeriğini de ortada hizalamak için text-align: center kullanın:

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Örnek

th {
  text-align: center;
}

Kişisel olarak deneyin

Örnek, <th> elementindeki metni sola hizalarken:

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Örnek

th {
  text-align: left;
}

Kişisel olarak deneyin

Dikey hizalama

vertical-align Özellik, <th> veya <td> içindeki içeriğin dikey hizalama biçimini (üst, alt veya ortada) ayarlar.

Varsayılan durumda, tablo içeriğinin dikey hizalama ortadadır (<th> ve <td> elementleri).

Örnek, <td> elementinin dikey metin hizalama biçimini aşağıya ayarlar:

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Örnek

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

Kişisel olarak deneyin

tablo iç içe boşluk

Kenarlık ve tablo içeriği arasındaki boşluğu kontrol etmek için, <td> ve <th> ögesi üzerinde padding özellik:

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Örnek

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

Kişisel olarak deneyin

dikey bölme çizgisi

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

<th> ve <td> e ekleyin border-bottom özellik, dikey bölme çizgisi elde etmek için:

Örnek

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

Kişisel olarak deneyin

tıklanabilir tablo

<tr> ögesi üzerinde seçici, fareni üzerine geldiğinde tablo satırını vurgulamak için :hover

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Örnek

tr:hover {background-color: #f5f5f5;}

Kişisel olarak deneyin

dizi tablo

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Leopard desenli tablo etkisi elde etmek için nth-child() seçici, tüm çift (veya tek) tablo satırlarına background-color：

Örnek

tr:nth-child(even) {background-color: #f2f2f2;}

Kişisel olarak deneyin

Tablo renkleri

Aşağıdaki örnek, <th> ögesinin arka plan rengi ve metin rengini belirler:

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Örnek

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

Kişisel olarak deneyin

Duyarlı tablo

Eğer ekran çok küçükse ve tüm içerik görüntülenemiyorsa, duyarlı tablo yatay kayan çubuğu görüntüler:

First Name Last Name Points Points Points Points Points Points Points Points Points Points
Bill Gates 50 50 50 50 50 50 50 50 50 50
Steve Jobs 94 94 94 94 94 94 94 94 94 94
Elon Musk 67 67 67 67 67 67 67 67 67 67

<table> ögesi etrafına overflow-x:auto çevreleyen konteyner elemanı (örneğin <div>), duyarlı etkileşim elde etmek için:

Örnek

<div style="overflow-x:auto;">
<table>
... tablo içeriği ...
</table>
</div>

Kişisel olarak deneyin

Açıklama:OS X Lion'da (Mac üzerinde) kayan çubuk varsayılan olarak gizlidir ve sadece kullanıldığında görüntülenir ("overflow:scroll" olarak ayarlanmış olsa bile).

Daha fazla örnek

Bir süsli tablo yapın
Bu örnek, nasıl süsli bir tablo oluşturacağınızı gösterir.
Tablo başlıklarının konumunu ayarlayın
Bu örnek, nasıl tablo başlıklarını yerleştireceğinizi gösterir.

CSS tablo özellikleri

özellik tanım
border Kısaltma Özelliği. Tüm çerçeve özelliklerini bir açıklamada ayarlar.
border-collapse Tablo çerçevelerinin katlanıp katlanmayacağını belirler.
border-spacing Komşu hücreler arasındaki çerçeve mesafesini belirler.
caption-side Tablo başlıklarının konumunu belirler.
empty-cells Tablo içindeki boş hücrelerde çerçeve ve arka planın gösterilip gösterilmeyeceğini belirler.
table-layout Tabloya uygulanan düzen algoritmasını ayarlar.