HTML’de Tablo Oluşturma
HTML tabloları, verileri satır (row) ve sütun (column) düzeninde organize etmek için kullanılır. Tablolar, özellikle düzenli bilgi sunumunda oldukça etkili bir yapıdır. Zaten, HTML ile tablo oluştururken tıpkı Excel’deki gibi satırlar ve sütunlardan oluşan aşağıdaki gibi bir ızgara hayal etmeniz gerekir. Bakınız:
Ad | Soyad | Meslek |
Brad | Pitt | Aktör |
Warren | Buffett | İş adamı |
Lionel | Messi | Futbolcu |
Michael | Jordan | Basketbolcu |
HTML’de tabloları oluşturmak için kullanılan temel etiketler aşağıda gösterilmiştir:
<table>
: İsmini İngilizcedeki “table” (tablo) kelimesinden alır. Tabloyu başlatır ve içindeki tüm satır ve hücreleri kapsar. Verileri düzenli bir şekilde göstermek için kullanılan ana yapıdır.<tr>
: İsmini İngilizcedeki “table row” (tablo satırı) ifadesinden alır. Tablo içinde bir satır oluşturmak için kullanılır. Tablodaki her satırı temsil eder ve bu satırların içine hücreler eklenir.<td>
: İsmini İngilizcedeki “table data” (tablo verisi) ifadesinden alır. Tabloda bir veri hücresini oluşturmak için kullanılır. Hücrelerin içine veri, metin veya diğer içerikler yerleştirilebilir.<th>
: İsmini İngilizcedeki “table header” (tablo başlığı) ifadesinden alır. Tablo başlık hücrelerini oluşturmak için kullanılır. Başlık hücreleri sütun başlıklarını ifade eder ve yazılar varsayılan olarak kalın ve ortalanmış şekilde görünür.<caption>
: İsmini İngilizcedeki “caption” (başlık, açıklama) kelimesinden alır. Tabloya bir başlık veya açıklama eklemek için kullanılır. Bu başlık genelde tablonun üst kısmında görüntülenir ve tabloyu tanımlamak için kullanılır.<thead>
: İsmini İngilizcedeki “table head” (tablo başlığı) ifadesinden alır. Tablo başlıklarını bir grup olarak tanımlar ve<th>
etiketleri ile birlikte kullanılır. Büyük tabloların düzenli bir yapıya kavuşmasına yardımcı olur.<tbody>
: İsmini İngilizcedeki “table body” (tablo gövdesi) ifadesinden alır. Tablo gövdesini, yani ana veri kısmını bir grup olarak tanımlar. Tablodaki asıl verilerin yer aldığı bölümdür.<tfoot>
: İsmini İngilizcedeki “table footer” (tablo alt bilgisi) ifadesinden alır. Tablo alt bilgisini oluşturmak için kullanılır.
<table border="1" style="border-collapse: collapse; width: 80%; margin: 20px auto; text-align: center;">
<caption style="font-size: 1.5em; font-weight: bold; margin-bottom: 10px;">Sınıf Ders Notları</caption>
<thead style="background-color: #f2f2f2;">
<tr>
<th>Öğrenci Adı</th>
<th>Matematik</th>
<th>Fizik</th>
<th>Kimya</th>
<th>Ortalama</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mehmet Yılmaz</td>
<td>90</td>
<td>85</td>
<td>88</td>
<td>87.7</td>
</tr>
<tr>
<td>Ayşe Demir</td>
<td>75</td>
<td>80</td>
<td>82</td>
<td>79.0</td>
</tr>
<tr>
<td>Ali Çelik</td>
<td>60</td>
<td>70</td>
<td>65</td>
<td>65.0</td>
</tr>
</tbody>
<tfoot style="background-color: #f9f9f9;">
<tr>
<td colspan="4" style="font-weight: bold;">Sınıf Ortalaması</td>
<td>77.2</td>
</tr>
</tfoot>
</table>
HTML Tablo Öznitelikleri
HTML’de tablolar sadece veriyi düzenlemekle kalmaz, aynı zamanda görsel olarak da dikkat çekici hale getirilebilir. Tablo öznitelikleri, tablonun görünümünü ve düzenini kolayca kontrol etmemizi sağlar. Sık kullanılan öznitelikler ve ne işe yaradıkları maddeler halinde gösterilmiştir:
border
: Tabloya kenarlık ekler.- Değerler:
0
: Kenarlık yok.1
ve üzeri: Kenarlık kalınlığını belirler.
- Kullanımı:
<table border="1">
- Değerler:
cellpadding
: Hücre içindeki içerik ile hücre kenarı arasındaki boşluğu ayarlar.- Değerler: Piksel cinsinden sayılar (örneğin,
10
,15
). - Kullanımı:
<table cellpadding="10">
- Değerler: Piksel cinsinden sayılar (örneğin,
cellspacing
: Hücreler arasındaki boşluğu ayarlar.- Değerler: Piksel cinsinden sayılar (örneğin,
5
,10
). - Kullanımı:
<table cellspacing="5">
- Değerler: Piksel cinsinden sayılar (örneğin,
width
: Tablo genişliğini belirler.- Değerler: Piksel (
px
) veya yüzde (%
) olarak tanımlanabilir (örneğin,600px
,80%
). - Kullanımı:
<table width="80%">
- Değerler: Piksel (
height
: Tablo yüksekliğini belirler.- Değerler: Piksel (
px
) veya yüzde (%
) olarak tanımlanabilir (örneğin,400px
,50%
). - Kullanımı:
<table height="300px">
- Değerler: Piksel (
align
: Tabloyu yatay olarak hizalar. (Modern HTML’de önerilmez.)- Değerler:
left
: Tabloyu sola hizalar.center
: Tabloyu ortalar.right
: Tabloyu sağa hizalar.
- Kullanımı:
<table align="center">
- Değerler:
bgcolor
: Tablo veya hücrelerin arka plan rengini ayarlar. (Modern HTML’de CSS kullanılması önerilir.)- Değerler: Renk adları (örneğin,
red
,blue
) veya HEX renk kodları (örneğin,#f2f2f2
). - Kullanımı:
<table bgcolor="#f2f2f2">
- Değerler: Renk adları (örneğin,
summary
: Tablo içeriğini açıklayan bir metin ekler.- Değerler: Serbest metin (örneğin,
"Bu tablo öğrenci notlarını içerir."
). - Kullanımı:
<table summary="Bu tablo öğrenci notlarını içerir.">
- Değerler: Serbest metin (örneğin,
frame
: Tablo kenarlıklarının hangi taraflarının görüneceğini belirler.- Değerler:
void
: Kenarlık yok.above
: Sadece üst kenarlık.below
: Sadece alt kenarlık.hsides
: Yatay kenarlıklar (üst ve alt).vsides
: Dikey kenarlıklar (sol ve sağ).box
: Tüm kenarlıklar.border
: Varsayılan kenarlık.
- Kullanımı:
<table frame="box">
- Değerler:
rules
: Hücreler arasındaki çizgilerin nasıl görüneceğini belirler.- Değerler:
none
: Hiçbir çizgi yok.groups
: Grup sınırları.rows
: Yatay çizgiler.cols
: Dikey çizgiler.all
: Tüm çizgiler.
- Kullanımı:
<table rules="rows">
- Değerler:
style
: Tabloya CSS ile görsel özellikler ekler.- Değerler: CSS özellik ve değerleri (örneğin,
border: 1px solid black;
). - Kullanımı:
<table style="border: 1px solid black; width: 100%;">
- Değerler: CSS özellik ve değerleri (örneğin,
id
veclass
: Tabloya kimlik veya sınıf tanımlar.- Değerler:
id
: Benzersiz bir kimlik (örneğin,"tablo1"
).class
: Bir veya birden fazla sınıf adı (örneğin,"veriTablosu"
).
- Kullanımı:
<table id="tablo1" class="veriTablosu">
- Değerler:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tablo Öznitelikleri Örneği</title>
<style>
/* Alternatif: CSS ile arka plan rengi */
.custom-table {
background-color: #f9f9f9; /* Arka plan rengi */
border: 2px solid #000; /* Tablo kenarlığı */
width: 80%; /* Tablo genişliği */
margin: 20px auto; /* Sayfa ortalama */
}
th, td {
text-align: center; /* Hücre içeriği ortalanır */
padding: 10px; /* Hücre içindeki boşluk */
}
</style>
</head>
<body>
<!-- Tablo Başlangıcı -->
<table
border="1" <!-- Tablo kenarlık kalınlığını belirler -->
cellpadding="10" <!-- Hücre içi boşluğu 10px olarak ayarlar -->
cellspacing="5" <!-- Hücreler arasındaki boşluğu 5px yapar -->
width="80%" <!-- Tablo genişliğini yüzde 80 olarak ayarlar -->
summary="Bu tablo sınıfın not bilgilerini içerir." <!-- Erişilebilirlik için tablo açıklaması -->
class="custom-table"> <!-- CSS ile özelleştirme için sınıf ataması -->
<!-- Tablo Başlığı -->
<caption style="font-weight: bold; font-size: 1.2em;">Sınıf Not Bilgileri</caption>
<!-- Tablo Başlıkları -->
<thead style="background-color: #ccc;"> <!-- Thead, tablo başlıklarını gruplar -->
<tr>
<th>Ad</th> <!-- Sütun başlıkları -->
<th>Soyad</th>
<th>Matematik</th>
<th>Türkçe</th>
</tr>
</thead>
<!-- Tablo Gövdesi -->
<tbody>
<tr>
<td>Ali</td>
<td>Yılmaz</td>
<td>85</td>
<td>90</td>
</tr>
<tr>
<td>Ayşe</td>
<td>Demir</td>
<td>78</td>
<td>88</td>
</tr>
</tbody>
<!-- Tablo Alt Bilgisi -->
<tfoot style="background-color: #eee;"> <!-- Tfoot, tablo alt bilgisini gruplar -->
<tr>
<td colspan="2">Sınıf Ortalaması</td> <!-- Hücre birleştirme -->
<td>81.5</td>
<td>89</td>
</tr>
</tfoot>
</table>
</body>
</html>