HTML Tablo Oluşturma

HTML’de tablo oluşturmak ve tabloları iyi bir şekilde kullanmak oldukça önemlidir. Hatta eski tarz web sitelerinde div yapıları yerine tablolar kullanılıyordu. Ancak günümüzde tablolar sadece tablo yapmak amacıyla kullanılmaktadır.

Tablo oluşturmak için ilk adım ;

< table > ……… < /table >

etiketlerini oluşturmaktır.

Örnek:

<table> </table>

Tablolarda Satır Oluşturma

Tablo oluşturma mantığında satır oluşturmak ilk sırada gelir daha sonra satırlar içerisine sütunlar oluşturmamız gerekmektedir. Tablolarda satır oluşturmak için Table Row (Tablo satırı) kısaltması olan < tr > yapıları kullanırız.

<table> 
     <tr>    </tr>
     <tr>    </tr>
</table>

Tablolarda Sütun Oluşturma

Yukarıdaki örnekte tablomun iki satırı bulunmaktadır. Ancak herhangi bir kolon bulunmamaktadır. Kolonları oluşturmak için de Table Description veya Table Heading yani tablo açıklaması veya tablo başlığı anlamına gelen

< td > ve < th > yapılarını kullanırız.

Örnek:

<table> 
     <tr>
             <th>Ülke</th> 
             <th>Nüfus</th>
             <th>Kıta</th>
     </tr>
     <tr>    
             <td>Almanya</td> 
             <td>100M</td>
             <td>Avrupa</td>
    </tr>
</table>

Önizleme:

Aynı örneği genişletmek için bir kaç satır ve sutun daha ekleyelim.

Örnek:

<table> 
     <tr>
             <th>Ülke</th> 
             <th>Nüfus</th>
             <th>Kıta</th>
     </tr>
     <tr>    
             <td>Almanya</td> 
             <td>100M</td>
             <td>Avrupa</td>
    </tr>

     <tr>    
             <td>Türkiye</td> 
             <td>75M</td>
             <td>Avrasya</td>
    </tr>

     <tr>    
             <td>Nijerya</td> 
             <td>100M</td>
             <td>Afrika</td>
    </tr>

     <tr>    
             <td>Kanada</td> 
             <td>32M</td>
             <td>Amerika</td>
    </tr>
</table>

Önizleme:

Teknik olarak tabloyu oluşturmuş olsak bile tasarımlar eksiklikleri bulunmaktadır. Bu yüzden stil kodları ile bir kaç dokunuş yapabiliriz.

Örnek:

<table style="width:100%;border:1px solid tomato; border-collapse: collapse;"> 
     <tr style="border:1px solid tomato; border-collapse: collapse;">
             <th>Ülke</th> 
             <th>Nüfus</th>
             <th>Kıta</th>
     </tr>
     <tr style="border:1px solid tomato; border-collapse: collapse;">    
             <td style="border:1px solid tomato; border-collapse: collapse;">Almanya</td> 
             <td style="border:1px solid tomato; border-collapse: collapse;">100M</td>
             <td style="border:1px solid tomato; border-collapse: collapse;">Avrupa</td>
    </tr >

     <tr style="border:1px solid tomato; border-collapse: collapse;">    
             <td style="border:1px solid tomato; border-collapse: collapse;">Türkiye</td> 
             <td style="border:1px solid tomato; border-collapse: collapse;">75M</td>
             <td style="border:1px solid tomato; border-collapse: collapse;">Avrasya</td>
    </tr>

     <tr style="border:1px solid tomato; border-collapse: collapse;" >    
             <td style="border: 1px solid tomato; border-collapse: collapse;>Nijerya</td> 
             <td style="border: 1px solid tomato; border-collapse: collapse;>100M</td>
             <td style="border: 1px solid tomato; border-collapse: collapse;>Afrika</td>
    </tr>

     <tr style="border:1px solid tomato; border-collapse: collapse;" >    
             <td style="border:1px solid tomato; border-collapse: collapse;">Kanada</td> 
             <td style="border:1px solid tomato; border-collapse: collapse;">32M</td>
             <td style="border:1px solid tomato; border-collapse: collapse;">Amerika</td>
    </tr>
</table>

Önizleme: