HTML Tablolar - ASLIHAN KARATAŞ

HTML’de tablolar, verilerin satır ve sütunlar halinde düzenlenmesini sağlar. Tablo oluşturmak için temel olarak <table> etiketini kullanırız. İçinde satırlar <tr>, sütunlar ise <td> (tablo verisi) etiketiyle oluşturulur. Başlıklar için ise <th> (tablo başlığı) kullanılır.

Örnek

<html>
<head>
    <title>Basit Tablo</title>
</head>
<body>
    <h1>Tablo Örneği</h1>
    <table border="1">
        <tr>
            <th>Ad</th>
            <th>Soyad</th>
            <th>Yaş</th>
        </tr>
        <tr>
            <td>Ali</td>
            <td>Yılmaz</td>
            <td>30</td>
        </tr>
        <tr>
            <td>Ayşe</td>
            <td>Demir</td>
            <td>25</td>
        </tr>
    </table>
</body>
</html>

<table>: Tabloyu başlatır.
<tr>: Tablo satırını oluşturur.
<th>: Başlık hücresi oluşturur, metni kalın ve ortalanmış gösterir.
<td>: Normal tablo hücresidir.
border=”1″: Tabloya kenarlık eklemek için kullanılır.

Bazı durumlarda hücreleri yatay veya dikey olarak birleştirmeniz gerekebilir. Bunun için:

colspan: Bir hücreyi yatayda (sütun boyunca) birleştirmek için kullanılır.
rowspan: Bir hücreyi dikeyde (satır boyunca) birleştirmek için kullanılır.

<html>
<head>
    <title>Hücre Birleştirme</title>
</head>
<body>
    <h1>Hücre Birleştirme Örneği</h1>
    <table border="1">
        <tr>
            <th>Ad</th>
            <th colspan="2">Detaylar</th>
        </tr>
        <tr>
            <td>Ali</td>
            <td>Yılmaz</td>
            <td>30</td>
        </tr>
        <tr>
            <td>Ayşe</td>
            <td colspan="2">Bilgi yok</td>
        </tr>
    </table>
</body>
</html>

Tablonuza bir başlık eklemek için <caption> etiketini kullanabilirsiniz. Bu, tabloyu tanımlayan bir başlık sağlar ve genellikle tablonun üstünde gösterilir.

<caption>Öğrenci Bilgileri</caption>

cellpadding: Hücre içi boşluğu ayarlar.
cellspacing: Hücreler arasındaki boşluğu ayarlar.

<table border="1" cellpadding="10" cellspacing="0">

Bir cevap yazın Yanıtı iptal et