Tablolar

Bu bölümde HTML tablolarını nasıl oluşturacağınızı ve düzenleyeceğinizi inceleyeceğiz.

Bir HTML tablosu oluşturmak için <table> etiketi kullanılır. Tabloya satır eklemek için <tr>, satıra da sütun eklemek için ise <td> etiketi kullanılır. Bunlar haricinde tablodaki başlık sütunlarını ayrıştırmak için <th> etiketi kullanılabilir.

<td> ögeleri, tablonun veri kapları olarak nitelendirilebilir. Her türlü HTML öğesini içerebilirler; metin, resimler, listeler, diğer tablolar vb.

CSS ile Tabloları Biçimlendirmek

HTML tablolarının görünümü kontrol etmek için CSS'ten destek almanız gerekir. Web sayfalarındaki CSS kullanımını bir haftaki inceleyeceğiz, ama HTML tablolarının kullanımını daha iyi anlayabilmeniz için bu bölümde bazı CSS özelliklerine değinmek istiyorum.

Aşağıdaki codepen'de tabloyu biçimlendirmek için kullandığım CSS kodlarını görüntülemek için sol üst köşede CSS düğmesine tıklayınız. Hangi CSS özelliğinin ne için kullanıldığı açıklama olarak koda eklenmiştir.

Hücre ve Satır Birleştirmek

HTML tabloları üzerinde çalışırken karmaşık yerleşim düzenleri oluşturmanız gerekebilir. Bu tür durumlarda gerekli olan satır ve sütun birleştirme işlemlerini nasıl yapacağınızı inceleyerek bu bölüme devam edelim.

colspan

Bir hücrenin birden fazla sütundan yayılmasını sağlamak için kullanılır.

rowspan

Bir hücrenin birden fazla satırda yayılması sağlamak için kullanılır.

Tablo İçeriğini Bölümlendirmek

Büyük veri tabloları oluştururken akışı gruplandırmak size hem biçimlendirme hem de veriyi yönetme anlamında fayda sağlayacaktır. HTML tablo içeriğini bölümlendirebilmenize olanak sağlayacak bir dizi etiket sunmaktadır.

<caption>

Tablo başlığını tanımlamak için kullanılır.

<colgroup>

Biçimlendirme işlemlerinin daha rahat yapılabilmesini sağlamak amacıyla tabloda sütun grupları oluşturmak için kullanılır.

<col>

Bir <colgroup> içerisindeki her bir sütunu belirtmek için kullanılır.

<thead>

Tablonun başlık alanında yer alan hücreleri gruplandırmak için kullanılır.

<tbody>

Tablonun içeriğinde yer alan hücreleri gruplandırmak için kullanılır.

<tfoot>

Tablonun altbilgi alanında yer alan hücreleri gruplandırmak için kullanılır.