HTML tablosu tasarlamak dünyadaki en göz alıcı iş olmasa da bazen bunu yapmak zorunda kalırız. Bu makale, bazı özel tablo stil teknikleri vurgulanarak HTML tablolarının iyi görünmesi için yöntemleri tartışır.
Tipik bir HTML tablosu
Tipik bir HTML tablosuna bakarak başlayalım. Tipik diyoruz çünkü çoğu HTML tablosu ayakkabılar, hava durumu veya çalışanları listeleyecek şekilde düzenlenir. Bu örnekte bir değişiklik yaparak İngiltere’deki ünlü punk gruplarını içeren bir tablo hazırlayacağız:
<table>
<caption>A summary of the UK's most famous punk bands</caption>
<thead>
<tr>
<th scope="col">Band</th>
<th scope="col">Year formed</th>
<th scope="col">No. of Albums</th>
<th scope="col">Most famous song</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Buzzcocks</th>
<td>1976</td>
<td>9</td>
<td>Ever fallen in love (with someone you shouldn't've)</td>
</tr>
<tr>
<th scope="row">The Clash</th>
<td>1976</td>
<td>6</td>
<td>London Calling</td>
</tr>
... some rows removed for brevity
<tr>
<th scope="row">The Stranglers</th>
<td>1974</td>
<td>17</td>
<td>No More Heroes</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row" colspan="2">Total albums</th>
<td colspan="2">77</td>
</tr>
</tfoot>
</table>Tabloyu scope, <caption>, <thead>, <tbody>, vb. gibi özellikler sayesinde şekillendirdik. Ne yazık ki bu tablo, ekranda görüntülendiğinde çok da iyi durmuyor:
Varsayılan tarayıcı stili bu tabloyu sıkışık, okunması zor ve sıkıcı hale getirdi. Bunu düzeltmek için biraz CSS kullanalım:
HTML tablosunu stillendirmek
Tablo örneğimizi birlikte şekillendirmeye çalışalım.
- Başlangıç olarak, bu örneğin yerel bir kopyasını alın: örnek işaretleme. Her iki resmi de indirin (noise ve leopar derisi) ve ortaya çıkan üç dosyayı yerel bilgisayarınızdaki aynı çalışma dizinine koyun.
- Ardından,
style.cssadlı yeni bir dosya oluşturun ve bunu da diğer dosyalarınızla aynı dizine kaydedin. - Aşağıdaki HTML satırını dosyanızın içindeki
<head>bölümüne yerleştirerek CSS’yi HTML’ye bağlayın:
<link href="style.css" rel="stylesheet" type="text/css">Boşluk ve düzen
Yapmamız gereken ilk şey, aralıkları/düzeni yönetmek – çünkü varsayılan tablo stili çok sıkışık. Bunu yapmak için style.css dosyanıza aşağıdaki CSS’yi ekleyin:
/* aralıklar */
table {
table-layout: fixed;
width: 100%;
border-collapse: collapse;
border: 3px solid purple;
}
thead th:nth-child(1) {
width: 30%;
}
thead th:nth-child(2) {
width: 20%;
}
thead th:nth-child(3) {
width: 15%;
}
thead th:nth-child(4) {
width: 35%;
}
th, td {
padding: 20px;
}Dikkat edilmesi gereken en önemli kısımlar aşağıdaki gibi:
table-layoutözelliğininfixedvarsayılan olarak ayarlamak için genellikle iyi bir fikirdir – tabloların daha öngörülebilir davranmasını sağlar. Normalde, tablo sütunları ne kadar içerik içerdiklerine göre boyutlandırılma eğilimindedir ve bu da bazı garip sonuçlar doğurur.table-layout: fixedile sütunlarınızı başlıklarının genişliğine göre boyutlandırabilir ve ardından içerikleriyle uygun şekilde ilgilenebilirsiniz. Bu yüzdenthead th:nth-child(n)(:nth-child) ile dört farklı başlık seçtik. ( “<thead>içindeki n inci<th>öğesini seç ve verilen genişlikleri ayarla”). Tüm sütun genişliği, başlığının genişliğini takip ederek tablo sütunlarınızı boyutlandırmanın güzel bir yolunu sunar.
Bunu ayrıcawidth%100 ile birleştirdik; bu, tablonun yerleştirildiği herhangi bir kabı dolduracağı ve iyi yanıt vereceği anlamına gelir (ancak yine de dar ekran genişliklerinde iyi görünmesini sağlamak için biraz daha ilgiye ihtiyaç duyacaktır).border-collapseiçincollapsedeğeri herhangi bir tablo için standart en iyi uygulamadır. Varsayılan olarak, tablo öğelerine kenarlıklar verdiğinizde, aşağıdaki resimde gösterildiği gibi hepsinin aralarında boşluk olacaktır:
Bu pek hoş görünmüyor.border-collapse: collapse;ile sınırlar tek bir çerçeveye dönüşür, bu da çok daha iyi bir görünüm sağlar:
- Tablonun tamamının çevresine
borderkoyduk. Bu, daha sonra tablo üstbilgisi ve altbilgisi çevresine bazı kenarlıklar koyacağımız için gerekli. <th>ve<td>elemanları içinpaddingekledik – Bu verilerin biraz nefes almasını sağlar: bir miktar boşluk verir ve tablonun çok daha okunaklı görünmesini sağlar.
Bu noktada, tablomuz şimdiden çok daha iyi görünüyor:
Biraz tipografi
Şimdi metnimizi biraz düzenleyelim.
Her şeyden önce, Google Yazı Tipleri sayfasından bir yazı tipi bulduk. Dilerseniz kendi yazı tipinizi de seçebilirsiniz. Bunu yapmak için aşağıdaki <link> öğemizi ve özel font-family bildirimimizi Google Fonts’un size verdiğiyle değiştirmeniz yeterli olacaktır.
İlk olarak, aşağıdaki <link> öğesini, mevcut <link> öğenizin hemen üstüne ekleyin:
<link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>Şimdi style.css dosyanıza, önceki eklemenin altına aşağıdaki CSS’yi ekleyin:
/* tipografi */
html {
font-family: 'helvetica neue', helvetica, arial, sans-serif;
}
thead th, tfoot th {
font-family: 'Rock Salt', cursive;
}
th {
letter-spacing: 2px;
}
td {
letter-spacing: 1px;
}
tbody td {
text-align: center;
}
tfoot th {
text-align: right;
}Burada tablolara özgü bir şey yapmıyoruz; genellikle yazı tipi stilini okumayı kolaylaştırmak için ince ayarlar yapıyoruz:
- Global bir sans-serif yazı tipi belirledik; bu tamamen stilistik bir seçim oldu. Ayrıca güzel, eski ve serseri bir görünüm için de
<thead>ve<tfoot>öğelerinin içindeki başlıklara özel yazı tipimizi ayarladık. - Okunabilirliğe yardımcı olduğunu düşündüğümüz için başlıklara ve hücrelere
letter-spacingverdik. Yine, çoğunlukla stilistik bir seçim. - Tablo hücrelerindeki
<tbody>metinlerini başlıklarla aynı hizada olacak şekilde ortaladık. Varsayılan olarak, hücrelerintext-alignözelliğineleftve başlıklara isecenterdeğeri verilir. Ancak genellikle hizalamalarda her ikisinin de aynı şekilde ayarlanması daha iyi görünür. Başlık yazı tiplerindeki varsayılan kalın ağırlık, görünümlerini ayırt etmek için yeterlidir. - Veri noktasıyla görsel olarak daha iyi ilişkilendirilmesi için
<tfoot>içindeki başlığı sağa hizaladık.
Sonuç biraz daha düzgün görünüyor:
Grafikler ve renkler
Şimdi grafiklere ve renklere bakalım. Tablo punk yazılarla dolu olduğundan, ona uyacak parlak, heybetli bir stil vermemiz gerekiyor. Endişelenmeyin, tablolarınızı her zaman bu kadar gürültülü yapmak zorunda değilsiniz – daha incelikli ve zevkli bir şeyler de tercih edebilirsiniz.
style.css dosyanıza aşağıdaki CSS’yi ekleyin:
/* grafikler ve renkler */
thead, tfoot {
background: url(leopardskin.jpg);
color: white;
text-shadow: 1px 1px 1px black;
}
thead th, tfoot th, tfoot td {
background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5));
border: 3px solid purple;
}Yine burada da tablolara özgü bir şey yok, ancak birkaç şeye dikkat etmekte fayda var.
Biz <thead> ve <tfoot> için background-image ekledik. Başlık ve altbilgilerdeki tüm metinlerin rengini de color ile beyaza dönüştürdük (ve bir text-shadow ekledik). Metninizin her zaman arka planınızla iyi bir kontrast oluşturduğundan emin olmalısınız. Böylece daha okunabilir olacaktır.
Ayrıca, üstbilgi ve altbilgi içindeki <th> ve <td> öğelerine doğrusal bir gradyan ekledik ve bu öğelere parlak mor bir kenarlık verdik. Stilleri üst üste katmanlayabilmeniz için birden çok iç içe öğeye sahip olmak yararlıdır. Evet, birden çok arka plan görüntüsü kullanarak <thead> ve <tfoot> öğelerine hem arka plan görüntüsünü hem de doğrusal gradyanı koyabilirdik. Ancak birden çok arka plan görüntüsünü veya doğrusal gradyanı desteklemeyen eski tarayıcıları düşünerek bu işi ayrı ayrı yapmaya karar verdik.
Zebra çizgileri
Tablonuzdaki farklı veri satırlarını ayrıştırmayı ve okumayı kolaylaştırmak için değişen renk satırları ekleyebilirsiniz. Bunlar zebra şeritleri olarak isimlendirilir. style.css dosyanızın altına aşağıdaki CSS’yi ekleyin:
/* zebra çizgileri*/
tbody tr:nth-child(odd) {
background-color: #ff33cc;
}
tbody tr:nth-child(even) {
background-color: #e495e4;
}
tbody tr {
background-image: url(noise.png);
}
table {
background-color: #ff33cc;
}- Daha önce
:nth-childseçicisinin belirli alt öğeleri seçmek için kullanıldığını gördünüz. Bu seçiciye parametre olarak bir formül de verilebilir. Böylece bir dizi eleman seçilebilir.2n-1formülü tek numaralı çocukları (1, 3, 5 vb.) ve2nformülü çift numaralı çocukları (2, 4, 6 vb.) seçecektir. Kodumuzdaoddveevenanahtar kelimelerini kullandık – bu, yukarıda belirtilen formüllerle tamamen aynı şeyleri yapar. Bu durumda tek ve çift sıralara farklı (parlak) renkler veriyoruz. - Ayrıca, tüm gövde satırlarına doku sağlamak için biraz gürültülü bir
.pngile arkaplan ekledik. Bu arkaplanın yinelendiğine dikkat edin. - Son olarak,
:nth-childseçicisini desteklemeyen tarayıcılarda tüm tabloya düz bir arka plan rengi verdik .
Bu renk patlaması ile aşağıdaki görünümü elde ettik:
Şimdi, bu biraz abartılı olabilir ve damak zevkinize uygun olmayabilir. Ancak burada vurgulamaya çalıştığımız nokta, tabloların sıkıcı ve akademik olması gerekmediği.
Altyazıya stil verme
Tablomuzla ilgili son bir şey daha var – altyazıya stil vermek. Bunu yapmak için style.css dosyanızın altına aşağıdakileri ekleyin:
/* altyazı */
caption {
font-family: 'Rock Salt', cursive;
padding: 20px;
font-style: italic;
caption-side: bottom;
color: #666;
text-align: right;
letter-spacing: 1px;
}caption-side özelliğine verilen bottom değeri dışında burada kayda değer bir şey yok. Bu, başlığın tablonun alt kısmına yerleştirilmesine neden olur ve bu, diğer bildirimlerle birlikte bize bu son görünümü verir:
Becerilerinizi test edin!
Bu makalede çok şey ele aldık, ancak en önemli bilgiyi hatırlayabiliyor musunuz? Devam etmeden önce bu bilgileri hatırladığınızdan emin olun.
Özet
Tablo stillerini de öğrendiğimize göre, başka bir konuya geçebiliriz. Sonraki makale CSS’de hata ayıklamayı – mizanpajların olması gerektiği gibi görünmemesi veya özelliklerin gerektiği gibi uygulanmaması gibi sorunların nasıl çözüleceğini araştıracak. Bu, sorunlarınıza çözümler bulmak için tarayıcı DevTools‘u kullanmayla ilgili bilgileri de göreceğiz.