CSS Tabloları
Bir HTML tablosunun görünümü CSS ile büyük ölçüde iyileştirilebilir:
| Şirket | Temas | Ülke |
|---|---|---|
| Alfred'in beslenme kutusu | Maria Anders | Almanya |
| Berglund'un süpermarketi | Christina Berglund | İsveç |
| Montezuma Alışveriş Merkezi | francisco chang | Meksika |
| ciddi ticaret | Roland Mendel | Avusturya |
| Ada Ticareti | Helen Bennett | Birleşik Krallık |
| Kraliyet yemeği | Philip Cramer | Almanya |
| Gülen Bacchus Şarap Mahzenleri | Yoshi Tannamuri | Kanada |
| Toplanan Gıda Depoları | Giovanni Rovelli | İtalya |
Tablo Kenarlıkları
CSS'de tablo kenarlıkları belirtmek için borderözelliği kullanın.
Aşağıdaki örnek, <table>, <th> ve <td> öğeleri için siyah bir kenarlık belirtir:
Örnek
table, th, td {
border: 1px solid black;
}
Tam Genişlik Tablosu
Yukarıdaki tablo bazı durumlarda küçük görünebilir. Tüm ekranı (tam genişlikte) kaplayacak bir tabloya ihtiyacınız varsa width: 100%, <table> öğesine ekleyin:
Örnek
table {
width: 100%;
}
Çift Kenarlıklar
Yukarıdaki örneklerdeki tablonun çift kenarlıklı olduğuna dikkat edin. Bunun nedeni, hem tablonun hem de <th> ve <td> öğelerinin ayrı kenarlıklara sahip olmasıdır.
Çift kenarlıkları kaldırmak için aşağıdaki örneğe bir göz atın.
Tablo Kenarlıklarını Daralt
Özellik border-collapse, tablo kenarlıklarının tek bir kenarlığa daraltılıp daraltılmayacağını belirler:
Örnek
table
{
border-collapse: collapse;
}
Yalnızca tablonun etrafında bir kenarlık istiyorsanız, yalnızca border<table> için özelliği belirtin:
Örnek
table
{
border: 1px solid black;
}