HTML Tablolar

Sayfa içeriği

› Tablo kavramı
› Sayfaya tablo eklemek
› Tablo özellikleri
› Tablo alanlarını birleştirmek
› Tablo için özel bir başlık eklemek

Tablo kavramı

Tablo, bilgileri sütunlara ve satırlara bölünmüş olarak düzenli bir şekilde görüntülemeni sağlar.

Bu derste tablo oluşturmayı, tabloya satır eklemeyi, tabloya sütun eklemeyi, sütun ve çizgileri birleştirmeyi öğreneceksin.

Sayfaya tablo eklemek

Sayfada bir tablo görüntülemek için, aşağıdaki etiketleri kullanarak istediğin şekilde oluşturabilirsin:

<table> </table>, tarayıcıya bir tablo görüntülemek istediğin söylemek için ayarlamanı gereken ana etikettir.
<tr> </tr> Tabloya bir satır eklemek için kullanılır.
<th> </th> içine koyduğun herhangi bir metnin başlığı gibi, kalın ve ortada görünen bir satıra bir alan eklemek için kullanırsın. örneklerde daha çok anlatacağım.
<td> </td> Normal bilgileri temsil eden bir satır kutusu eklemek için kullanırsın, içine koyduğun metin normal bir metin olarak görünür.

Teknik Bilgiler

Genel olarak Bahsettiğim etiketler, tabloyu oluşturmak için ihtiyacın olan etiketlerdir, ancak bunları tek başına kullanmanın tablonun tarayıcıda iyi görünmesini sağlamayacağını bilmeni gerekir, ancak bunu tabloya bazı HTML özellikleri ekleyerek veya tablo ile kullanılabilecek CSS kodunu kullanma.

Tabii ki CSS seni tablo tasarımı için harika olanaklar sunuyor, ancak HTML bize sadece ne sağladığına odaklandığımız ve çalıştığımız için, sadece HTML bize sağladığı özelliklere bakacağız.

Aşağıdaki örnekte 4 satırdan oluşan bir tablo ekledim ve her satırda 3 alan ekledim.

<table>
    <!−− Burada tablodaki ilk satırı tanımladık ve içine 3 başlık koyduk−−>
    <tr>
        <th>numara</th>
        <th>adı</th>
        <th>id</th>
    </tr>
    <!−− Burada tablodaki ikinci satırı tanımlıyoruz ve içine 3 normal alan koyuyoruz−−>
    <tr>
        <td>1</td>
        <td>kaneki kudo</td>
        <td>4868</td>
    </tr>
    <!−−Burada tablodaki üçüncü satırı tanımlıyoruz ve içine 3 normal alan koyuyoruz −−>
    <tr>
        <td>2</td>
        <td>mai </td>
        <td>anime</td>
    </tr>
    <!−− Burada tablodaki dördüncü satırı tanımlıyoruz ve içine 3 normal rakam koyuyoruz −−>
    <tr>
        <td>3</td>
        <td> miku</td>
        <td>anime</td>
    </tr>
</table>

kod dene

Tablo özellikleri

Daha iyi görünmesi için sütuna ekleyebileceğin üç özellik vardır ve bu özellikler:

border : Tablo yazı tiplerini göstermek için kullanabilirsin, onlara verdiğin sayı satırlar ve sütunlar arasına yerleştirilecek yazı tiplerinin boyutunu temsil eder.
width : Bunu tarayıcıya yaptırmak yerine tablonun genişliğini kendini belirlemek için kullanabilirsin, ona verdiğin sayı tablonun genişliğini temsil eder.
height : Bunu tarayıcıya yaptırmak yerine tablonun uzunluğunu kendini belirlemek için kullanabilirsin, ona verdiğin sayı tablonun uzunluğunu temsil eder.

Tablo satırlarının görünmesi için belirlediğim tüm örneklerde border="1" özelliğini ekleyeceğim.

HTML'deki beşinci sürümden başlayarak artık bu özellikleri kullanmıyoruz, çünkü artık tablo tasarımlarını CSS kullanarak değiştiriyoruz ve bunun için kullanabileceğimiz birçok özellik sağlıyor.
Bu derste bu özellikleri yalnızca açıklamayı daha net hale getirmek için kullanacağız.

Aşağıdaki örnekte, 1 piksel boyutunda tablo yazı tiplerini gösterdim.

<table border="1">
 ... 
</table>

kod dene

Aşağıdaki örnekte genişliği %100 ve yüksekliği 150 piksel olarak ayarladım bir tablo ekledim.

<table border="1" width="100%" height"150">
    ...
</table>

kod dene

Tablo alanlarını birleştirmek

Tablo alanlarını birleştirmek istiyorsan, bunun için kullanabileceğin iki özellik vardır:

colspan Aynı satırdaki hücreleri birleştirmek için kullanılır.
rowspan Birden fazla satırdaki hücreleri birleştirmek için kullanılır.

Not: colspan ve rowspan yalnızca <th> ve <td> etiketleriyle kullanılabilir.

Aşağıdaki örnekte, birinci satırdaki birinci ve ikinci hücreleri birleştirdim.

<table>
    <tr>
        <!−− Burada "A" harfinin bulunduğu alanda, bir boyutun arkasındaki iki alanda görüntülenecektir. −−>
        <td colspan="2">A</td>
        <td>B</td>
    </tr>
    <tr>
        <td>C</td>
        <td>D</td>
        <td>E</td>
    </tr>
</table>

kod dene

Aşağıdaki örnekte, ilk satırdaki ikinci hücreyi ikinci satırdaki ikinci hücreyle birleştirdim.

<table>
    <tr>
        <!−− Burada 'B' harfi ile hücre birbirlerine altında iki kutuda görüntülenir belirttim.−−>
        <td>A</td>
        <td rowspan="2">B</td>
        <td>C</td>
    </tr>
    <tr>
        <td>D</td>
        <td>E</td>
    </tr>
</table>

kod dene

Aşağıdaki örnekte, ikinci satırdaki ikinci ve üçüncü hücreyi, üçüncü satırdaki ikinci ve üçüncü hücreyle birleştirdim.

<table>
    <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
    </tr>
    <tr>
        <!−−Burada içinde 'E' harfi bulunan alan aynı satırda iki alanda ve hemen altında iki alanda görüntülenecektir.−−>
        <td>D</td>
        <td colspan="2" rowspan="2">E</td>
    </tr>
    <tr>
        <td>F</td>
    </tr>
</table>

kod dene

Tablo için özel bir başlık eklemek

Tablo için özel bir başlık eklemek istiyorsan, başlığı <caption> </caption> etiketinin içine bu etiketin tabloda ilk etiket olarak yerleştirilmesi gerektiğini belirterek yazabilirsin.

Aşağıdaki örnekte, tablo için <caption> etiketi ile bir başlık ekledim.

<table>
    <caption>en sevdiğim karakterler</caption>
</table>

kod dene

önceki ders sonraki ders