HTML TABLO olusturma
Biz görmüyoruz ama web siteleri tablolardan ibarettir. Yoksa düzenli olmaları çok zor. O menü blokları, çerçeveler hep tablodur. Şimdi bu tabloları nasıl oluşturacağımızı, nasıl satır sütun ekliyeceğimizi görelim.Tablo tanımı <table> </table> şeklinde olur. Biz satır ve sütunları içine koyarız. <tr></tr> satır, <td></td> sütundur.
Örnekleyelim;
<table>
<tr>
<td>tablo yapmak</td>
</tr>
</table>
Bu şekilde sadece tablo yaptım yazısını görürüz ama. Çünkü bunda kenarlık yok, tablo olduğunu fark edemeyiz. (ki web sitelerindeki onlarca tabloyu bundan dolayı görmüyoruz) Şimdi de 1 piksellik kenarlık koyalım görebilelim diye. border=”1″
<table border=”1″>
<tr>
<td>tablo yapmak</td>
</tr>
</table>
Çıktısı:
| tablo yapmak |
Aa ne şeker oldu. Hadi gelin şimdi buna bir satır ekleyelim.
<table border=”1″>
<tr>
<td>tablo yapmak</td>
</tr>
<tr>
<td>tablo yapmak</td>
</tr>
</table>
Çıktısı:
| tablo yapmak |
| tablo yapmak |
İnanamıyorum böyle güzel tablo görmedim hayatımda. Hadi sütun ekleyelim.
<table border=”1″>
<tr>
<td>tablo yapmak</td> <td>tablo yapmak</td>
</tr>
<tr>
<td>tablo yapmak</td> <td>tablo yapmak</td>
</tr>
</table>
Çıktısı:
| tablo yapmak | tablo yapmak |
| tablo yapmak | tablo yapmak |
Tek satırda 2 sütun:
<table border=”1″>
<tr>
<td>tablo yapmak</td> <td>tablo yapmak</td>
</tr>
</table>
| tablo yapmak | tablo yapmak |
Tablo özellikleri
Bence anlaşılmıştır bunlar. Şimdi tablo özelliklerini kurcalayalım.
<table align=”center” bgcolor=”#FFFFCC” cellpadding=”5″ cellspacing=”5″ width=”300″>
<tr>
<td>tablo yapmak</td><td>tablo yapmak</td>
</tr>
</table>
Çıktısı:
| tablo yapmak | tablo yapmak |
Şimdi anlatayım burada kullanılanları;
align=”center” tabloyu ortalar.(firefox için benim site sitilleri şu an engelliyor bakmayın ortalamadığına)
bgcolor arkaplan rengi
cellpadding hücre içi boşluk
cellspacing hücreler arası boşluk
width tablo genişliği (piksel olarak bunlar hep). width içinde yüzde de kullanabilirsiniz. 100% yaparsanız tam genişlik alır.
bir de height vardır. tablo yüksekliği.
bir de şunu bilelim background=”resim.gif” şeklinde arkaplan resmini tanımlıyabiliriz.
Hadi şimdi hücre içi özelliklere geçelim. (kalabalık:hadi geçelliiiiim vuuaaaaa)
<table border=”1″ align=”right” bgcolor=”#FFFFCC” cellpadding=”5″ cellspacing=”5″ width=”300″>
<tr>
<td align=”right” bgcolor=”#CCFFCC” bordercolor=”#333333″ valign=”top” height=”100″ width=”200″>tablo yapmak</td><td bgcolor=”#FF9933″ align=”center” valign=”bottom”>tablo yapmak</td>
</tr>
</table>
çıktısı:
| tablo yapmak | tablo yapmak |
Sol hücredeki özellikler:
align hücre içi yazı hizalaması. tabloda kullandığımız tablonun sayfa içindeki konumuydu. ama hücre için hücre içi yazıların hizalaması. burada ortaladık.
bgcolor yine arkaplan rengi. tablodan bağımsız olduğunu görebilesiniz diye ayrı ayrı yaptım. kenarlıklar tablo arkaplanı renginde dikkatinizi yolarım.
bordercolor kenarlık rengi tabiki
valign
hücre içindeki yazıların dikey hizalaması. (vertical align)
height yükseklik. burada 2 hücreyi farklı yükseklikte yapamazsınız. yaparsanız da büyüğünki kullanılır(tarayıcıya göre).
width de hücre genişliği. tablo genişliğine 300 demiştik , 200ünü soldaki hücreye ayırdık ve diğerine 100 kaldı. % kullanarak ta yapılabilirdi.
Tablo başlığı
<tr> yerine <th> kullanılarak tanımlanır.
<table border=”1″ >
<tr>
<th>tablo başlığı</th>
</tr>
<tr>
<td>tablo yapmak</td>
</tr>
</table>
çıktısı:
| tablo başlığı |
|---|
| tablo yapmak |
Böylece başlık hücresi içindekiler direk header oldu.
Son olarak da ;
<table border=”1″ >
<tr>
<td rowspan=”2″>tablo yapmak</td> <td>tablo yapmak</td>
</tr>
<tr>
<td>tablo yapmak</td>
</tr>
</table>
| tablo yapmak | tablo yapmak |
| tablo yapmak |
Bir de;
<table border=”1″ >
<tr>
<td>tablo yapmak</td>
<td>tablo yapmak</td>
</tr>
<tr>
<td colspan=”2″>tablo yapmak</td>
</tr>
</table>
| tablo yapmak | tablo yapmak |
| tablo yapmak | |
Bunları da colspan ve rowspan kullanarak yaptık. Hücre sayısını yazıyoruz içine. Bu yapıda birşey kaçırırsanız tablolarınız kayar. yani yukarda 3 hücre olsaydı biz colspan=”2″ yazsaydık olmazdı tabi.
Şimdilik anlatacaklarım bu kadar.
Oldu html’ler…