HTML, web tasarımının temel yapı taşlarından biridir ve tablolar, web sayfalarında verileri düzenlemek ve sunmak için sıkça kullanılan bir HTML öğesidir. Bu makalede, HTML tablo örneklerini inceleyeceğiz ve nasıl oluşturulacaklarına dair detaylı bilgiler sunacağız. Ayrıca, her örneğin kodlarını ve ekran görüntülerini paylaşarak, uygulamalı bir şekilde öğrenmenizi sağlayacağız.
Ayrıca Tüm HTML Derslerimize BURADAN ulaşabilirsiniz.
İçerik Rehberi
1. Basit HTML Tablo Örnekleri
HTML tablolarını oluşturmanın en temel hali, basit bir tablo oluşturmaktır. Bu tabloda, belirli sayıda satır ve sütun bulunur ve her hücreye veriler yerleştirilir. Html tablo örnekleri kapsamında aşağıda basit bir tablo oluşturulmuştur:
<table>
<tr>
<th>İsim</th>
<th>Soyisim</th>
<th>Yaş</th>
</tr>
<tr>
<td>Ahmet</td>
<td>Yılmaz</td>
<td>25</td>
</tr>
<tr>
<td>Ali</td>
<td>Demir</td>
<td>30</td>
</tr>
</table>
Yukarıdaki kodu incelediğinizde, <table> etiketi ile bir tablo oluşturulduğunu ve <tr> etiketi ile her bir satırın tanımlandığını göreceksiniz. Satırların içindeki hücreler <th> (başlık hücresi) veya <td> (veri hücresi) etiketleriyle belirtilir. Başlık hücreleri genellikle kalın ve ortalanmış olarak görüntülenirken, veri hücreleri normal şekilde görüntülenir.
Bu örnekte, tabloda iki başlık hücresi (İsim, Soyisim ve Yaş) ve iki satır hücresi (Ahmet, Yılmaz, 25 ve Ali, Demir, 30) bulunmaktadır. HTML tablo örnekleri kapsamında ilk basit örneğimizi hayata geçirmiş olduk.
2. Satır ve Sütun Birleştirme
HTML tablolarında, satır ve sütunları birleştirerek daha karmaşık yapılar oluşturabilirsiniz. Bu özelliği kullanarak, tablonun daha düzenli ve okunabilir olmasını sağlayabilirsiniz. Aşağıdaki html tablo örnekleri inceleyelim:
Satır Birleştirme (rowspan)
Satır birleştirme işlemi, rowspan özelliği ile gerçekleştirilir. Bu özellik, bir hücreyi birden fazla satıra genişletebilmenizi sağlar. Html tablo örneklerini incelerken rowspan özelliğine de göz atmamız gerekiyor. Örneğin:
<table>
<tr>
<th>İsim</th>
<th>Soyisim</th>
<th>Hobi</th>
</tr>
<tr>
<td rowspan="2">Ahmet</td>
<td>Yılmaz</td>
<td rowspan="2">Futbol</td>
</tr>
<tr>
<td>Demir</td>
</tr>
</table>
Yukarıdaki örnekte, Ahmet hücresi rowspan="2" özelliğiyle iki satıra genişletilmiştir. Bu sayede, tabloda ilk satırda Ahmet hücresinin altında sadece Yılmaz hücresi görünürken, ikinci satırda Ahmet hücresinin altında Demir hücresi ve Futbol hücresi görüntülenir.
Sütun Birleştirme (colspan)
Sütun birleştirme işlemi ise colspan özelliği ile gerçekleştirilir. Bu özellik, bir hücreyi birden fazla sütuna genişletebilmenizi sağlar. Örneğin:
<table>
<tr>
<th colspan="2">İsim</th>
<th>Hobi</th>
</tr>
<tr>
<td>Ahmet</td>
<td>Yılmaz</td>
<td>Futbol</td>
</tr>
</table>
Yukarıdaki örnekte, İsim başlık hücresi colspan="2" özelliğiyle iki sütuna genişletilmiştir. Bu sayede, tabloda ilk satırda İsim hücresi yan yana iki sütunu kaplarken, ikinci satırda Ahmet, Yılmaz ve Futbol hücreleri görüntülenir.
3. Tabloya Başlık Eklemek
Tabloları daha anlaşılır hale getirmek için başlık eklemek önemlidir. Başlık hücreleri, tablonun içeriğini tanımlayan ve sıralayan etiketlerdir. Html tablo örnekleri yaparken sizin de tablonuza isim koymanız anlaşılırlığını artıracaktır. Aşağıdaki örnekte, tabloya başlık eklemek nasıl yapılır görelim:
<table>
<caption>Öğrenci Bilgileri</caption>
<tr>
<th>İsim</th>
<th>Soyisim</th>
<th>Yaş</th>
</tr>
<tr>
<td>Ahmet</td>
<td>Yılmaz</td>
<td>25</td>
</tr>
<tr>
<td>Ali</td>
<td>Demir</td>
<td>30</td>
</tr>
</table>
Yukarıdaki örnekte, <caption> etiketi kullanılarak tabloya başlık (Öğrenci Bilgileri) eklenmiştir. Bu başlık, tablonun üzerinde görüntülenir ve tablonun içeriğini tanımlar.
4. Tabloya Renk Eklemek
Tablolara renk eklemek, web sayfalarının daha çekici ve görsel olarak etkileyici olmasını sağlar. Her ne kadar HTML Tablo örneklerini inceliyor olsak da biraz CSS tablolarımıza estetik katacaktır. HTML’de tablolara renk eklemek için CSS kullanabilirsiniz. Aşağıdaki örnekte, tabloya renk eklemek nasıl yapılır görelim:
<style>
table {
background-color: lightgray;
border-collapse: collapse;
}
th, td {
padding: 10px;
border: 1px solid black;
}
th {
background-color: gray;
color: white;
}
td {
background-color: white;
}
</style>
<table>
<tr>
<th>İsim</th>
<th>Soyisim</th>
<th>Yaş</th>
</tr>
<tr>
<td>Ahmet</td>
<td>Yılmaz</td>
<td>25</td>
</tr>
<tr>
<td>Ali</td>
<td>Demir</td>
<td>30</td>
</tr>
</table>
Yukarıdaki örnekte, <style> etiketi kullanılarak CSS kodları tanımlanmıştır. Tablo arkaplan rengi (background-color) lightgray olarak ayarlanmış, hücrelerin içi (padding) ve kenarları (border) belirli bir stil uygulanmıştır. Başlık hücrelerinin arkaplan rengi (background-color) gray, yazı rengi (color) ise white olarak belirlenmiştir.
5. İç-içe Tablolar
HTML tabloları iç içe yuvalanabilir. Bu, bir tablo içinde başka bir tablo yerleştirerek daha karmaşık yapılar oluşturmanızı sağlar. Bu özelliği de kullanarak HTML tablo örnekleri çalışmamız faydalı olacaktır. Aşağıdaki örnekte, iç içe tabloları nasıl kullanabileceğimizi görelim:
<table>
<tr>
<th>Öğrenci</th>
<th>Dersler</th>
</tr>
<tr>
<td>
<table>
<tr>
<th>İsim</th>
<th>Soyisim</th>
</tr>
<tr>
<td>Ahmet</td>
<td>Yılmaz</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<th>Ders</th>
<th>Not</th>
</tr>
<tr>
<td>Matematik</td>
<td>90</td>
</tr>
</table>
</td>
</tr>
</table>
Yukarıdaki örnekte, bir tablonun içinde iki ayrı tablo yer almaktadır. İlk tablo, Öğrenci ve Dersler başlıklarından oluşurken, ikinci tablo İsim ve Soyisim başlıklarını ve ilgili verileri içermektedir. Bu şekilde, iç içe tablolar kullanarak daha karmaşık veri yapıları oluşturabilirsiniz.
6. Kayan Tablolar
Eğer tablonuz çok büyükse ve ekranın sığdıramayacağı kadar genişse, kayan tablolar kullanabilirsiniz. Kayan tablolar, tablonun belirli bir boyutla sınırlı kalmasını ve yatay ve dikey kaydırma çubuklarıyla görüntülenmesini sağlar. Aşağıdaki örnekte, kayan tabloları nasıl oluşturabileceğimizi görelim:
<style>
.table-container {
max-width: 500px;
overflow: auto;
}
</style>
<div class="table-container">
<table>
<tr>
<th>İsim</th>
<th>Soyisim</th>
<th>Yaş</th>
</tr>
<tr>
<td>Ahmet</td>
<td>Yılmaz</td>
<td>25</td>
</tr>
<!-- diğer veriler -->
</table>
</div>
Yukarıdaki örnekte, .table-container adında bir CSS sınıfı tanımlanmış ve maksimum genişliği (max-width) 500px olarak ayarlanmıştır. Bu sınıf tabloyu sarmalayarak, içerisindeki tablonun belirli bir boyutla sınırlı kalmasını sağlar. Eğer tablonun içeriği bu boyutu aşarsa, yatay ve dikey kaydırma çubukları görüntülenir ve tüm verilere erişim sağlanır.
7. Yatay ve Dikey Hizalama
HTML tablolarında, hücre içeriğini yatay ve dikey olarak hizalayabilirsiniz. Bu, tablonun daha düzenli ve estetik görünmesini sağlar. HTML Tablo örnekleri çalışırken html tablo hizalama yapmak isteyebilirsiniz. Aşağıdaki örnekte, yatay ve dikey hizalama örneklerini inceleyelim:
HTML Tablo Örnekleri : Yatay Hizalama (align)
<table>
<tr>
<th align="left">İsim</th>
<th align="center">Soyisim</th>
<th align="right">Yaş</th>
</tr>
<tr>
<td align="left">Ahmet</td>
<td align="center">Yılmaz</td>
<td align="right">25</td>
</tr>
</table>
Yukarıdaki örnekte, align özelliği kullanılarak hücre içeriklerinin yatay hizalaması belirlenmiştir. left (sol), center (ortala) ve right (sağ) değerleriyle hücre içeriği ilgili hizaya göre yerleştirilir.
HTML Tablo Örnekleri : Dikey Hizalama (valign)
<table>
<tr>
<th valign="top">İsim</th>
<th valign="middle">Soyisim</th>
<th valign="bottom">Yaş</th>
</tr>
<tr>
<td valign="top">Ahmet</td>
<td valign="middle">Yılmaz</td>
<td valign="bottom">25</td>
</tr>
</table>
Yukarıdaki örnekte, valign özelliği kullanılarak hücre içeriklerinin dikey hizalaması belirlenmiştir. top (üst), middle (ortala) ve bottom (alt) değerleriyle hücre içeriği ilgili hizaya göre yerleştirilir.
8. Tablodaki Verilere Bağlantı Vermek
HTML tablolarında, tablodaki verilere bağlantılar ekleyebilirsiniz. Bu, kullanıcıların belirli bir hücreye tıkladıklarında başka bir sayfaya yönlendirilebilmelerini sağlar. HTML Tablo örnekleri üzerinde verilere nasıl bağlantı ekleyebileceğimizi görelim:
<table>
<tr>
<th>Ülke</th>
<th>Başkent</th>
</tr>
<tr>
<td><a href="https://tr.wikipedia.org/wiki/T%C3%BCrkiye" target="_blank">Türkiye</a></td>
<td><a href="https://tr.wikipedia.org/wiki/Ankara" target="_blank">Ankara</a></td>
</tr>
<tr>
<td><a href="https://en.wikipedia.org/wiki/United_States" target="_blank">United States</a></td>
<td><a href="https://en.wikipedia.org/wiki/Washington,_D.C." target="_blank">Washington, D.C.</a></td>
</tr>
</table>
Yukarıdaki örnekte, <a> etiketi kullanılarak hücre içerisindeki verilere bağlantı eklenmiştir. href özelliği ile hedef sayfanın adresi belirtilirken, target="_blank" özelliğiyle bağlantının yeni bir sekmede açılması sağlanır.
9. Tablodaki Verilere Stil Uygulamak
HTML tablolarında, tablodaki verilere stil uygulayarak daha çekici ve estetik görünmelerini sağlayabilirsiniz. Bu, CSS kullanarak gerçekleştirilir. Aşağıdaki örnekte, tablodaki verilere nasıl stil uygulayabileceğimizi görelim:
<style>
table {
border-collapse: collapse;
}
th, td {
padding: 10px;
border: 1px solid black;
}
th {
background-color: lightgray;
color: black;
}
td {
background-color: white;
color: black;
}
</style>
<table>
<tr>
<th>Ülke</th>
<th>Başkent</th>
</tr>
<tr>
<td>Türkiye</td>
<td>Ankara</td>
</tr>
<tr>
<td>United States</td>
<td>Washington, D.C.</td>
</tr>
</table>
Yukarıdaki örnekte, <style> etiketi kullanılarak CSS kodları tanımlanmıştır. Tablonun kenarlık kalınlığı (border-collapse) collapse olarak ayarlanmış ve hücre içeriğine (padding) ve kenarlık (border) belirli bir stil uygulanmıştır. Başlık hücrelerinin arkaplan rengi (background-color) lightgray, yazı rengi (color) ise black olarak belirlenmiştir. Veri hücrelerinin arkaplan rengi (background-color) white, yazı rengi (color) ise black olarak ayarlanmıştır.
10. Tablo Kenarlıklarını Özelleştirmek
HTML tablolarında, tablonun kenarlık özelliklerini özelleştirerek istediğiniz şekilde görüntüleyebilirsiniz. Bu, CSS kullanarak gerçekleştirilir. Aşağıdaki örnekte, tablo kenarlıklarını nasıl özelleştirebileceğimizi görelim:
<style>
table {
border-collapse: collapse;
}
th, td {
padding: 10px;
border: 2px solid black;
}
th {
background-color: lightgray;
color: black;
}
td {
background-color: white;
color: black;
}
</style>
<table>
<tr>
<th>Ülke</th>
<th>Başkent</th>
</tr>
<tr>
<td>Türkiye</td>
<td>Ankara</td>
</tr>
<tr>
<td>United States</td>
<td>Washington, D.C.</td>
</tr>
</table>
Yukarıdaki örnekte, <style> etiketi kullanılarak CSS kodları tanımlanmıştır. Tablonun kenarlık kalınlığı (border-collapse) collapse olarak ayarlanmış ve hücre içeriğine (padding) ve kenarlık (border) belirli bir stil uygulanmıştır. Başlık hücrelerinin arkaplan rengi (background-color) lightgray, yazı rengi (color) ise black olarak belirlenmiştir. Veri hücrelerinin arkaplan rengi (background-color) white, yazı rengi (color) ise black olarak ayarlanmıştır. Kenarlık kalınlığı (border) ise 2px olarak belirlenmiştir.
11. Responsive Tablolar Oluşturmak
HTML tablolarını responsive hale getirerek, mobil cihazlarda daha iyi bir kullanıcı deneyimi sağlayabilirsiniz. Responsive tablolar, ekran boyutuna göre otomatik olarak uyum sağlar ve kolayca okunabilir hale gelir. HTML tablo örnekleri yaparken en çok ilgi çekecek konulardan biri de HTML responsive tablolardır. Aşağıdaki örnekte, responsive tabloları nasıl oluşturabileceğimizi görelim:
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 10px;
border: 1px solid black;
}
th {
background-color: lightgray;
color: black;
}
td {
background-color: white;
color: black;
}
@media screen and (max-width: 600px) {
table, tr, th, td {
display: block;
}
th {
text-align: left;
}
}
</style>
<table>
<tr>
<th>Ülke</th>
<th>Başkent</th>
</tr>
<tr>
<td>Türkiye</td>
<td>Ankara</td>
</tr>
<tr>
<td>United States</td>
<td>Washington, D.C.</td>
</tr>
</table>
Yukarıdaki örnekte, <style> etiketi kullanılarak CSS kodları tanımlanmıştır. Tablonun genişliği (width) %100 olarak ayarlanmış ve hücre içeriğine (padding) ve kenarlık (border) belirli bir stil uygulanmıştır. Başlık hücrelerinin arkaplan rengi (background-color) lightgray, yazı rengi (color) ise black olarak belirlenmiştir. Veri hücrelerinin arkaplan rengi (background-color) white, yazı rengi (color) ise black olarak ayarlanmıştır.
Ayrıca, @media sorgusu kullanılarak ekran boyutuna göre stil değişiklikleri yapılmıştır. Eğer ekran boyutu 600px veya daha küçükse, tablo ve tablodaki öğeler (tr, th, td) blok olarak görüntülenir ve başlık hücreleri sola hizalanır.
12. Tablo Verilerini Sıralamak
HTML tablolarında, tablodaki verileri sıralayabilirsiniz. Bu, JavaScript kullanarak gerçekleştirilir. Aşağıdaki örnekte, tablo verilerini nasıl sıralayabileceğimizi görelim:
<script>
function sortTable(n) {
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
table = document.getElementById("myTable");
switching = true;
dir = "asc";
while (switching) {
switching = false;
rows = table.rows;
for (i = 1; i < (rows.length - 1); i++) {
shouldSwitch = false;
x = rows[i].getElementsByTagName("TD")[n];
y = rows[i + 1].getElementsByTagName("TD")[n];
if (dir == "asc") {
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
shouldSwitch = true;
break;
}
} else if (dir == "desc") {
if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
shouldSwitch = true;
break;
}
}
}
if (shouldSwitch) {
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
switchcount++;
} else {
if (switchcount == 0 && dir == "asc") {
dir = "desc";
switching = true;
}
}
}
}
</script>
<table id="myTable">
<tr>
<th onclick="sortTable(0)">Ülke</th>
<th onclick="sortTable(1)">Başkent</th>
</tr>
<tr>
<td>Türkiye</td>
<td>Ankara</td>
</tr>
<tr>
<td>United States</td>
<td>Washington, D.C.</td>
</tr>
</table>
Yukarıdaki örnekte, <script> etiketi kullanılarak JavaScript kodları tanımlanmıştır. sortTable() fonksiyonu, parametre olarak sıralama yapılacak sütunun indeksini (n) alır. Fonksiyon, tablonun verilerini sıralamak için bir algoritma kullanır. Sıralama türü (asc veya desc) ve sıralama işlemi yönlendirilirken (shouldSwitch) belirli kontroller yapılarak, verilerin sıralanması sağlanır.
Tabloda sıralama yapılmasını istediğiniz sütunun başlık hücresine onclick özelliği eklenmiştir. Bu sayede, kullanıcı başlık hücresine tıkladığında, ilgili sütuna göre tablonun verileri sıralanır.
Bu makalede, HTML tablo örneklerini detaylı bir şekilde inceledik. Basit tablolar oluşturma, satır ve sütun birleştirme, başlık ekleme, renk ekleme, iç içe tablolar, kayan tablolar, hizalama, bağlantılar, stil uygulama, tablo kenarlıklarını özelleştirme, responsive tablolar ve veri sıralama gibi konuları ele aldık. HTML tablo örneklerini kullanarak verileri düzenlemek ve sunmak daha kolay ve etkili hale gelecektir.
İçeriklerimiz için ciddi emek sarfediyoruz ve kaliteli olmaları için iyi bir performans gösteriyoruz. İçeriğimizden faydalandıysanız yorum bırakabilir ya da içeriği ilgili kişilerle paylaşabilirsiniz.
