HTML Tablo Tasarımı

Admin Mesaj Sayısı : 91 Kayıt tarihi : 12/07/08

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.

codeDivStart() <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>

Şimdi geldik "ne yaptık?" sorusuna. Önce ilk hücreye rowspan="2" değerini koyduk. Böylece ilk hücrenin iki satır kaplamasını sağladık. Bu nedenle alt satırda sadece iki hücre tanımladık; zira ilk hücre ikinci satırda da bir hücrelik yer kaplıyor. Peki benzer bir örnek yaparak bilgilerimizi pekiştirelim. Ortadaki hücre üç satır kaplasın:

codeDivStart() <html>
<head>
<title>Rowspan Parametresi 2. Örnek</title>
</head>
<body>

<table border="1" cellspacing="0" cellpadding="2" width="90%">
<tr>
<td width="30%">Data</td>
<td width="30%" rowspan="3">Bu hücre üç satır kaplıyor.</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
</tr>
</table>

</body>
</html>

Admin Mesaj Sayısı : 91 Kayıt tarihi : 12/07/08

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. Yani rowspan parametresinin satırlara yaptığını, colspan parametresi sütunlara yapmaktadır. Hemen bir uygulamayla gösterelim:

codeDivStart() <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:

codeDivStart() <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:

codeDivStart() <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>

» HTML Linkler
» HTML Bloklama
» HTML Multimedya