Tablo Tasarımı
Önceki sayfada tablo yapmayı ve biçimlendirmeyi öğrenmiştik. Şimdi hem bu öğrendiklerimizi kullancağız, hem tablo tasarlamayı öğreneceğiz, hem de web sayfası yerleşimi konusundaki deneyimlerimi sizlerle paylaşacağım.
Bir önceki bölümde tasarladığımız tabloların hepsi her satırında aynı hücreye (sütuna) sahip, düzgün ve basit tasarımlı tablolardı. Şimdi ise karmaşık tasarımlı tablolar yapmayı öğreneceğiz.
Birden Fazla Satır ve/veya Sütun Kaplayan Hücreler
Önce iki tane parametre öğreneceğiz, bunlardan ilki: rowspan parametresi. Bu parametre <td> kodu ile kullanılır. Bu kod bu hücrenin kaç satır kapladığını belirtir. Bir örnek yapalım hemen.
<html>
<head>
<title>Rowspan Parametresi</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="2" width="90%">
<tr>
<td width="30%" rowspan="2">Bu hücre iki satır kaplıyor.</td>
<td width="30%">Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</table>
</body>
</html>
Daha iyi anladık sanırım. Bu sefer ilk satırdaki ortanca hücreye üç satırlık değer vermek için <td> koduna rowspan="3" parametresi atadık. Sonraki iki satırda ise bu nedenle birer hücrelik boşluk bıraktık.
Sıradaki parametremiz colspan; bu parametre de <td> koduna atanıyor. Bu parametrenin işlevi, bir hücrenin iki sütun kaplamasını sağlamaktır. Yanirowspan parametresinin satırlara yaptığını, colspan parametresi sütunlara yapmaktadır. Hemen bir uygulamayla gösterelim:
<html>
<head>
<title>Colspan Paramteresi</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="2" width="90%">
<tr>
<td width="30%">Data</td>
<td colspan="2">Bu hücre iki sütun kaplıyor.</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</table>
</body>
</html>
N'aptık? İlk satırın ikinci hücresine colspan="2" parametresi atayarak, bu hücrenin kendisinden sonraki hücreyi de kaplamasını sağladık. Bu nedenle ilk satırda üçüncü bir hücre belirtmedik. Sanırım iki parametreyi de anladık. (Di mi?)
Web Yerleşim Tabloları
Şimdi öğrendiğimiz tablo tekniklerini, web sayfalarının yerleşim planı için kullanalım. Örneğin aşağıdaki uygulamaya bir bakalım:
<html>
<head>
<title>Web Tasarım</title>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr>
<td width="180" bgcolor="#FAF0E6" valign="top">Bu renkli bölüme genellikle logolar, yönlendiriciler, hiperlinkler, reklamlar vb. konulur.</td>
<td valign="top"> Buraya metinsel dokümanları, resimleri, anlatı araçlarını ve donatıları koyabilirsiniz.</td>
</tr>
</table>
</body>
</html>
Bu tasarımın olumlu ve olumsuz yönlerini inceleyelim. Bu tasarım iki bölümden oluşuyor, ilk bölüm hiperlinklerin, logoların, yönlendiricilerin bulunacağı bölüm, diğeri ise metinlerin bulunacağı bölüm. Renkler güzel seçilmiş, uyumlu ve gözü yormuyor. İkinci bölümde metinler, resimler, anlatılar ve donatılar yer alıyor, bu nedenle beyaz rengi seçilmiş olması da artı bir puan. Ayrıca anlatı kısımı pencereye göre genişleyip, daralabiliyor, bu da olumlu. Sıra geldi olumsuz yönlerine. İlk renkli bölüm pencerenin soluna tamamen bitişik değil ve çok kötü görünüyor. Ayrıca ikinci bölümdeki yazılar ile pencere ve ilk bölüm arasında hiç boşluk yok, bu da hiç güzel görünmüyor. İlk renkli kısımda da yazılar sol tarafa yapışmış. Şimdi bu sorunlar için çözümler geliştirelim:
- Web sayfalarında HTML varsayılan değer olarak pencere kenarlarında bir miktar boşluk bırakır. Genelde web tasarımcıları bu tür boşluklardan hoşlanmaz ve bu boşlukları yok etmek için <body> koduna şu parametreleri atarlar leftmargin="0" topmargin="0".İleriki sayfalarda <body>koduna atanan parametreler ayrıntılı olarak gösterilecektir.
- Sol renkli kısımda yazıların kenarlara yapışmamasını engellemek için, tablo içinde tablo yöntemini kullanabiliriz. Bu bölüm 180 piksellik tablodan ibaret. Bu tablonun içine 160 piksellik tabloyu ortalayarak koyarsak bu işi de halledebiliriz.
- Sağ taraftaki anlatı kısmını oluşturan tablonun içine üç sütunlu yeni bir tablo eklersek ve birinci sütun ile ikinci sütuna 20 piksellik genişlik atayıp, orta sütunu esnek bırakırsak (yani bir genişlik belirtmezsek), bu bölümdeki yazıların sol kısıma ve sağdaki pencere kenarına en az 20 piksellik aralık vermiş oluruz.
Tabi bu çözümler olası tek çözüm değil, sizler alternatif çözümler de geliştirebilirsiniz. Şimdi geliştirdiğimiz bu çözümleri HTML kodlarına dönüştürelim: (Bakmadan kendiniz yapabilir misiniz?)
<html>
<head>
<title>Web Tasarım</title>
</head>
<body topmargin="0" leftmargin="0">
<table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr>
<td width="180" bgcolor="#FAF0E6" valign="top" align="center">
<table border="0" cellspacing="0" cellpadding="0" width="160">
<tr>
<td><br>Bu renkli bölüme genellikle logolar, yönlendiriciler, hiperlinkler, reklamlar vb. konulur.</td>
</tr>
</table>
</td>
<td valign="top">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td width=20> </td>
<td><br>Buraya metinsel dokümanları, resimleri, anlatı araçlarını ve donatıları koyabilirsiniz.</td>
<td width=20> </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Nasıl? Daha düzgün değil mi? İlk kısıma logolar, hiperlinkler ve başka yönlendiriciler koysak, anlatı kısmına da metinler, resimler falan. Çok güzel bir sayfa elde ederiz. Böyle bir sürü çeşitli sayfa tarzı oluşturabiliriz. Örneğin okuduğunuz bu sayfa tamamen bir tablo tasarım örneğidir. Internet Explorer'ın araç kutusundan Görünüm/Kaynak (View/Source) seçeneğini seçin ve bu sayfayı inceleyin. Başlangıçta biraz karmaşık gelecektir ama sabırla incelerseniz, göreceksiniz ki bilmediğiniz pek komut yok bu sayfanın HTML kodları arasında.
Bundan sonraki konumuz daha zevkli: Resim Yerleşimi. Diğer sayfada görüşmek üzere.