Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages

Örnek Arama: Html renkler , php veri tabanı bağlantısı

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:

Ülke Nüfus Kıta
Almanya 100M Avrupa

 

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:

Ülke Nüfus Kıta
Almanya 100M Avrupa
Türkiye 75M Avrasya
Nijerya 100M Afrika
Kanada 32M Amerika

 

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:

Ülke Nüfus Kıta
Almanya 100M Avrupa
Türkiye 75M Avrasya
Nijerya 100M Afrika
Kanada 32M Amerika
5 1 vote
Article Rating
Subscribe
Bildir
guest
2 Yorum
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Sinem
Sinem
10 ay ö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.