Tasarım Kodlama
FacebookTwitterRedditEmailWhatsApp
HTML

HTML Tablo Örnekleri

Kasım 13, 2019
2 yorum
4 dakika
FacebookTwitterRedditEmailWhatsApp

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.

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

HTML Tablo Örnekleri 1
HTML Tablo Örnekleri 1

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

HTML Tablo Örnekleri 2
HTML Tablo Örnekleri 2

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

HTML Tablo Örnekleri 3
HTML Tablo Örnekleri 3

 

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.

İş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>&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>
 

Çıktı:

HTML Tablo Örnekleri 5
HTML Tablo Örnekleri 5

 

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

Çıktı:

HTML Tablo Örnekleri 6
HTML Tablo Örnekleri 6

 

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 7
HTML Tablo Örnekleri 7

 

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

HTML Tablo Örnekleri 8
HTML Tablo Örnekleri 8

 

 

FacebookTwitterRedditEmailWhatsApp

2 yorum

Bunlar da ilginizi çekebilir

CSSHTML

Div İçindeki Elemanları Ortalama

Bir div içindeki elemanları CSS kullanarak ortalayabilirsiniz. Div içindeki elemanları ortalamak için postion, table gibi display özellikleri yanı sıra 2017den beri güncel olarak kullanılan flex özelliğini kullanarak...

admin
Yorum yap
HTML

HTML Tablo Hücre Birleştirme Örnekleri

Bu yazıda HTML ile oluşturulan tabloarın hücrelerini nasıl birleştireceğinizi göstereceğim. HTML ile hücre birleştirme iki şekilde olmaktadır. Hücreler yatay (satır ) olarak  birleştirile bileceği gibi dikey (sütun)...

admin
3 yorum