Yazar: merhaba değerli arkadaşlar.
bu yazımda html 3.2 ile gelen, hatta dahada belirginleşen tablolar yapısını sizlere anlatacağım.
html dilinde bir web sayfasında nesnelerin daha düzgün gözükmesi için tablo yapısı kullanılmakta ve web sayfasında harika bir görsel elde etmenize olanak sağlamaktadır.
her ne kadar <div> etiketinin gelmesiyle pek tercih edilmesede tablo konusu oldukça önemli ve mutlaka bilmeniz gereken bir yapıdır.
şimdi tablo nasıl yazılır ve hangi etiketler kullanılır hepsine tek tek bakalım.
<table>>… </table>
tablo yapısını oluşturan temel etikettir.
<tr> … </tr>
tablomuzun satırlarını oluşturmak için bu etiketi kullanacağız.
<td>… </td>
sütunları belirtirken bu etiket kullanılır.
<TABLE BORDER=X CELLPADDING=X CELLSPACING=X WIDTH=[% veya X] HEIGHT=[% veya X] BGCOLOR=X BACKGROUND=”X”>
BORDER değişkenine verilecek 0 veya daha üstü bir değer tablonun kalınlığını belirler. CELLPADDING değişkenine verilebilecek herhangi bir sayı, tablonun sınırları ile tablo içeriği arasındaki mesafeyi, CELLSPACING ise hücreler arasındaki mesafeyi belirler.
WIDTH ve HEIGHT değişkenleri bir yüzde değeri veya bir sayı olabilir. WIDTH=590 değeri verildiğinde 640*480 çözünürlükte ekranın tüm genişliğini kaplayacak bir tablo oluşturulur. WIDTH=%50 değerini verildiğinizde ise Web tarayıcınız o tablonun her zaman ekran genişliğinin yarısını kaplamasını sağlar.
<TABLE> tag’ının içerisinde kullanılan BGCOLOR değişkeni tablonun fon rengini tayin eder. X değeri geçen aylarda değindiğimiz HEX kodlarından (#FFFF00) veya renk isimlerinden (white, olive…) biri olmalıdır. Tablonuz daha canlı ve profesyonel görünsün istiyorsanız, arka fonuna bir GIF veya JPG resmini de BACKGROUND ekini kullanarak döşetebilirsiniz.
Gelelim tablonun oluşturulmasına. Genel prensip şudur: <TABLE> tag’ıyla tabloya başladıktan sonra her satırı oluşturmak için <TR>, her sütunu oluşturmak için ise <TD> tag’ını kullanmalısınız. Aman bu tagları kullanıyorsanız her satırın sonuna </TR> ve her sütunun sonuna </TD> tag’larının koymayı unutmayın!
Bir diğer durum da, herhangi bir hücrenin yanındaki iki ya da daha çok hücreyi enine ya da boyuna doğru içine almasıdır ki bu işlemi yapmak için <TD [COLSPAN=X, ROWSPAN=X]> veya <TR [COLSPAN=X, ROWSPAN=X]> ekleri kullanılır. Örneğin 2 satır ve 2 sütunlu 1.tablonun oluşturulması için aşağıdaki kodlara ihtiyaç vardır, bu kodlar aynı zamanda COLSPAN ve ROWSPAN eklerini de anlatmaktadır.
<TABLE BORDER=1 CELLSPACING=2 CELLPADDING=3>
<!—Bu kodlarla, çerçeve kalınlığı 1, hücreler arası boşluğu 2, hücre ile yazı aralığı 3 olan yeni bir tablo oluşturuyoruz.—>
<TR><TH COLSPAN=2> <!—iki kolonu içine alacak, yazılar kalın olacak ve ortalanacak (yani başlık olacak) —>
Tablo Örneği:
</TR></TD><TR><TD>
deneme1
</TD><TD> <!– yeni bir kolona başlıyoruz… –>
deneme2
</TR></TD><TR><TD>
deneme3
</TD><TD> <!– yeni bir kolona başlıyoruz… –>
deneme4
</TD></TR></TABLE> <!– tüm tag’ları kapatıp tabloyu sonlandırıyoruz. –>
Eğer renkli tablolar elde etmek isteseydik <TABLE …. ifadesinin yanına BGCOLOR=”#FFFF80″, <TD.. ifadesinin yanına ise BGCOLOR=”#000080″ eklerini girmeniz gerekecekti.
yukarıdaki komutlar ile kendi html tablolarınızı oluşturabilirsiniz.
tablolar ile ilgili soru ve sorunlarınızı yazımın altındaki yorumlar kısmından bana iletebilirsiniz.
iyi bloglamalar herkese.
Bir önceki yazımız olan html formlar başlıklı makalemizde html form etiketi, html form etiketi kullanımı ve html formlar hakkında bilgiler verilmektedir.