HTML Tablo Yapımı - vatangenclik 
ANASAYFA KÜNYE İLETİŞİM REKLAM GİZLİLİK POLİTİKASI SİTE HARİTASI

HTML Tablo Yapımı

HTML tablo nasıl yapılır? HTML tablolar nasıl düzenlenir? Genişlik ayarları nasıl yapılır? Tablo kenarlıkları nasıl kaldırılır? -->


HTML Tablo Yapımı


Tablolar

HTML dosyasında tablo oluşturmak için 3 temel kodu bilmemiz yeterli bu kodlar aşağıdaki gibidir.


Kod ve Anlamı

<table> - Tabloya başlamak.

<tr>  - Satıra başlamak.

<td> - Sütuna başlamak.


HTML Tablo Yapımı

   <table>

      <tr>

         <td>satır 1, sütun 1</td>

         <td>satır 1, sütun 2</td>

      </tr>

      <tr>

         <td>satır 2, sütun 1</td>

         <td>satır 2, sütun 2</td>

      </tr>

   </table>


Burada dikkat edilmesi gereken birkaç nokta var. Birincisi mutlaka satırlardaki sütun sayıları eşit olmalıdır. Eşitlik saglanmas ise tablo biçimsiz bir şekil alır.

Eğer iki sütunu birleştirmek istiyorsak colspan="" ya da iki satırı birleştireceksek rowspan="" özelliğini td kodu içerisinde kullanarak tırnak işareti arasına kaç sütun ya da satır birleştiğini yazmamız gereklidir.


 HTML Kodu Örnek

   <table border="1">

      <tr>

         <td colspan="2">satır 1, sütun 1 ve 2 birleşti</td>

      </tr>

      <tr>

         <td rowspan="2">satır 2 ve 3 birleşti, sütun 1</td>

         <td>satır 2, sütun 2</td>

      </tr>

      <tr>

         <td>satır 3, sütun 2</td>

      </tr>

   </table>


Dikkat etmiz gereken nokta rowspan="2" kullandığımız satırdan sonra sadece tek sütun kullandık. Rowspan kullanıldıktan sonra bir sütun eksiltmemiz gerekmektedir.


Tablo Özellikleri


Özellik Anlamı

border="0" Tablo kenarlığı boyutu. 0 yazan alan tablo kenarlığının ne kadar kalın olmasını istiyorsak o kadar yüksek olmalıdır.

cellspacing="0" Sütunlar arası kenarlık boşluğu. Sütunlar arası bosluk en az seviyede olsun diyorsanız 0 gayet iyi bir seçim.

cellpadding="0" Satırlar arası kenarlık boşluğu. Kenarlar arasında ki boşluğun en düşük seviyede olmasını istiyorsak 0 gayet iyi bir seçim.

width="genislik" Tablo genişliği. Piksel ya da yüzde olarak ifade edilebilir.

Responsive tasarım olmasını istiyorsak yüzde (100%) olarak ifade etmek daha makul olur.


TD (Sütun) Özellikleri


Özellik Anlamı

align="hiza" Kutu hizası, left, right, center kullanılabilir.

width="genislik" Tablo genişliği. Piksel ya da yüzde olarak ifade edilebilir.

height="yukseklik" Tablo yüksekliği. Piksel ya da yüzde olarak ifade edilebilir.

Unutmayın eğer bir sütuna hiçbir şey yazmadan boş bırakırsak sütun görünmeyecektir.

Bu sorunu çözmek için &nbsp; kullanarak kutuda boşluk karakterine yer verirseniz kenarlıkların göründüğünü göreceksiniz.

Tweet Follow @90DURAN Tweet to @90DURAN
Yorumlar
Ad



Soyad



E-Mail



Yorum






Anasayfa Hakkımızda İletişim Gizlilik Politikası Site Haritası

vatangenclik.com 2017