Verileri bir düzen içinde tutmak ve bu verileri kullanıcıların kolay bir biçimde okuyabileceği basit bir yol sağlamak için HTML tabloları kullanılır.
Ancak CSS’in tarayıcılarda yaygın şekilde desteklenmediği dönemlerde, tablolar verileri bir düzen içinde satır ve sütun gibi 2 boyutlu bir yapıda göstermek yerine, web sitelerinin oluşturulduğu ana iskele gibi bir görevi üstlendi. Bir sayfanın genel düzenini oluşturmak için olduğu kadar aynı zamanda içeriği konumlandırmak için de kullanılıyorlardı. O sırada işe yaradı, ancak tabloların genel amacı bu olmamalıydı.
Neyse ki o zamandan beri uzunca bir yol katettik. Bugün tablolar, verileri organize etmek için (olması gerektiği gibi) özel olarak kullanılmaya başladı. Neyse ki konumlandırma ve düzen işlemleriyle sorumlu CSS’i kullanmaya başladık. Dolayısıyla artık tablolar HTML’nin başladığı günden bu güne hiç olmadıkları kadar özgür ve amaçları doğrultusunda kullanılmaya hazırlar.
Bir tablonun HTML’de nasıl oluşturulacağı büyük ölçüde verilere ve nasıl görüntüleneceğine bağlıdır. Tablolar buna göre HTML’de dizayn edildikten sonra, bilgilerin kullanıcılara daha okunaklı ve anlaşılır gösterilmesini sağlamak için CSS ile şekillendirilmesi gerekir.
Tablo Kenarları
Tablo kenarlarında veya hücre duvarlarında border özelliği kullanarak kenar çizgileri oluşturulabilir. <table>,<td> ve <th> öğelerine uygulanır.
Örnek ;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body> <table> <tr> <th>Ad</th> <th>Soyad</th> </tr> <tr> <td>Hakan</td> <td>KİRACI</td> </tr> <tr> <td>Tuncay</td> <td>TUNCER</td> </tr> </table> </body> </html> |
Yukarıdaki örnekteki tabloda çift kenarlıklar olduğunu unutmayın. Bunun nedeni, tablonun ve <th> ve <td> öğelerinin ayrı kenarlıkları olmasıdır.
Örnek ;
Yalnızca tablo etrafında bir kenarlık istiyorsanız, yalnızca <table> öğesi için border bildirimi yapmanız yeterli olacaktır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html> <head> <style> table { border: 1px solid black; } </style> </head> <body> <table> <tr> <th>Ad</th> <th>Soyad</th> </tr> <tr> <td>Hakan</td> <td>KİRACI</td> </tr> <tr> <td>Tuncay</td> <td>TUNCER</td> </tr> </table> </body> </html> |
Tablo kenarları yapısı gereği çizgilerini çift olarak çizmektedir. Bunun sebebi, hem <table> hemde <td>,<tr> öğelerinin ayrı ayrı çizgilere sahip olmasıdır. Bunu kendi içine çökertip zaten olan bir duvar çizgisinin yanına ikinci bir duvar çizgisinin olmasını engelleyebilirsiniz. Bunun için “border-collapse” özelliğini kullanarak “collapse” değerini atayın.
|
1 2 3 4 5 |
table { border-collapse: collapse; } |
bildirimi gereğini yapacaktır. Bir örnekle görelim;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html> <head> <style> table { border-collapse: collapse; } table, th, td { border: 1px solid black; } </style> </head> <body> <table> <tr> <th>Ad</th> <th>Soyad</th> </tr> <tr> <td>Hakan</td> <td>KİRACI</td> </tr> <tr> <td>Tuncay</td> <td>TUNCER</td> </tr> </table> </body> </html> |
Tablonun Genişliği ve Yüksekliği
Bir tablonun genişliği width, yüksekliği height özellikleri ile ayarlayabilirsiniz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<!DOCTYPE html> <html> <head> <style> table, td, th { border: 1px solid black; } table { border-collapse: collapse; width: 100%; } th { height: 50px; } </style> </head> <body> <table> <tr> <th>Ad</th> <th>Soyad</th> <th>Yabancı Dil</th> </tr> <tr> <td>Hakan</td> <td>KİRACI</td> <td>İngilizce</td> </tr> <tr> <td>Tuncay</td> <td>TUNCER</td> <td>Almanca</td> </tr> </table> </body> </html> |
Yatay Hizalama Yapın
text-align Özelliğini kullanarak <td> <th> içeriğin (sola, sağa veya merkez gibi) yatay hizalama yapar.
Varsayılan olarak, <th> öğelerinin içeriği ortalanmış ve <td> öğelerin içeriği sola hizalanmıştır.
Örnek ;
Aşağıdaki örnek, metni <th> elemanlarında sola hizalar.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<<!DOCTYPE html> <html> <head> <style> table, td, th { border: 1px solid black; } table { border-collapse: collapse; width: 100%; } th { text-align: left; } </style> </head> <body> <table> <tr> <th>Ad</th> <th>Soyad</th> <th>Yabancı Dil</th> </tr> <tr> <td>Hakan</td> <td>KİRACI</td> <td>İngilizce</td> </tr> <tr> <td>Tuncay</td> <td>TUNCER</td> <td>Almanca</td> </tr> </table> </body> </html> |
Dikey Hizalama Yapın
vertical-align Özelliği veya <td> <th> içeriğin (üst, alt veya orta gibi) dikey konumunu belirler.
Varsayılan olarak, bir tablodaki içeriğin dikey hizalaması orta değerdedir (hem <th> hem de <td> elemanları için).
Aşağıdaki örnek, <td> öğeleri için dikey metin hizalamasını altına ayarlar:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!DOCTYPE html> <html> <head> <style> table, td, th { border: 1px solid black; } table { border-collapse: collapse; width: 100%; } td { height: 50px; vertical-align: bottom; } </style> </head> <body> <table> <tr> <th>Ad</th> <th>Soyad</th> <th>Yabancı Dil</th> </tr> <tr> <td>Hakan</td> <td>KİRACI</td> <td>İngilizce</td> </tr> <tr> <td>Tuncay</td> <td>TUNCER</td> <td>Almanca</td> </tr> </table> </body> </html> |
Hücre İç Boşluğunu Kontrol Edin
padding Özelliği bir tablodaki sınır çizgisi ile içeriği arasında kalan iç boşluğu ayarlamanızı sağlar. <td> ve <th> öğeleri için kullanın.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!DOCTYPE html> <html> <head> <style> table, td, th { border: 1px solid #ddd; text-align: left; } table { border-collapse: collapse; width: 100%; } th, td { padding: 15px; } </style> </head> <body> <table> <tr> <th>Ad</th> <th>Soyad</th> <th>Yabancı Dil</th> </tr> <tr> <td>Hakan</td> <td>KİRACI</td> <td>İngilizce</td> </tr> <tr> <td>Tuncay</td> <td>TUNCER</td> <td>Almanca</td> </tr> </table> </body> </html> |
Satırlarda Yatay Çizgiler Kullanın
border-bottom Özelliği ile alt kenar stilini belirleyebilirsiniz. Bu sayede daha sade tasarımlı tablolar elde edebilirsiniz. <td> ve <th> öğeleri için kullanın.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<!DOCTYPE html> <html> <head> <style> table { border-collapse: collapse; width: 100%; } th, td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; } </style> </head> <body> <table> <tr> <th>Ad</th> <th>Soyad</th> <th>Yabancı Dil</th> </tr> <tr> <td>Hakan</td> <td>KİRACI</td> <td>İngilizce</td> </tr> <tr> <td>Tuncay</td> <td>TUNCER</td> <td>Almanca</td> </tr> </table> </body> </html> |
Mouse Etkilerini Kullanın
Mouse (fare) üzerinde iken tablo satırlarını vurgulamak için <tr> üzerindeki :hover seçicisini kullanın.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!DOCTYPE html> <html> <head> <style> table { border-collapse: collapse; width: 100%; } th, td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; } tr:hover{ background-color:#f5f5f5 } </style> </head> <body> <table> <tr> <th>Ad</th> <th>Soyad</th> <th>Yabancı Dil</th> </tr> <tr> <td>Hakan</td> <td>KİRACI</td> <td>İngilizce</td> </tr> <tr> <td>Tuncay</td> <td>TUNCER</td> <td>Almanca</td> </tr> </table> </body> </html> |
Satırları Farklı Renklendirin
Tabloları daha okunaklı hale getirme çabası olarak, ortak bir tasarım uygulaması olan, art arda arka plan renkleri olan tablo satırlarını “şeritlemek” iyi bir fikirdir. Bu satırları daha net yapar ve bilgileri taramak için görsel zenginlik sağlar. Böyle bir görünüm için <tr> öğelerine nth-child() sözde seçicisini kullanarak background-color özelliğine farklı bir renk atayabilirsiniz.
nth-child(even) veya nth-child(odder) sözde seçicisi yalnızca çift veya tek tablo satırlarını etkileyecektir.
Örnek ;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
<!DOCTYPE html> <html> <head> <style> table { border-collapse: collapse; width: 100%; } th, td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; } tr:nth-child(even){ background-color: #f2f2f2 } </style> </head> <body> <table> <tr> <th>Ad</th> <th>Soyad</th> <th>Yabancı Dil</th> </tr> <tr> <td>Hakan</td> <td>KİRACI</td> <td>İngilizce</td> </tr> <tr> <td>Tuncay</td> <td>TUNCER</td> <td>Almanca</td> </tr> <tr> <td>Ahmet CANSEVER</td> <td>İNCE</td> <td>Fransızca</td> </tr> <tr> <td>Hayri</td> <td>KOÇMARLAR</td> <td>Almanca</td> </tr> <tr> <td>Hüseyin</td> <td>ÖZTÜRK</td> <td>İngizilce</td> </tr> <tr> <td>Ufuk</td> <td>İLKİZ</td> <td>Almanca</td> </tr> </table> </body> </html> |
Başlık Satırının Arka Planını Ayarlayın
Bir tabloda başlık satırı <th> öğesi ile belirtilir. background-color Özelliğini kullanarak başlıkların arka plan rengini tayin edebilir, color özelliği ile yazı rengini değiştirebilirsiniz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
<!DOCTYPE html> <html> <head> <style> table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; } tr:nth-child(even){ background-color: #f2f2f2; } th { background-color: forestgreen; color: white; } </style> </head> <body> <table> <tr> <th>Ad</th> <th>Soyad</th> <th>Yabancı Dil</th> </tr> <tr> <td>Hakan</td> <td>KİRACI</td> <td>İngilizce</td> </tr> <tr> <td>Tuncay</td> <td>TUNCER</td> <td>Almanca</td> </tr> <tr> <td>Ahmet CANSEVER</td> <td>İNCE</td> <td>Fransızca</td> </tr> <tr> <td>Hayri</td> <td>KOÇMARLAR</td> <td>Almanca</td> </tr> <tr> <td>Hüseyin</td> <td>ÖZTÜRK</td> <td>İngizilce</td> </tr> <tr> <td>Ufuk</td> <td>İLKİZ</td> <td>Almanca</td> </tr> </table> </body> </html> |
Kaydırma Çubukları Tabloyu Ekrana Sığdırın
Tablo içeriğiniz oldukça geniş ise (çok fazla sütun) bu durumda ekrana sığdırma sorunları ile karşı karşıya kalabilirsiniz. Böyle bir durumda yatay kaydırma çubukları işinizi görecektir. Bunu yapabilmek için <table> öğesinin dışına onu kapsayan bir <div> yerleştirin. “overflow-x” Özelliğine “auto” değeri vererek, sayfa dışına taşma durumu meydana geldiğinde kaydırma çubuklarını otomatik olarak göstermesini sağlayın.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
<!DOCTYPE html> <html> <head> <style> div.tablo{ overflow-x: auto; } table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; } tr:nth-child(even){ background-color: #f2f2f2; } th { background-color: forestgreen; color: white; } </style> </head> <body> <div class="tablo"> <table> <tr> <th>Ad</th> <th>Soyad</th> <th>Yabancı Dil</th> <th>Puan</th> <th>Puan</th> <th>Puan</th> <th>Puan</th> <th>Puan</th> <th>Puan</th> <th>Puan</th> </tr> <tr> <td>Hakan</td> <td>KİRACI</td> <td>İngilizce</td> <td>10</td> <td>10</td> <td>10</td> <td>10</td> <td>10</td> <td>10</td> <td>10</td> </tr> <tr> <td>Tuncay</td> <td>TUNCER</td> <td>Almanca</td> <td>20</td> <td>20</td> <td>20</td> <td>20</td> <td>20</td> <td>20</td> <td>20</td> </tr> </table> </div> </body> </html> |
Bir HTML tablosunun görünümü CSS ile büyük ölçüde geliştirilebilir.
[…] CSS Tablo Düzenleme […]
Guzel aslinda