Web sayfasında verilerin sıralı bir şekilde tablo halinde görünmesini istersek bunu bir HTML tagı olan <table> ile yaparız. HTML tablolar satır ve sütunlardan oluşur. Bu satır ve sütunların sayılarını tablo oluştururken biz belirleriz.
Tablolarda satırlar ve sütunlar <table> tagı içinde blirtilir. Satır için <tr>, sütun için ise <td> tagları kullanılır.
Tablo örneği HTML kodu:
<table> <tr> <td>1.1</td> <td>1.2</td> </tr> <tr> <td>2.1</td> <td>2.2</td> </tr> </table>
HTML Tablo Başlığı
Çoğu zaman tablonun en üstünde sütunların içeriği hakkında bilgi veren başlıklar kullanılır. HTML tablolarda bu ihtiyaç için özel <th> tagı kullanılır.
Örnek tablo başlığı HTML kodu:
<table> <tr> <th>1.Sütun</th> <th>2.Sütun</th> </tr> <tr> <td>1.1</td> <td>1.2</td> </tr> <tr> <td>2.1</td> <td>2.2</td> </tr> </table>
rowspan Özelliği
Tablolarda bir hücrenin kaplayacağı genişliği satır olarak belirlemek için kullanılır.
rowspan örnek kodu:
<table border="1"> <tr> <th>1.Sütun</th> <th>2.Sütun</th> <th>3.Sütun</th> </tr> <tr> <td>1.1</td> <td>1.2</td> <td>1.3</td> </tr> <tr> <td rowspan="2">2.1,3.1</td> <td>2.2</td> <td>2.3</td> </tr> <tr> <td>3.2</td> <td>3.3</td> </tr> </table>
colspan Özelliği
tabloda her hücrenin kaplayacağı sütun sayısını belirlemek için kullanılır.
colspan örnek kodu:
<table border="1"> <tr> <th>1.Sütun</th> <th>2.Sütun</th> <th>3.Sütun</th> </tr> <tr> <td>1.1</td> <td>1.2</td> <td>1.3</td> </tr> <tr> <td colspan="2">2.1,2.2</td> <td>2.3</td> </tr> <tr> <td>3.1</td> <td>3.2</td> <td>3.3</td> </tr> </table>
cellspacing özelliği hücreler arası boşluk vermek için kullanılır.
cellspacing örnek HTML kodu:
<table border="1" cellspacing="20"> <tr> <td>1.1</td> <td>1.2</td> <td>1.3</td> </tr> <tr> <td>2.1</td> <td>2.2</td> <td>2.3</td> </tr> </table>
cellpadding özelliği hücre içeriği ile hücre kenarı arasındaki boşluğu (padding) ayarlar.
cellpadding örnek HTML kodu:
<table border="1" cellpadding="20"> <tr> <td>1.1</td> <td>1.2</td> <td>1.3</td> </tr> <tr> <td>2.1</td> <td>2.2</td> <td>2.3</td> </tr> </table>
Tablolarda kullanılan diğer özellikler:
width: Tablo genişliğini belirler.
height: Tablo yüksekliğini belirler.
align: Tablonun sayfadaki pozisyonunu belirler.
border: Tabloyu ve hücreleri çerçeve içine alır.
Ayrıca bu özelliklerin dışında CSS ile tabloya style verilebilir.
