HTML / Uncategorized

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:

ÜlkeNüfusKıta
Almanya100MAvrupa

 

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:

ÜlkeNüfusKıta
Almanya100MAvrupa
Türkiye75MAvrasya
Nijerya100MAfrika
Kanada32MAmerika

 

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:

ÜlkeNüfusKıta
Almanya100MAvrupa
Türkiye75MAvrasya
Nijerya100MAfrika
Kanada32MAmerika
5 2 votes
Article Rating
Subscribe
Bildir
guest
2 Yorum
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Sinem
Sinem
1 yıl önce

Çağrı bey tablo içindeki elemanları ortalamak istiyorum. bunu nasıl yaparım ? dikkat tabloyu değil tablo içindeki elemanarı ortalamak istiyorum.