html 5 tablolar | FARKLI TARZ FARKLI İMAJ
Kapat

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ştururuken 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şturken tüm tagları yazmadan önce öncelikle 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:

<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>

örnek2:

<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>
evet arkadaşlar html 5 ile tabloyu bu şekilde daha gelişmiş şekilde kullanabiliriz.
sorularınızı sormak için yazımın altına yorumlarınızı yazabilirsiniz.
başka bir yazıda görüşmek üzre.
iyi bloglamalar.

Bir önceki yazımız olan head etiketleri başlıklı makalemizde head, html 5 ve link hakkında bilgiler verilmektedir.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*

code


Kapat