html - tablolar
|
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> 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″> Çıktısı:
Aa ne şeker oldu. Hadi gelin şimdi buna bir satır ekleyelim. <table border=”1″> Çıktısı:
İnanamıyorum böyle güzel tablo görmedim hayatımda. Hadi sütun ekleyelim. <table border=”1″> Çıktısı:
Tek satırda 2 sütun: <table border=”1″>
Tablo özellikleri Bence anlaşılmıştır bunlar. Şimdi tablo özelliklerini kurcalayalım. <table align=”center” bgcolor=”#FFFFCC” cellpadding=”5″ cellspacing=”5″ width=”300″> Çıktısı:
Ş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″> çıktısı:
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″ > çıktısı:
Böylece başlık hücresi içindekiler direk header oldu. Son olarak da ; <table border=”1″ >
Bir de; <table border=”1″ >
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… | ||||||||||||||||||||||

17 Mayıs, 2007 saat 13:27
[...] istatistiklerini incelerken şuraya Google’dan “html tablo içinde tablo yapmak” diye aratarak baya bir kişinin [...]
17 Mayıs, 2007 saat 13:55
htm l> tablo içinde tablo yapmak > burada
17 Eylül, 2007 saat 23:14
Html tablo oluşturmak…
Html kullanarak tablo oluşturmak ile ilgili ayrıntılı anlatım….
5 Ekim, 2008 saat 19:52
içi renkli boş tablo yapmak istiyorum ama olmuyor nasıl yapacagını bilen varsa soylermi

4 tablo olacak 4 üde başka renk olacak
5 Ekim, 2008 saat 20:11
@yasemin,
sorunu tam anlayamadım. boş tablo yapamazsın. içine en fazla boşluk karakteri olan koyabilirsin.
peki 4 tablo derken? nasıl yani?
sorunu biraz daha açıklarsan yardımcı olayım.