HTML'de tablo oluşturmak için <table> etiketleri kullanılır ve tabloyu oluştururken kullanılacak tüm elemanlar bu etiketlerin içine yazılır.
<table>
<table> elemanı açılış ve kapanış etiketleriyle kullanılır. Tabloyu oluşturacak tüm elemanlar bu etiketlerin arasına yazılır.
<tr>
<table> etiketleri arasına yazılır ve tablodaki bir satırı temsil eder. Satırlar <th> ya da <td> elemanları ile hücrelere bölünür.
<th>
<th> elemanları <tr> etiketleri arasına konur ve satırdaki bir hücreyi temsil eder. <th> elemanı ile oluşturulan hücreler başlık hücreleridir. Tarayıcılar bu hücrelere yazılan yazıları otomatik olarak ortalanmış ve kalın olarak görüntüler. Hücreye girilecek içerik etiketlerin arasına yazılmalıdır.
abbr niteliği ile hücrenin içerisindeki bilginin kısaltılmış şekli belirtilebilir. Bunun görsel bir etkisi yoktur. abbr niteliği abbr="yazı" şeklinde kullanılır.
headers niteliği ile hücreye bir ad verilebilir. Bu şekilde aynı ad verilen başlık hücrelerinin birbirleriyle ilişkili olduğu belirtilmiş olur. Kullanımı header="isim" şeklindedir ve bu niteliğin de görsel bir etkisi yoktur.
scope niteliği hücrenin neyin başlığı olduğunu belirtir. col değeri hücrenin bir sütunun başlığı olduğunu belirtir. colgroup değeri hücrenin bir sütun grubunun başlığı olduğunu belirtir. row değeri hücrenin bir satırın başlığı olduğunu belirtir. rowgroup değeri hücrenin bir satır grubunun başlığı olduğunu belirtir. scope niteliğinin de görsel bir etkisi yoktur.
rowspan ve colspan niteliklerinin karşısına sayı girilir. Bu nitelikler sırasıyla başlık hücresinin kaç satıra ve kaç sütuna yayılacağını belirtir. Varsayılan değer birdir.
<td>
<td> elemanları <tr> etiketleri arasına konur ve satırdaki bir hücreyi temsil eder. <td> elemanı ile oluşturulan hücreler normal hücrelerdir. Tarayıcılar bu hücrelere yazılan yazıları otomatik olarak sola yaslanmış olarak görüntüler. Hücreye girilecek içerik etiketlerin arasına yazılmalıdır.
headers niteliği ile hücreye bir ad verilebilir. Bu şekilde aynı ad verilen başlık hücreleri ile bu hücrelerin birbirleriyle ilişkili olduğu belirtilmiş olur. Kullanımı header="isim" şeklindedir ve bu niteliğin de görsel bir etkisi yoktur.
rowspan ve colspan niteliklerinin karşısına sayı girilir. Bu nitelikler sırasıyla hücrenin kaç satıra ve kaç sütuna yayılacağını belirtir. Varsayılan değer birdir.
Aşağıdaki örnek koda bakılarak tabloların nasıl oluşturulacağı görülebilir:
<!DOCTYPE html>
<html>
<head>
<title>Tablo</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
</style>
</head>
<body>
<table>
<tr>
<th rowspan="2"></th>
<th colspan="2">İstanbul</th>
<th colspan="2">Ankara</th>
</tr>
<tr>
<th>Gelir</th>
<th>Gider</th>
<th>Gelir</th>
<th>Gider</th>
</tr>
<tr>
<th>2011</th>
<td>120</td>
<td rowspan="2">150</td>
<td>80</td>
<td>40</td>
</tr>
<tr>
<th>2012</th>
<td>150</td>
<td>90</td>
<td>55</td>
</tr>
<tr>
<th>2013</th>
<td>200</td>
<td>105</td>
<td>105</td>
<td>70</td>
</tr>
<tr>
<th>2014</th>
<td>240</td>
<td>130</td>
<td>100</td>
<td>75</td>
</tr>
</table>
Etiket ve niteliklerin nasıl çalıştığının daha iyi görülebilmesi için en başta tabloların kenarları ve hücrelerdeki boşluklarla alakalı biçimlendirme yapılmıştır.
<caption>
<caption> elemanı tablonun üzerine başlık koymaya yarar. <caption> elemanı <table> elemanının açılış etiketinden hemen sonra kullanılmalıdır. Her tablo için tek bir başlık konabilir. Yazılmak istenen başlık <caption> etiketlerinin arasına yazılır.
<colgroup>
<colgroup> elemanı eğer mevcutsa <caption> açılış etiketinden hemen sonra, <caption> elemanı mevcut değilse <table> açılış etiketinden hemen sonra kullanılır ve bir kolon grubunu biçimlendirmeye yarar. span niteliği soldan itibaren kaç kolonun bu biçimlendirmeyi kullanacağını belirtir. Örneğin yukarıdaki örnek kodda <table> açılış etiketinden hemen sonra aşağıdaki kod parçası eklenirse ilk üç sütunun arkaplanı mavi olacaktır:
<colgroup span="3" style="background-color:blue"></colgroup>
<col>
<col> elamanları <colgroup> etiketlerinin içine yerleştirilir. Bu elemanlar sayesinde her sütun farklı şekilde biçimlendirilebilir. span niteliği ile herbir biçimlendirmenin kaç sütuna etki edeceği belirtilir. Bu eleman kapanış etiketi olmadan kullanılır. Eğer yukarıdaki örnekte <table> açılış etiketinden hemen sonra aşağıdaki kod yerleştirilirse ilk sütun sarı, sonraki iki sütun mavi ve son iki sütun krımızı arkaplana sahip olacaktır.
<colgroup>
<col style="background-color:yellow">
<col span="2" style="background-color:blue">
<col span="2" style="background-color:red">
</colgroup>
<thead>, <tbody> ve <tfoot>
Bu elemanlarla bir tablonun başlık, gövde ve en alt kısımları belirtilir. <thead> elemanı içine yazılan kısım başlık, <tbody> elemanı içine yazılan kısım gövde ve <tfoot> elemanı içine yazılan kısım taban olacaktır. Bu elemanların üçü birlikte kullanılır ve kendi aralarındaki yazılma sırası <thead>, <tfoot> ve <tbody> şeklindedir.
Bu elemanlar <caption> ve <colgroup> elemanlarından önce yazılmamalıdır. Tarayıcılar bu elemanlar kullanıldığında bazı fonksiyonel özellikler sağlayabilir. Örneğin çok uzun bir tablo bastırılacağında her sayfanın en altına ve en üstüne başlık ve en alt kısım yazdırılabilir. Aşağıdaki örnek bu elemanların kullanımını göstermektedir:
<!DOCTYPE html>
<html>
<head>
<title>Tablo Örneği</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
thead{
background-color:blue
}
tfoot{
background-color:red
}
</style>
</head>
<body>
<table>
<caption>Sınav Notları</caption>
<thead>
<tr>
<th>İsim</th>
<th>Soyisim</th>
<th>Not</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Ortalama</td>
<td></td>
<td>50</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Gökhan</td>
<td>Keskin</td>
<td>50</td>
</tr>
<tr>
<td>Ayşe</td>
<td>Yılmaz</td>
<td>70</td>
</tr>
<tr>
<td>Ali</td>
<td>Öztürk</td>
<td>30</td>
</tr>
</tbody>
</table>
</body>
</html>
Yine bu örnekte de CSS özellikleri kullanılarak kodun nasıl çalıştığının daha iyi anlaşılması için bazı biçimlendirmeler yapılmıştır.