Html table, bu makalemizde çok sık kullanılan html elementlerinden biri olan html table elementini örnekler ile beraber incelemiş olacağız.
HTML Table Elementi ve Kullanımı
Basit bir table yapısı
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <table> <thead> <tr> <th>Ay</th> <th>Giderler</th> </tr> </thead> <tbody> <tr> <td>Ocak</td> <td>100TL</td> </tr> </tbody> </table> |
- Table yapısının temelini oluşturmak için gerekli olan <table></table> etiketlerini açıp kapattık.
- Table başlıklarını belirtmek için <th> (Table Head – Tablo Başlığı) elementini kullanıyoruz ve th elementlerini tr elementi arasında tanımlamamız gerekiyor seo açısında th etikerlerinin yer aldığı tr elementinin <thead> etiketleri arasında tanımlanması önerilmektedir ama <thead> etiketi opsiyonel’dir tanımlamasanız da görsel bir değişiklik olmayacaktır son kullanıcı tarafında.
- Satır tanımlama elementi olan <tr> elementlerini <tbody> elementi arasına alıyoruz. <tbody> elementi opsiyoneldir tanımlamasanız da son kullanıcı tarafında bir şey değişmeyecektir ama seo açısında önerilen yöntem <tbody> elementinin tanımlanması ve tr elementlerinin bu etiket arasına alınmasıdır.
- Table içerisinde her bir satırın gösterimini sağlamak için <tr> etiketlerini oluşturduk <tr> etiketinin ingilizce açılımı Table Row olarak geçmektedir ve türkçe tablo satırı anlamına gelmektedir.
Sonuç
Colgroup Etiketi ve Kullanımı
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 | <table> <colgroup> <col span="2" style="background-color:red" /> <col style="background-color:yellow" /> </colgroup> <thead> <tr> <th>Kod</th> <th>Başlık</th> <th>Fiyat</th> </tr> </thead> <tbody> <tr> <td>3476896</td> <td>İlk HTML</td> <td>53TL</td> </tr> <tr> <td>5869207</td> <td>İlk CSS</td> <td>49TL</td> </tr> </tbody> </table> |
Bir üstteki basit table yapısına ek olarak <colgroup> elementini tanımladık <colgroup> elementinin amacı table satır ve sütunlarını merkezi olarak bir yerden stillendirmek. <colgroup> elementlerine tanımladığımız her bir <col> elementi tablodaki her bir sütunu temsil etmektedir ama yukarıdan aşağıya tüm satırları etkileyecek şekilde aynı sütunun tüm satırlarını etkilemektedir.
Eğer soldan sağa birden fazla sütunu tek <col> etiketi ile etkilemek isterseniz span adındaki attribute kullanılarak soldan sağa etkileyeceği sütun sayısı belirlenmelidir.
Sonuç
<tfoot> etiketi ve kullanımı
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <table> <thead> <tr> <th>Ay</th> <th>Giderler</th> </tr> </thead> <tbody> <tr> <td>Ocak</td> <td>100TL</td> </tr> <tr> <td>Şubat</td> <td>80TL</td> </tr> </tbody> <tfoot> <tr> <td>Toplam</td> <td>180tl</td> </tr> </tfoot> </table> |
<tfoot> adlı html elementinin yaptığı olay tam olarak şudur; excel uygulamasında sık kullandığımız özelliklerden biri olan sütunlardaki tüm değerlerin en alt kısımlarda toplamını, ortalamasını yada farklı hesaplamalarını tek bir satırda göstermemize imkan sunan bu özelliği tfoot sayesinde html table elementinde de kullanmamıza imkan sunuyor aslında baktığımızda tr elementi oluşturmaktan başka bir şey yapmıyoruz ama thead, tbody ve tfoot elementlerinin hem seo hem de ekran okuyuculara faydası olduğundan excel deki örneği sizlere sundum ve ne anlama geldiğini canlı bir gerçek yaşam örneği ile sizlerle paylaşmak istedim.
Sonuç
📚 Kaynaklar
📚 İlgilenebileceğiniz Diğer Makaleler
✍ Lütfen olumlu-olumsuz tüm görüşlerinizi bana yorum yada mail yolu ile iletmeyi ihmal etmeyin.
🔗 Sosyal medya kanallarından makaleyi paylaşarak destek olursanız çok sevinirim.
👋 Bir sonraki makalede görüşmek dileğiyle.
