Yazar: merhaba arkadaşlar.
html kategorisinde html tablolar konusuna değinmiştim. bu yazımda detaylı ve html 5 standartlarında sizlere anlatacağım.
tablo mantığını bildiğinizi tahmin ederek konuya başlayacağım.
eğer html tabloları hakkında bilgiler edinmek isterseniz, html kategorisini ziyaret ederek oradaki yazılarıma göz atabilirsiniz.
evet arkadaşlar bu yazımda html 5 teknolojisi kullanarak nasıl tablo oluşturabiliriz. gelin birlikte ona bakalım.
kullanacağım tagları sizlere tek tek açıklayarak yazıma başlayacağım.
genel olarak kısa bir bilgi vererek işye başlayalım ne dersiniz.
html tablosu oluştururken temel olarak kullandığımız taglara bakalım ondan sonra html 5 tablo taglarına bakabiliriz.
<table>..</table>
bu tablomuzu oluşturan temel tagdır. tablo oluştururken tüm tagları yazmadan önce bu tagı açarız ve işimiz bitincede kapatırız.
<tr>..</tr>
bu tagımız ile tabloların satırlarını belirtiriz. tablolarda kaçtane satır oluşturacaksak bu tagı tekrar tekrar kullanacağız.
<td>..</td>
bu tag ile tablomuzun sütunlarını belirtiyoruz. bu tagımız <tr> tagı kapanmadan yazılırlar.
yukarıdaki kodları kullanarak küçük bir örnek yapalım.
örnek:
<table>
<tr>
<td> 1 </td>
</tr>
</table>
evet arkadaşlar burada basit bir örnek oluşturmak istedim bu örnekte satır ve sütunları nasıl kullandığımı inceleyebilirsiniz.
genel olarak temel tablo taglarını tekrar ettik artık. html 5 için tablo mantığına geçebiliriz.
<thead> tablomuzdaki konu başlıklarının yer aldığı <th> etiketlerini kapsar.
<tbody> tablodaki asıl içeriği belirtir.
<tfoot> tablonun içeriklerinin hesaplanıp özetlendiği son satırını oluşturur.
<col>, column yani sütun kelimesinin kısaltmasıdır. Tablodaki sütunlara stil vermek için kullanılır.
Birden fazla sütuna stil vermek içinse <colgroup> etiketini kullanmalıyız.
<caption> etiketi ile tablonun açıklamasını ya da tanımlamasını yazabiliriz.
Aşağıdaki örnekte tüm bu açıklamaları daha detaylı görebilirsiniz.
örnek:
<table border=”1″ cellpadding=”5″>
<caption>Aylık Hasılat</caption>
<colgroup>
<col style=”background-color:skyblue;”> <!– Gök mavisi –>
<col style=”background-color:lightgreen”> <!– Açık yeşil –>
<col style=”background-color:violet”> <!– Eflatun –>
</colgroup>
<thead>
<tr>
<th>Ay</th>
<th>Gelir</th>
<th>Gider</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ocak</td>
<td>100 TL</td>
<td>20 TL</td>
</tr>
<tr>
<td>Şubat</td>
<td>80 TL</td>
<td>10 TL</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Toplam</td>
<td>180 TL</td>
<td>30 TL</td>
</tr>
</tfoot>
</table>
cellpadding atfı tablonun iç hücre boşluğunu belirtmektedir. Örnekte 5px hücre içi boşluğu verilmiştir.
tablolarda hücre birleştirme.
bazı durumlarda hücreleri birleştirme ihtiyacı hissedebiliriz.
gerekli durumlarda tablolarda hücreleri birleştirmek için, colspan ve rowspan taglarını kullanabiliriz.
colspan tagı ile sütunları birleştirebiliriz.
rowspan tagı ile satırları bileştirebiliriz.
bir örnek ile sizlere açıklayalım.
örnek:
<!doctype html>
<html>
<title> html tablo örneği bir </title>
</head>
<body>
<h1> html tablo örneği 1 </h1>
<div>
<p>
html 5 ile hazırlanmış ilk tablo örneğimizdir.
</p>
</div>
<table border=”1″ cellpadding=”5″>
<tr>
<th>kullanıcı adı</th>
<td>sadık özdoğan</td>
</tr>
<tr>
<th colspan=”2″>e-Posta</th>
<td>sadikefsane.06@gmail.com</td>
</tr>
<tr>
<td>ozdogantasarim@gmail.com</td>
</tr>
</table>
</body>
</html>
örnek2:
<!doctype html>
<html>
<head>
<title> tablo örneği </title>
</head>
<body>
<h1> html 5 tablo yapımı </h1>
<div>
<p>
En gelişmiş tablo örneğidir.
</p>
</div>
<table border=”1″ cellpadding=”5″>
<tr>
<th>kullanıcı adı</th>
<td>sadık özdoğan</td>
</tr>
<tr>
<th rowspan=”2″>e-Posta</th>
<td>sadikefsane.06@gmail.com</td>
</tr>
<tr>
<td>ozdogantasarim@gmail.com</td>
</tr>
</table>
</body>
</html>
Bu örneğimizde html 5 ile tablo kullanımını pekiştirmiş oluyoruz.
not: html 5 ile geliştirilen <div> etiketinin kullanımı günümüzde <table> etiketinin etkisini azaltmış olsada tablo kullanımını bilmeniz gerekmektedir.
html 5 ile ilgili kafanıza takılan tüm sorularınızı ve sorunlarızı yorum olarak bana iletebilirsiniz.
iyi bloglamalar herkese.
Bir önceki yazımız olan önemli html 5 etiketleri ve kullanımı başlıklı makalemizde button, code ve html 5 sadık özdoğan hakkında bilgiler verilmektedir.