Giri┼č yap

HTML'de Tablolar

Tablolar, sat─▒r ve s├╝tunlardan olu┼čur. Ayr─▒ca tablonun header'─▒ yani ba┼čl─▒klar─▒n─▒n oldu─ču k─▒s─▒m, i├žerik k─▒sm─▒ ve footer dedi─čimiz alt k─▒sm─▒ bulunur. Tabi bunlar─▒n HTML'de her birisinin etiket kar┼č─▒l─▒─č─▒ vard─▒r. ┼×imdi h─▒zl─▒ca bir ├Ârnek inceleyelim;

<table border="1" width="100%">
    <tbody>
        <tr>
            <td>Tayfun Erbilen</td>
            <td>26/td>
        </tr>
        <tr>
            <td>Ahmet Aslan</td>
            <td>22</td>
        </tr>
    </tbody>
</table>

┼×imdi tahmin edebilece─činiz ├╝zere <table> etiketi burada tabloyu temsil ediyor bu arada border="1" tablonun ├žizgilerini belirlemek i├žin kullan─▒l─▒yor. Bunu daha sonra CSS'le yapaca─č─▒z ancak ┼čimdilik ├Ârnekleri g├Ârebilmek ad─▒na ├žer├ževeyi 1 yaparak g├Ârebiliriz. Ve fark etti─činiz ├╝zere di─čer tablo etiketleri bu etiketin i├žerisine yaz─▒l─▒yor. Ayr─▒ca width="100%" ile tablonun geni┼čli─čini 100% olarak belirlemek i├žin kulland─▒k. <tbody> ise, tablonun i├žeri─činin yer ald─▒─č─▒ etikettir. ─░├žerisinde ise sat─▒rlar i├žin <tr> s├╝tunlar i├žin <td> etiketleri vard─▒r. Birden fazla sat─▒rl─▒ tablo i├žin birden fazla <tr> eklenmektedir. Yukar─▒daki kodlar─▒n ├ž─▒kt─▒s─▒ ┼č├Âyle g├Âz├╝kecektir;

HTML'de Header (Ba┼čl─▒k)

Tablonun ba┼čl─▒k k─▒sm─▒n─▒ belirlemek i├žin <thead> etiket kullan─▒l─▒yor. ─░├žerisinde sat─▒rlar i├žin yine <tr> etiketi ancak s├╝tunlar─▒ i├žin bu sefer <th> etiketi geliyor. Hemen bir ├Ârnek verelim;

<table border="1" width="100%">
    <thead>
        <tr>
            <th>Ay</th>
            <th>Kazan├ž</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Ocak</td>
            <td>100Ôé║</td>
        </tr>
        <tr>
            <td>┼×ubat</td>
            <td>200Ôé║</td>
        </tr>
    </tbody>
</table>

Taray─▒c─▒da ├ž─▒kt─▒s─▒ ise ┼č├Âyle olacakt─▒r;

Ayn─▒ zamanda tablonun alt bilgisini belirlemek i├žin <tfoot> etiketi kullan─▒l─▒yor. Bu ba─člamda asl─▒nda <table> etiketi 3 etiketten ibaret, ba┼čl─▒k i├žin <thead> tablo i├žeri─či i├žin <tbody> ve alt bilgi i├žinde <tfoot> etiketi. Bir ├Ârnekle anlaml─▒ k─▒lal─▒m.

<table border="1" width="100%">
    <thead>
        <tr>
            <th>Ad-soyad</th>
            <th>Ya┼č</th>
        </tr>
    </thead>
    <tbody>
       <tr>
            <td>Ocak</td>
            <td>100Ôé║</td>
        </tr>
        <tr>
            <td>┼×ubat</td>
            <td>200Ôé║</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Toplam</td>
            <td>300Ôé║</td>
        </tr>
    </tfoot>
</table>

Bu kodlar─▒n ├ž─▒kt─▒s─▒ ise ┼č├Âyle olacakt─▒r;

HTML'de colspan ve rowspan Nitelikleri

HTML'de s├╝tunlar─▒ birle┼čtirmek i├žin colspan niteli─či, sat─▒rlar─▒ birle┼čtirmek i├žin rowspan niteli─či kullan─▒l─▒r. ├ľrnek vermek gerekirse;

<table border="1" width="100%">
    <thead>
        <tr>
            <th>Y─▒l</th>
            <th>─░sim</th>
            <th>Meslek</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2">2019</td>
            <td>Tayfun Erbilen</td>
            <td>Web Developer</td>
        </tr>
        <tr>
            <td colspan="2">Mehmet Seven - Web Developer</td>
        </tr>
    </tbody>
</table>

Bu ├Ârnekte ben ilk sat─▒rda 1. s├╝tunu yani y─▒l de─čerini rowspan="2" diyerek 2 sat─▒r─▒ birle┼čtirdim. Yani 2. sat─▒rda g├Ârd├╝─č├╝n├╝z gibi bir daha y─▒l yazmad─▒m ├ž├╝nk├╝ ├╝stte 2 sat─▒r─▒ birle┼čtirmi┼čtim bu y├╝zden. 2. sat─▒rda ise bu sefer 2 s├╝tunu birle┼čtirdim. Bunuda colspan="2" diyerek yapt─▒m. Yani ─░sim ve Meslek alanlar─▒n─▒ tek bir s├╝tunda yazd─▒rm─▒┼č oldum. Bu kodlar─▒n sonucu ise ┼č├Âyle olacakt─▒r;

┼×imdilik tablo ile ilgili s├Âyleyeceklerim bu kadar, HTML Etiket Listesi sayfas─▒ndan zaten t├╝m etiketleri tek tek inceleyebilirsiniz, oradan bu etiketlerin tamam─▒n─▒n daha ayr─▒nt─▒l─▒ bir listesine ula┼čabilirsiniz.

Tayfun Erbilen
74 g├╝n ├Ânce yazd─▒. Son g├╝ncelleme: 71 g├╝n ├Ânce