Bu yazımda Html tablo etiketlerini kullanarak birbirinden farklı Html Tablo Örnekleri yapacağız. Mümkün olduğunca, Html tablo oluştururken kullanma ihtiyacımız olabilecek örnekleri yapmaya çalışacağım.
Tabi yaptığımız örneklerde Css kodu yazmadan sadece Html kodları ile tablo oluşturacağımız için görünüm istediğiniz gibi olmayabilir.
Örneğin Html kodları ile yazdığımız bir tabloya, birkaç Css kodu uygulayarak bu şekilde tablolar elde edebiliriz.
Bu yazımızda Css konularına değinmeyeceğim. Tablolar ile ilgili hangi Css özelliklerini kullandığımızı öğrenmek istiyorsanız Css Tablo Özellikleri ve Kullanımı yazımı okuyabilirsiniz.
Html tablo etiketlerinin kullanımı ile ilgili eksikleriniz olduğunu düşünüyorsanız Html Tablo Oluşturma yazımı okuyabilirsiniz.
Yeni örnekler yaptıkça yazının sonuna eklemeye devam edeceğim.
Şimdi örneklerimize geçelim.
HTML TABLO ÖRNEKLERİ VE KODLARI
Html Tablo Kodları – 1
En basit haliyle bir Html tablo bu şekilde yapılır.
|
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 35 36 37 38 39 40 |
<table border = "1"> <tr> <th>Başlık-1</th> <th>Başlık-2</th> <th>Başlık-3</th> <th>Başlık-4</th> </tr> <tr> <td>Satır-1 Sütun-1</td> <td>Satır-1 Sütun-2</td> <td>Satır-1 Sütun-3</td> <td>Satır-1 Sütun-4</td> </tr> <tr> <td>Satır-2 Sütun-1</td> <td>Satır-2 Sütun-2</td> <td>Satır-2 Sütun-3</td> <td>Satır-2 Sütun-4</td> </tr> <tr> <td>Satır-3 Sütun-1</td> <td>Satır-3 Sütun-2</td> <td>Satır-3 Sütun-3</td> <td>Satır-3 Sütun-4</td> </tr> <tr> <td>Satır-4 Sütun-1</td> <td>Satır-4 Sütun-2</td> <td>Satır-4 Sütun-3</td> <td>Satır-4 Sütun-4</td> </tr> <tr> <td>Satır-5 Sütun-1</td> <td>Satır-5 Sütun-2</td> <td>Satır-5 Sütun-3</td> <td>Satır-5 Sütun-4</td> </tr> </table> |
Html Tablo – 1
Html Tablo Kodları – 2
Html tablolarında satır birleştirme bu şekilde yapılır.
|
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 35 36 |
<table border = "1"> <tr> <th>Başlık-1</th> <th>Başlık-2</th> <th>Başlık-3</th> <th>Başlık-4</th> </tr> <tr> <td>Satır-1 Sütun-1</td> <td>Satır-1 Sütun-2</td> <td>Satır-1 Sütun-3</td> <td>Satır-1 Sütun-4</td> </tr> <tr> <td rowspan="3">Satır-2-3-4 Sütun-1</td> <td>Satır-2 Sütun-2</td> <td>Satır-2 Sütun-3</td> <td rowspan="3">Satır-2-3-4 Sütun-4</td> </tr> <tr> <td>Satır-3 Sütun-1</td> <td>Satır-3 Sütun-2</td> </tr> <tr> <td>Satır-4 Sütun-1</td> <td>Satır-4 Sütun-2</td> </tr> <tr> <td>Satır-5 Sütun-1</td> <td>Satır-5 Sütun-2</td> <td>Satır-5 Sütun-3</td> <td>Satır-5 Sütun-4</td> </tr> </table> |
Html Tablo – 2
Html Tablo Kodları – 3
Html tablolarında sütun birleştirme bu şekilde yapılır.
|
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 35 36 |
<table border = "1"> <tr> <th>Başlık-1</th> <th>Başlık-2</th> <th>Başlık-3</th> <th>Başlık-4</th> </tr> <tr> <td>Satır-1 Sütun-1</td> <td colspan="2">Satır-1 Sütun-2-3</td> <td>Satır-1 Sütun-4</td> </tr> <tr> <td rowspan="3">Satır-2-3-4 Sütun-1</td> <td>Satır-2 Sütun-2</td> <td>Satır-2 Sütun-3</td> <td rowspan="3">Satır-2-3-4 Sütun-4</td> </tr> <tr> <td>Satır-3 Sütun-1</td> <td>Satır-3 Sütun-2</td> </tr> <tr> <td>Satır-4 Sütun-1</td> <td>Satır-4 Sütun-2</td> </tr> <tr> <td>Satır-5 Sütun-1</td> <td colspan="2">Satır-5 Sütun-2-3</td> <td>Satır-5 Sütun-4</td> </tr> </table> |
Html Tablo – 3
Html Tablo Kodları – 4
Html iç içe tablo oluşturma bu şekilde yapılır.
|
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 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<table border = "1"> <tr> <th>Başlık-1</th> <th>Başlık-2</th> <th>Başlık-3</th> <th>Başlık-4</th> </tr> <tr> <td>Satır-1 Sütun-1</td> <td>Satır-1 Sütun-2</td> <td>Satır-1 Sütun-3</td> <td>Satır-1 Sütun-4</td> </tr> <tr> <td>Satır-2 Sütun-1</td> <td rowspan="3" colspan="2"> <table border = "1" bgcolor="lightblue"> <tr> <th>Başlık-1</th> <th>Başlık-2</th> </tr> <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> </td> <td>Satır-2 Sütun-4</td> </tr> <tr> <td>Satır-3 Sütun-1</td> <td>Satır-3 Sütun-4</td> </tr> <tr> <td>Satır-4 Sütun-1</td> <td>Satır-4 Sütun-4</td> </tr> <tr> <td>Satır-5 Sütun-1</td> <td>Satır-5 Sütun-2</td> <td>Satır-5 Sütun-3</td> <td>Satır-5 Sütun-4</td> </tr> </table> |
Html Tablo – 4
Html Tablo Kodları – 5
Kompleks bir tablo örneği
|
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 35 36 37 38 39 |
<table border="1"> <caption>SİPARİŞ ÖZETİ</caption> <thead> <tr> <th colspan="3">Sipariş Numarası : #123456789</th> <th>Sipariş Tarihi : 1 Ocak 2000 </tr> <tr> <td colspan="2"> <strong>Teslimat Adresi :</strong><br> Adres-1<br> Adres-2<br> Adres-3 </td> <td colspan="2"> <strong>Fatura Adresi:</strong><br> Adres-1<br> Adres-2<br> Adres-3 </td> </tr> </thead> <tbody> <tr> <th colspan="3">Ödeme Türü</th> <th>Kargo</th> </tr> <tr> <td colspan="3">Havale/EFT</td> <td>Ücretsiz</td> </tr> </tbody> <tfoot> <tr> <th colspan="3">Fiyat</th> <td> 100.00</td> </tr> <tr> <th colspan="2">KDV</th> <td> 18% </td> <td>18.00</td> </tr> <tr> <th colspan="3">TOPLAM</th> <td>118.00</td> </tr> </tfoot> </table> |
Html Tablo – 5
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
