Bazı içerikler, bir tabloda sunulması doğal olarak uygundur. Çoğu kişi de tabloları sever, çünkü içeriği hızlıca taramak ve almak kolaydır. Bu bölümde HTML’de tabloların nasıl oluşturulacağını örneklerle öğreneceksiniz.
CSS ile tabloyu biçimlendirmek için HTML CSS Tablo Biçimlendirme yazsını bakınız.
Tabloyu görüntüleme
Bir tablo, HTML’de oluşturulacak karmaşık öğelerden biridir. Bir araya gelmeleri için çok sayıda etikete ihtiyacınız var. Aşağıda göreceğiniz gibi birkaç farklı varyasyon var ancak temel düzen aşağıdaki gibidir:
|
1 2 3 4 5 6 7 8 |
<table> <tr> <td>içerik</td> <td>içerik</td> </tr> </table> |
Çıktı:
Yukarıdaki kod, bir satıra (tr) sahip bir tablo üretir. Satır içinde, tablo verisi (td) etiketleriyle belirtilen iki sütun veya iki hücre vardır.
Tablonuzda istediğiniz her satır için başka bir tr etiket çifti ekleyin. Her satır daha sonra içinde gereken sayıda td etiketine sahip olabilir.
td‘yi, başlıklar olmak istediğimiz hücreler için th ile değiştirebiliriz.
İşte bir örnek:
|
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 |
<p>Bazı Sevdiğim Filmler:</p> <table> <tr> <th>Film Adı</th> <th>Yılı</th> <th>IMDB Sırası</th> </tr> <tr> <td>Esaretin Bedeli </td> <td>1994</td> <td>1.</td> </tr> <tr> <td>Yeşil Yol</td> <td>1999</td> <td>28.</td> </tr> <tr> <td>Guguk Kuşu</td> <td>1975</td> <td>19.</td> </tr> </table> |
Çıktı:
Satırları Gruplandırma
Yukarıda tanımlandığı gibi standart bir tablo, bir dizi satır ve sütun içeren bir varlıklar oluşturur. HTML’nin içeriği tanımlaması beklenir ve bir tablonun farklı bölümlere sahip olması nadir değildir. Normalde üstte sütunlarımız için başlıklar, sonra ortada içerik ve altta bir özet bulunur. Bunu yansıtmak için bir tabloyubir tablo başı (thead), bir tablo gövdesi (tbody) ve tablo altlığı (tfoot) olarak ayırabiliriz.
İşte bir örnek:
|
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 |
<body> <p>Bazı Gezegenler ve Bilgileri:</p> <table border=1> <thead> <tr> <th>Gezegen</th> <th>Çapı</th> <th>Uydu Sayısı</th> </tr> </thead> <tbody> <tr> <td>Dünya</td> <td>12,756km</td> <td>1</td> </tr> <tr> <td>Mars</td> <td>6,794km</td> <td>2</td> </tr> </tbody> <tfoot> <tr> <td>Ortalama</td> <td>9775km</td> <td>1.5</td> </tr> </tfoot> </table> </body> |
Çıktı:
Colspan niteliği
Bazen bir hücrenin birkaç sütuna bölmek isteye bilirsiniz. Bunun için colspan niteliğini kullanırız. Colspan, bir hücreyi birkaç sütun üzerinde uzatmamızı sağlar.
Yazımı: aşağıdaki kod bir hücreyi 3 hücrelik olacak şekilde uzatır.
|
1 2 3 |
<td colspan="3">içerik</td> |
İşte örnek:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<body> <p>Bir kaç hücre örneği:</p> <table border=1> <tr> <td colspan="3">100%</td> </tr> <tr> <td>33%</td> <td>33%</td> <td>33%</td> </tr> <tr> <td>33%</td> <td colspan="2">67%</td> </tr> </table> </body> |
rowspan niteliği
rowspan, bir hücrenin birkaç satır boyunca genişlemesini sağlar.
Yazımı: Aşağıdaki kod bir ücreyi aşağı doğru 3 hücrelik uzatır.
|
1 2 3 |
<td rowspan="3">içerik</td> |
İşte örnek:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<body> <p>Biraz veri ekleyelim:</p> <table border=1> <tr> <td rowspan="3">100%</td> <td>33%</td> <td>33%</td> </tr> <tr> <td>33%</td> <td rowspan="2">67%</td> </tr> <tr> <td>33%</td> </tr> </table> </body> |
Özet
<table> </table>
Tablo oluşturur.
<tr> </tr>
Satır oluşturur.
<th> </th>
Başlık hücresi oluşturur.
<td> </td>
Hücre oluşturur.
<thead> </thead>
Tablo başlığı oluşturur.
<tbody> </tbody>
Tablo gövdesi oluşturur.
<tfoot> </tfoot>
Tablo sonu oluşturur.
<td colspan=”3″> </td>
Tabloyu 3 hücre genişletir.
<td rowspan=”3″> </td>
Tabloyu 3 hücre uzatır.
HTML Tablo Örnekleri
Yukarıdaki açıklama ve örneklerin dışında table ve css ile yapılmış diğer örnekler de şunlardır.
HTML Tablo Örnekleri 5:
|
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 |
<body> <table style="border:solid;width: 400px;"> <tr> <td> </td> <td>11A</td> <td>11B</td> <td>11C</td> <td>11D</td> </tr> <tr> <td>Erkek</td> <td>14</td> <td>13</td> <td>16</td> <td>15</td> </tr> <tr> <td>Kız</td> <td>16</td> <td>15</td> <td>14</td> <td>14</td> </tr> <tr> <td>Toplam</td> <td>30</td> <td>28</td> <td>30</td> <td>29</td> </tr> <caption>Sınıfların Kız ve Erkek Öğrenci Sayıları</caption> </table> </body> |
Çıktı:
HTML Tablo Örnekleri 6:
|
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 53 54 |
<style> table { width: 500px; height: 300px; } table, td { border: 1px solid red; } </style> <body> <table> <thead> <tr> <th> </th> <th>11A</th> <th>11B</th> <th>11C</th> <th>11D</th> </tr> </thead> <tbody> <tr> <td>Erkek</td> <td>14</td> <td>13</td> <td>16</td> <td>15</td> </tr> <tr> <td>Kız</td> <td>16</td> <td>15</td> <td>14</td> <td>14</td> </tr> </tbody> <tfoot> <tr> <td>Toplam</td> <td>30</td> <td>28</td> <td>30</td> <td>29</td> </tr> </tfoot> <caption>Sınıfların Kız ve Erkek Öğrenci Sayıları</caption> </table> </body> |
Çıktı:
HTML Tablo Örnekleri 7:
|
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 53 54 55 56 57 58 59 60 |
<style> table { border:5px solid #2d3436; width: 500px; height: 300px; } td { border: 2px solid #d63031; } </style> <body> <table> <caption><strong>Skor Tablosu</strong></caption> <thead> <tr> <th colspan="2">Ev Sahibi</th> <th colspan="2">Konuk Ekip</th> </tr> </thead> <tbody> <tr> <td style="background:#d63031" rowspan="4"></td> <td>Galatasaray</td> <td>78</td> <td style="background:#d63031" rowspan="4"></td> <td>76</td> <td>Darüşşafaka</td> <td style="background:#d63031" rowspan="4"></td> </tr> <tr> <td>Afyon</td> <td>84</td> <td>73</td> <td>Tofaş</td> </tr> <tr> <td>Gaziantep</td> <td>78</td> <td>83</td> <td>Anadolu Efes</td> </tr> <tr> <td>İTÜ</td> <td>72</td> <td>93</td> <td>Banvit</td> </tr> </tbody> </table> </body> |
Çıktı:
HTML Tablo Örnekleri 8:
|
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 |
<body> <h1>TABLO ÖRNEKLERİ</h1> <table border="2" width="400" align="center"> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td rowspan="2" colspan="2">TASARIM KODLAMA</td> <td>7</td> </tr> <tr> <td>8</td> <td>9</td> </tr> <tr> <td>10</td> <td>11</td> <td>12</td> <td>13</td> </tr> </table> </body> |
Çıktı:
Örnek 9:
HTML CSS Kodları:
|
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 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
<!DOCTYPE html> <html> <head> <style> table{ border: 3px solid #CF000F; width: 500px; height: 250px; text-align: center; font-family: "Comic Sans MS", "Comic Sans", cursive; background-color: #F1654C; color:#fff; } table td{ border: 5px solid #F29B34; } #tablo-baslik{ font-weight: 700; } </style> </head> <body> <table> <tr id="tablo-baslik"> <td>Sıra</td> <td>Ad</td> <td>Soyad</td> <td>Numara</td> </tr> <tr> <td>1</td> <td>Ahmet</td> <td>Cansever</td> <td>15</td> </tr> <tr> <td>2</td> <td>Hayri</td> <td>Koçmarlar</td> <td>48</td> </tr> <tr> <td>3</td> <td>Hüseyin</td> <td>Öztürk</td> <td>52</td> </tr> <tr> <td>4</td> <td>Ufuk</td> <td>İlkiz</td> <td>65</td> </tr> <tr> <td>4</td> <td>Recep</td> <td>Ortaköylü</td> <td>71</td> </tr> </table> </body> </html> |
2 Yorum