by Tablolar
Bir HTML dosyasında tablo oluşturmak için 3 temel kodu bilmemiz yeterli:
| Kod | Anlamı |
|---|---|
| <table> | Tabloya başlamak. |
| <tr> | Satıra başlamak. |
| <td> | Sütuna başlamak. |
HTML Kodu
<table>
<tr>
<td>satır 1, sütun 1</td>
<td>satır 1, sütun 2</td>
</tr>
<tr>
<td>satır 2, sütun 1</td>
<td>satır 2, sütun 2</td>
</tr>
</table>
HTML Görünümü
| satır 1, sütun 1 | satır 1, sütun 2 |
| satır 2, sütun 1 | satır 2, sütun 2 |
Burada dikkat edilmesi gereken birkaç nokta var. Birincisi mutlaka satırlardaki sütun sayıları eşit olmalıdır. Eğer iki sütunu birleştireceksek colspan="" ya da iki satırı birleştireceksek rowspan="" özelliğini td kodu içerisinde kullanarak tırnak işareti arasına kaç sütun ya da satır birleştiğini yazmamız gereklidir.
HTML Kodu
<table border="1">
<tr>
<td colspan="2">satır 1, sütun 1 ve 2 birleşti</td>
</tr>
<tr>
<td rowspan="2">satır 2 ve 3 birleşti, sütun 1</td>
<td>satır 2, sütun 2</td>
</tr>
<tr>
<td>satır 3, sütun 2</td>
</tr>
</table>
HTML Görünümü
| satır 1, sütun 1 ve 2 birleşti | |
| satır 2 ve 3 birleşti, sütun 1 | satır 2, sütun 2 |
| satır 3, sütun 2 | |
Dikkat edilirse rowspan="2" kullandığımız satırdan sonra sadece tek sütun kullandık. Bu da satır 3, sütun 2'yi oluşturdu. Bu sayılarda yapacağınız yanlışlık tabloda görünümde sorunlar çıkaracaktır.
Tablo Özellikleri
| Özellik | Anlamı |
|---|---|
| border="0" | Tablo kenarlığı boyutu. |
| cellspacing="0" | Sütunlar arası kenarlık boşluğu. |
| cellpadding="0" | Satırlar arası kenarlık boşluğu. |
| width="genislik" | Tablo genişliği. Piksel ya da yüzde olarak ifade edilebilir. |
| class="stil" | Tablo stili belirtilebilir (CSS bölümünde açıklanıyor). |
TD (Sütun) Özellikleri
| Özellik | Anlamı |
|---|---|
| align="hiza" | Kutu hizası, left, right, center kullanılabilir. |
| width="genislik" | Tablo genişliği. Piksel ya da yüzde olarak ifade edilebilir. |
| height="yukseklik" | Tablo yüksekliği. Piksel ya da yüzde olarak ifade edilebilir. |
| class="stil" | Tablo stili belirtilebilir (CSS bölümünde açıklanıyor). |
NOT: Eğer bir sütuna hiçbir şey yazmadan boş bırakırsak sütun görünmeyecektir. Bu sorunu çözmek için kullanarak kutuda boşluk karakterine yer verirseniz kenarlıkların göründüğünü göreceksiniz.
