Bücdet - Bilginin Sayfası

Tablo Biçimi

Bu bölümde güzel güzel tablolar yapmayı öğrenmekle kalmayacağız, iyi bir web sitesinin iskeletini oluşturmayı ve yerleşim planını tasarlamayı öğreneceğiz. Bu sayfayı bitirdikten sonra benim gözümde artık sizler birer HTML web tasarımcısısınız. (Bu gaz sizi bu sayfalık idare eder.)

Tablo Oluşturma

HTML'de tablolar <table> koduyla başlar, </table> koduyla biter. HTML'de tabloyu satır satır tanımlayarak kodlarız. Biliyoruz ki her tabloda en az bir satır vardır; HTML'de satır kodları <tr> (table row) koduyla başlar ve </tr> koduyla biter. Tabi her satırda kaç hücre (sütun) olacağı da belirtilmeli. Her satırda en az bir hücre vardır ve satırdaki her hücre HTML'de <td> (table data) koduyla başlar ve </td> biter.

Tabi pek birşey anlamadınız. Basit bir uygulama yaparsak, yukarıda anlattıklarım daha iyi anlaşılacaktır. Mesela 3 satırlı 3 sütunlu bir tablo yapalım.

Bu uygulamada neler yaptık? <table> komutuyla tablo için gereken kodları yazmaya başlamış olduk. HTML'de tablolar; daha önce dediğim gibi, satır satır işlenir. Biz de <tr>...</tr> kodlarıyla bu tabloyu satır satır işledik. İlk satıra üç tane hücre işledik, bunun için de <td>...</td> kodlarını kullandık. İlk satırda üç tane hücre olduğundan, üç defa <td>...</td> kodu yazdık. Yaptığımız işi özetlersek, üç satır için üç defa <tr>...</tr> kodunu kullandık. Her satırda da üçer tane hücre yapmak için, toplam dokuz defa <td>...</td> kullanmış olduk.

Tablo Sınır Çizgisi

Tabi uygulamada yaptığımız tablo pek birşeye benzemedi. Çünkü kupkuru <table> kodu sadece tablonun olduğunu belirtir, tabloyu biçimlendirmek için bazı parametrelere ihtiyacımız vardır. Bunlardan bir tanesi de border (sınır/çerçeve) parametresidir; tablo çerçevesinin kalınlığını gösterir. border parametresi için varsayılan değer 0'dır. Tablonun kaç hücreden oluştuğunu daha rahat görebilmeniz için border değerini 1 olarak alıyorum. Aynı örnekte deneyelim:

Tablomuzda sınır çizgileri hücrelerin dört yanını da kapatmaktadır. Ama böyle olması şart değil. frame (çerçeve) parametresine aşağıdaki değerleri vererer tablomuza başka biçimler verebiliriz:

above-Sadece hücre üstlerindeki sınır çizgilerini gösterir.

below-Sadece hücre altlarındaki sınır çizgilerini gösterir.

vsides-Sadece düşey sınır çizgilerini gösterir.

hsides-Sadece yatay sınır çizgilerini gösterir.

rhs-Sadece sağ düşey sınır çizgilerini gösterir.

lhs-Sadece sol düşey sınır çizgilerini gösterir.

box-Tüm sınır çizgilerini gösterir.

border-Tüm sınır çizgilerini gösterir.

void-Sınır çizgilerini göstermez.

Not: frame parametresini sadece IE4 ve üstü destekliyor.

frame parametresine benzeyen bir başka parametre de rules parametresi. Bu parametre de sadece IE ve üzeri gözatıcılar tarafından destekleniyor. Parametreye şu değerleri verebilirsiniz:

rows-Sadece satır çizgilerini gösterir.

cols-Sadece sütun çizgilerini gösterir.

all-Tüm çizgileri gösterir.

groups-Sadece tablonun etrafındaki çizgileri gösterir.

none-Sınır çizgilerini göstermez.

Bu parametrelerle ilgili uygulamaları size bırakıyorum. Bu sayfayı çok fazla doldurmayayım.

Tablo Boyutlandırma

Evet, artık çerçevesi olan bir tablomuz var. Ama tablomuzun ve hücrelerinin boyutları pek güzel değil, HTML hücrelerin genişliğine göre ölçüler belirlemiş kendince. Bu gibi ölçüleri HTML'in insafına bırakmamalıyız. Bu nedenle <table> ve <td> kodları için width (genişlik) ve height (yükseklik) parametrelerini kullanacağız. Bu parametrelere piksel cinsinden değerler verebildiğimiz gibi, yüzde oranları da verebiliriz. Mesela "100%", "50%" vb. (İngilizcede yüzde işareti rakamların sonuna yazılır, tabi HTML'de de). Aşağıdaki uygulamaya bakalım.

Yaptığımız bu uygulamada tablonun genişliğini "90" değerine eşitledik. Böylece tablonun genişliği, pencerenin genişliğinin %90'ına eşilenmiş oldu. Pencerenin büyüklüğüyle oynarsanız, göreceksiniz ki bu oran değişmeyecektir. (Tabi pencereyi fazla küçültürseniz başka. Ben anlatmayım, siz görün.) Bu uygulamada tablonun genişliğini değiştirmekle kalmadık, sütunların genişliklerini de belirledik. Bunun için tablonun ilk satırındaki hücrelere width parametresi atadık. İlk hücrenin genişliği için 200 piksel, ikinci hücrenin genişliği için %20 değerlerini verdik. Son hücreye ise değer vermedik, zira tablonun genişliğini önceden belirlemiştik. Yani son sütunun genişliği, tablo genişliği - (1. sütun genişliği + 2. sütun genişliği) olarak belirlemiş olduk zaten.

Hücreler Arası ve Hücre İçi Boşluklar

Tablomuz daha güzel oldu. <table> koduna başka ayarlamalar da yapabiliriz. Örneğin cellpadding parametresiyle, hücre içindekilerle hücre çizgisi arasındaki boşluğu ayarlayabiliriz. Veya cellspacing ile hücreler arasındaki boşluğu ayarlayabiliriz. Hemen uygulamayla deneyelim:

Tablomuz çok daha şık oldu. Son uygulamada ne yaptık? Hücreler arasındaki boşluğu sıfırladık, böylece tablomuz hücre hücre değil, çizgilerle bölünmüş mazgal haline büründü. Başka ne yaptık? Bir de hücre çizgisi ile hücre içindeki yazılar arasındaki boşluğu "2" olarak artırdık. Sizler bu rakamlarla oynayarak nelerin değişeceğini gözlemleyebilirsiniz.

Hücre İçi Hizalama

Tablodaki hücreler içinde bulunan yazıların hangi yana yaslanacağını align ve valign parametreleriyle belirleyebiliriz. Bu parametreler <table>, <tr> veya <td> kodlarına uygulanabilir. align parametresini daha önceki bölümlerden biliyoruz, hücre içindeki donatıyı (metin, resim vb.) sağa, sola veya ortaya yaslamasını sağlar. valign ise hücre içindeki donatıyı aşağı, yukarı veya ortaya (bottom, top, center) yaslamaya sağlar. Bu iki parametreyi birden uygulayarak, karma yaslamalar yapabiliriz: (solyukarı, ortaaşağı, vb.) Aşağıda bu karma yaslamalara bakalım:

Yukarıdaki uygulamada ne yaptık? İlk satırı yukarıya, ikinci satırı aşağıya, üçüncü satırı ise araya hizaladık. Sonra hücreleri teker teker sağa, sola veya ortaya yasladık. İleriki sayfalarda bu parametrelerin başka birçok kod için de geçerli olduğunu göreceğiz.

Arkaplan Tablo (veya Hücre) Rengi

Tablo biçimi için <table> ve <td> kodları için bir başka parametre bgcolor parametresidir. Bu parametre arka plan rengini değiştirir. Hemen uygulamaya bakalım:

Son uygulamamızda, renkler uyumsuz ve göz yorucu olsa da değişik bir tablo edinmiş olduk.

Tablo Sınır Çizgisi Formatı

Tabi sadece geri planı değil, çerçeve rengini de değiştirebiliriz. Bunun için bordercolor parametresi kullanılır. Eğer tablo çerçevesi 3d (üç boyutlu) olmasını istiyorsak, bordercolorlight ile çerçevenin aydınlık kısmının rengini, bordercolordark ile de çerçevenin karanlık kısmının rengini belirleyebiliriz. Bu konuda bir uygulama yapalım; çerçeve daha iyi görünsün diye çerçeve kalınlığını artırıyorum:

Yapılan uygulamada RGB renk formatı kullanılmıştır. (RGB Renk Sistemi) çerçevenin üst ve sol kenarına açık, alt ve sağ kenarına ise koyu bir renk atayarak 3d (üç boyut) etkisi elde etmiş olduk.

HTML'de <body>...<body> arasına koyacağımız donatılar için bir iskelete ihtiyacımız vardır. Tablolar donatıların yerleşimini kolaylaştıran bu iskeleti bize sağlar. Bu nedenle tablo yapmak HTML web sayfaları için büyük öneme sahiptir. Bundan sonraki sayfamızın konusu bu olacak: Tablo tasarımı.

Tablo Bicimi