Html Tablo Ortalama
Html tablolar, web sayfalarında verileri düzenlemek ve sunmak için yaygın olarak kullanılan bir yapıdır. Birçok web sitesi, çeşitli verileri tablolar halinde görüntüler ve kullanıcılara daha anlaşılır bir şekilde sunar. Html tabloları oluşturmak ve bu tablolarda ortalama değerleri hesaplamak oldukça kolaydır.
Öncelikle, bir html tablosu oluşturmak için “table” etiketini kullanırız. Tablonun başlığını girmek için “thead” etiketini kullanabiliriz. Ardından, tablodaki verileri “tbody” etiketi içerisindeki “tr” ve “td” etiketleriyle gireriz. Tablodaki her satır için bir “tr” etiketi kullanılır ve her sütun için bir “td” etiketi kullanılır.
Örneğin, bir öğrencinin matematik, bilim ve sosyal derslerinde aldığı notları içeren bir tabloyu ele alalım. Tablomuzda öğrencinin her ders için aldığı notları göstermek istiyoruz.
“`html
| Ders | Not |
|---|---|
| Matematik | 85 |
| Bilim | 92 |
| Sosyal | 78 |
“`
Yukarıdaki html kodunu kullanarak, tarayıcımızda tablomuzu görüntüleyebiliriz. Ancak, bu tabloda her ders için ortalama notu da hesaplamak istiyoruz. Bunun için birkaç satır javascript kodu eklememiz gerekiyor.
“`html
document.write("Ortalama Not: " + ortalama);
“`
Yukarıdaki javascript kodunu html sayfamızın içinde kullanarak, notların toplamını alıyoruz ve derslerin sayısına bölerek ortalama notu hesaplıyoruz. Sonuç olarak, tarayıcımızda tabloyu görüntülerken tablonun altında “Ortalama Not: 85” gibi bir sonuç elde ediyoruz.
Html tabloların kullanımıyla ilgili bir diğer önemli nokta, tabloların responsive tasarımını sağlamaktır. Mobil cihazlar gibi küçük ekranlarda tablolar düzgün görüntülenmeyebilir. Bu nedenle, css medya sorguları kullanarak tablolarınızın responsive bir şekilde görüntülenmesini sağlayabilirsiniz.
Sonuç olarak, html tabloları web sayfalarında verileri düzenlemek ve sunmak için kullanılan etkili bir araçtır. Tabloları oluşturmak ve ortalama değerleri hesaplamak oldukça kolaydır. Ayrıca, responsive tasarım için css medya sorgularını kullanarak tablolarınızı mobil cihazlara uyumlu hale getirebilirsiniz.
