HTML Tablo Oluşturma

  • 02-07-2020 03:57
  • 1156

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.