Bu yazımızda sizlere HTML tablo oluşturma ve tablo yapılarının işleyişi hakkında bazı bilgiler vereceğim.
Tablolar table etiketleri arasında yazılmaktadır.
Satır oluştururken: tr
Sütun oluştururken: td
etiketleri kullanılır.
Örnek bir tablo yapısı:
| İsimler | Vize | Final |
| Ömer | 75 | 60 |
| Emre | 50 | 80 |
Bu tablonun kod yapısını inceleyecek olursak;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <table> <!--Tablomuzu oluşturmak için kullandığımız etiket--> <tr> <!--İlk satırımızı oluşturmak için kullanıyoruz--> <td>İsimler</td> <!--Sütunları oluşturarak verileri ekliyoruz--> <td>Vize</td> <td>Final</td> </tr> <!--İlk satırımızı bitiriyoruz--> <tr> <td>Ömer</td> <td>75</td> <td>60</td> </tr> <tr> <td>Emre</td> <td>50</td> <td>80</td> </tr> </table> |
Örnek bir tablo yapısı:
| Dersler | Emre | Ömer | Ali İhsan | Mustafa |
|---|---|---|---|---|
| Web Programlama | 90 | 80 | 100 | 95 |
| Veri Tabanı | 75 | 90 | 80 | 100 |
| Algoritmaya Giriş | 100 | 75 | 80 | 80 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <table> <tr> <thead> <!--Tablonun üst yapısını oluşturmak için thead kullanılır--> <th>Dersler</th> <!--Üst başlığın satırları için th kullanılır--> <th>Emre</th> <th>Ömer</th> <th>Ali İhsan</th> <th>Mustafa</th> </tr> </thead> <tbody> <!--Tablonun iç yapısını düzenlemek için tbody kullanılır--> <tr> <!--Satırımızı oluşturuyoruz--> <td>Web Programlama</td> <!--Tabloya verileri ekliyoruz--> <td>90</td> <td>80</td> <td>100</td> <td>95</td> </tr> <tr> <td>Veri Tabanı</td> <td>75</td> <td>90</td> <td>80</td> <td>100</td> </tr> <tr> <td>Algoritmaya Giriş</td> <td>100</td> <td>75</td> <td>80</td> <td>80</td> </tr> </table> |
Tablo Özellikleri
Tablolarımızı oluştururken çeşitli özelleştirmeler yapabilmekteyiz. Hücreleri birleştirme, tablo genişliği ve yüksekliği, hizalama, arka plan rengi değiştirme gibi fonksiyonlar bulunmakta.
Tablo renklendirme
bgcolorkullanarak renklendirme yapabiliriz. Bu renklendirmeleri yaparken; html renk kodlarını kullanabilirsiniz.
| İsimler | Vize | Final |
| Ömer | 75 | 60 |
| Emre | 50 | 80 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <table> <tr> <td bgcolor="gray">İsimler</td> <!--Hücreyi griye boyadık--> <td bgcolor="LightSteelBlue">Vize</td> <!--Hücreyi açık maviye boyadık--> <td bgcolor="yellow">Final</td> <!--Hücreyi sarıya boyadık--> </tr> <tr> <td bgcolor="gray">Ömer</td> <td bgcolor="LightSteelBlue">75</td> <td bgcolor="yellow">60</td> </tr> <tr> <td bgcolor="gray">Emre</td> <td bgcolor="LightSteelBlue">50</td> <td bgcolor="yellow">80</td> </tr> </table> |
Tabloya çerçeve ekleme
Tablomuzu daha belirgin yapmak veya göze hoş gözükmesini sağlamak için çerçeve kalınlığını değiştirebilir, çerçeve rengini farklı renklerde yapabiliriz. Çerçeve ekleme, renklendirme gibi özelleştirmeleri styleile belirtmekteyiz.
Çerçeve eklemek için borderetiketini kullanarak kalınlığını px ile belirliyoruz. Örnek: border: 5px
Çerçeve rengini belirlemek için solidetiketini kullanıyoruz. HTML renkleri için tıklayabilirsin. Örnek: solid red;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <table style="border: 10px solid green;"> <!--Kalınlığı 10px ve rengi yeşil olarak ayarlıyoruz--> <tr> <td>1 Numara</td> <td>2 Numara</td> <td>3 Numara</td> </tr> <tr> <td>4 Numara</td> <td>5 Numara</td> <td>6 Numara</td> </tr> <tr> <td>7 Numara</td> <td>8 Numara</td> <td>9 Numara</td> </tr> </table> |
Tablo genişlik ve yüksekliği ayarlamak
widthile tablo genişliği,
heightile tablo yüksekliği ayarlanmaktadır.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!--Genel olarak tablonun boyutlandırmasını yapmak için table etiketi üzerinde yapmak gerekir--> <table width="450px" height="150px"> <!--Tablomuzun genişliği 450px, yüksekliği de 150px--> <tr> <td>İsimler</td> <td>Vize</td> <td>Final</td> </tr> <tr> <td>Ömer</td> <td>75</td> <td>60</td> </tr> <tr> <td>Emre</td> <td>50</td> <td>80</td> </tr> </table> |
Tabloyu hizalama, konumlandırma
Hizalama yaparken, alignetiketi kullanılır.
sağa yaslı hizalamak için, righttagı kullanılır,
sola yaslı hizalamak için, lefttagı kullanılır,
ortalamak için centertagı kullanılır
| HTML TABLO HİZALAMA |
| 1. SATIR |
| 2. SATIR |
| 3. SATIR |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <table align=”center”> <!--Genel olarak bütün tabloyu ortaladık--> <tr> <td align=”left”>HTML TABLO HİZALAMA</td> <!--Hücreyi sola yasladık--> </tr> <tr> <td align=”right”>1. SATIR</td> <!--Hücreyi sağa yasladık--> </tr> <tr> <td align=”center”>2. SATIR</td> <!--Hücreyi ortaladık--> </tr> <tr> <td align=”left”>3. SATIR</td> <!--Hücreyi sola yasladık--> </tr> </table> |
Aynı sütunda ki hücreleri birleştirmek
rowspankullanarak aynı sütunda ki hücreler birleştirilir.
| 1 | 2 | 3 | 4 |
| 5 | 6 | ||
| 7 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!--Birleştirmeleri daha iyi anlayabilmeniz açısından renklendirme yaparak anlatma yapacağım--> <table> <tr> <td bgcolor="cyan" rowspan="3">1</td> <!--1 no'lu sütunu altında ki 3 hücreyle birleştiriyoruz--> <td bgcolor="DarkSlateGray">2</td> <td bgcolor="pink">3</td> <td bgcolor="red" rowspan="3">4</td> <!--4 no'lu sütunu altında ki 3 hücreyle birleştiriyoruz--> </tr> <tr> <td bgcolor="red" rowspan="2">5</td> <td bgcolor="purple">6</td> </tr> <tr> <td bgcolor="yellow">7</td> <td bgcolor="purple">8</td> </tr> </table> |
Aynı satırda ki hücreleri birleştirmek
colspankullanarak aynı satırda ki hücreler birleştirilir.
| 1 | 2 | ||
| 3 | 4 | 5 | 6 |
| 7 | 8 | ||
| 9 | 10 | ||
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <table> <tr> <td bgcolor="Khaki">1</th> <td bgcolor="Olive" colspan="3">2</th> <!--2 no'lu satırı yanında ki 3 hücreyle birleştiriyoruz--> </tr> <tr> <td bgcolor="gold">3</td> <td bgcolor="red">4</td> <td bgcolor="pink">5</td> <td bgcolor="Wheat">6</td> </tr> <tr> <td bgcolor="Sienna">7</td> <td bgcolor="purple" colspan="3">8</td> <!--8 no'lu satırı yanında ki 3 hücreyle birleştiriyoruz--> </tr> <tr> <td bgcolor="yellow" colspan="2">9</td> <!--9 no'lu satırı yanında ki 2 hücreyle birleştiriyoruz--> <td bgcolor="cyan" colspan="2">10</td> <!--10 no'lu satırı yanında ki 2 hücreyle birleştiriyoruz--> </tr> </table> |
