HTML Tablo Örnekleri

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:


    <table>
        <tr>
            <td>içerik</td>
            <td>içerik</td>
        </tr>
    </table>

<table>

<tr>

<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:


    <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>

<p>Bazı Sevdiğim Filmler:</p>

<table>

<tr>

<th>IMDB Sırası</th>

</tr>

<tr>

<td>Esaretin Bedeli </td>

</tr>

<tr>

<td>Yeşil Yol</td>

</tr>

<tr>

<td>Guguk Kuşu</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:


<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>

<body>

<p>Bazı Gezegenler ve Bilgileri:</p>

<thead>

<tr>

<th>Gezegen</th>

<th>Uydu Sayısı</th>

</tr>

</thead>

<tbody>

<tr>

<td>Dünya</td>

</tr>

<tr>

</tr>

</tbody>

<tfoot>

<tr>

<td>Ortalama</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.


<td colspan="3">içerik</td>

<td colspan="3">içerik</td>

İşte örnek:


<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>

<body>

<p>Bir kaç hücre örneği:</p>

<tr>

</tr>

<tr>

</tr>

<tr>

</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.


<td rowspan="3">içerik</td>

<td rowspan="3">içerik</td>

İşte örnek:


<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>

<body>

<p>Biraz veri ekleyelim:</p>

<tr>

</tr>

<tr>

</tr>

<tr>

</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:


<body>
    <table style="border:solid;width: 400px;">
  <tr>
    <td>&nbsp;</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>

<body>

<tr>

</tr>

<tr>

<td>Erkek</td>

</tr>

<tr>

</tr>

<tr>

<td>Toplam</td>

</tr>

<caption>Sınıfların Kız ve Erkek Öğrenci Sayıları</caption>

</table>

</body>

Çıktı:

HTML Tablo Örnekleri 6:


<style>
    table {
        width: 500px;
        height: 300px;
    }

    table,
    td {
        border: 1px solid red;
    }
</style>

<body>
    <table>
        <thead>
            <tr>
                <th>&nbsp;</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>

<style>

table {

width: 500px;

height: 300px;

}

table,

td {

border: 1px solid red;

}

</style>

<body>

<table>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

<td>Erkek</td>

</tr>

<tr>

</tr>

</tbody>

<tfoot>

<tr>

<td>Toplam</td>

</tr>

</tfoot>

<caption>Sınıfların Kız ve Erkek Öğrenci Sayıları</caption>

</table>

</body>

Çıktı:

HTML Tablo Örnekleri 7:


<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>

<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>Galatasaray</td>

<td>Darüşşafaka</td>

</tr>

<tr>

<td>Afyon</td>

<td>Tofaş</td>

</tr>

<tr>

<td>Gaziantep</td>

<td>Anadolu Efes</td>

</tr>

<tr>

<td>Banvit</td>

</tr>

</tbody>

</table>

</body>

Çıktı:

HTML Tablo Örnekleri 8:


<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>

<body>

<h1>TABLO ÖRNEKLERİ</h1>

<tr>

</tr>

<tr>

<td rowspan="2" colspan="2">TASARIM KODLAMA</td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

Çıktı:

Örnek 9:

HTML CSS Kodları:


<!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>

<!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>

<td>Soyad</td>

<td>Numara</td>

</tr>

<tr>

<td>Ahmet</td>

<td>Cansever</td>

</tr>

<tr>

<td>Hayri</td>

<td>Koçmarlar</td>

</tr>

<tr>

<td>Hüseyin</td>

<td>Öztürk</td>

</tr>

<tr>

<td>İlkiz</td>

</tr>

<tr>

<td>Recep</td>

<td>Ortaköylü</td>

</tr>

</table>

</body>

</html>

HTML Tablo Örnekleri

Tabloyu görüntüleme

Satırları Gruplandırma

Colspan niteliği

rowspan niteliği

Özet

HTML Tablo Örnekleri

2 Yorum

İptal Et

Tabloyu görüntüleme

Satırları Gruplandırma

Colspan niteliği

rowspan niteliği

Özet

HTML Tablo Örnekleri

Bunları da beğenebilirsiniz

2 Yorum