HTML Bilgileri -11- HTML Tablolar
Merhaba,
HTML tabloları aynı bir Excel sayfasında olduğu gibi, satır ve sütunlardan oluşan, verileri düzenlememize yardımcı olan ögelerdir. HTML’de tablo oluştururken önce tablo etiketimizi, sonra satırlarımızı ve satırlarımızın içerisine de sütunlarımızı yerleştiriyoruz.
```
Ad
Soyad
Tony
Stark
Clark
Kent
Bruce
Banner
Bruce
Wayne
```
Görünümü:
Örnekte gördüğünüz üzere tablo etiketleri şimdiye kadar gördüğümüz etiketlere göre biraz daha fazla öge içeriyor. Örneğimizde Ad-Soyad değerlerini de bir satır olarak ekledik. Farklı bir kullanım ile bunları tablo ögelerimizden ayırabiliriz.
Nasıl ki HTML sayfamızın bir head ve bir body bölümü var, tablolarımızda da bu bölümleri kullanabiliriz. Hatta başlığımızı alt bölüme alabilir veya burada tekrarlatabiliriz.
```
Ad
Soyad
Tony
Stark
Clark
Kent
Bruce
Banner
Bruce
Wayne
Ad
Soyad
```
Görünümü:
Örnekte gördüğümüz gibi tablomuzun üst ve alt bölümlerine sütun başlıklarımızın girişini yaptık.
Tablo Çerçevesi
Örneklerde hazırladığımız tablolarda bir çerçeve bulunmuyordu. Daha düzenli bir görünüm için çerçeve kullanımı faydalı olacaktır. Bunun için ` etiketimize border` özelliği ekleyip, kalınlık değerini girmemiz yeterli.
```
Ad
Soyad
Tony
Stark
Clark
Kent
Bruce
Banner
Bruce
Wayne
```
Görünümü:
Satır veya Sütunları Birleştirmek
Tablolarda son olarak göreceğimiz özellik satırları veya sütunları birleştirmek için kullandığımız rowspan ve colspan özellikleridir.
Rowspan nedir?
Rowspan satırları birleştirmemize olanak sağlayan bir özelliktir. Bunu yazıyla değil örnekle daha iyi görebiliriz.
```
Evren
Ad
Soyad
Marvel
Tony
Stark
Bruce
Banner
DC
Clark
Kent
Bruce
Wayne
```
Görünümü:
Normalde her bir <tr> (satır) içerisine eşit sayıda <td> (sütun) girişi yapıyoruz. Burada yaptığımız işlem, 2 aynı sütun değerine sahip satırı gruplamak için aynı olan sütunlarda birleştirmek oldu. Peki bu gruplamayı biz satırları değil de sütunları birleştirerek yapmak istesek?
Colspan nedir?
Colspan da sütunları birleştirmemize olanak sağlayan bir özelliktir. Bunu da örnek üzerinde görelim:
```
Ad
Soyad
Marvel Evreni
Tony
Stark
Bruce
Banner
DC Evreni
Clark
Kent
Bruce
Wayne
```
Görünümü:
Burada da gruplandırmamızı satırlar üzerinden değil, sütunlar üzerinden yaptık. Grup isimlerimizi tek bir satırda 2 sütunu birleştirerek tanımlamış olduk.
Tablolar ile ilgili bilmemiz gerekenler şimdilik bu kadar. Bir sonraki yazıda HTML Formlara başlayacağız.