Html ile Web İşlemleri 16 - Tablo Etiketleri

TABLO ETİKETLERİ

Satır ve sütunlar şeklinde düzenlenebilecek ögeleri web sayfasında kullanmak için HTML tabloları kullanılır. Tablolar içerisinde metinler, listeler, resimler, videolar bağlantılar, tablo içinde tablolar vb. veriler kullanılır. Tablolardaki satır ve sütunların kesişim noktalarına hücre adı verilir. Veriler hücrelere yerleştirilir. HTML5 kullanılmaya başlanmadan önce tablolar yerleşim elemanları olarak kullanılırdı. HTML5 ile tablosuz tasarım kullanılmaktadır. Web sayfası içeriklerinde verilerin bir arada ve düzenli tutulması için tablolar kullanılır (Görsel 3.19).

Görsel 3.19: HTML5 tablo yapısı

1. <table> Etiketi

Tablolar, web sayfası içinde <table> etiketi kullanılarak oluşturulur. <table> etiketi, </table> kapama etiketi ile birlikte kullanılır. HTML5 ile tablo oluşturmak için gerekli temel ve gelişmiş özelliklere ait etiketler Tablo 3.7’de verilmiştir.

Tablo 3.7: Tablo Oluşturmak İçin Kullanılan HTML Komutları

Etiket	Açıklama
<table>	HTML sayfalarında tablo oluşturur. Tablo ögeleri bu etiketler arasında yer alır.
<tr>	Tablo satırlarını oluşturur.
<td>	Tablo sütunlarını oluşturur. Hücrelere veri eklemek için kullanılır.
<th>	Tablo sütun başlıklarını oluşturur. Varsayılan yazı tipi kalındır.
<caption>	Tablo kenarlıkları dışında başlık oluşturur.
<col>	Tablo sütunlarını biçimlendirir.
<colgroup>	Hücre gruplarını temsil eder.
<thead>	<th> dâhil tüm tablo başlık bölümünü kapsar.
<tbody>	Tablonun <tr>, <td> asıl içeriklerinin şekillendiği bölümdür.
<tfoot>	Tablonun alt kısmında yer alan son satırıdır.
<colspan>	Hücreleri sütun olarak birleştirir.
<rowspan>	Hücreleri satır olarak birleştirir.

2. Border Özelliği

Border özelliği, tabloya çerçeve kalınlığı uygular <table> etiketi ile border özelliği tanımlanmamış ise tablo çerçevesi görüntülenmez. Tablo çerçevesinin görüntülenmesi için border değeri en az bir (1) olmalıdır (Tablo 3.8).

Tablo 3.8: Border Özelliğinin Kullanımı

TABLE BORDER Kullanımı	Açıklama
<table border="1">	Çerçeve kalınlığı 1 olan tablo tanımlama.
<table border="0">	Çerçevesiz tablo tanımlama.
<table>	Çerçevesiz tablo tanımlama.