Ö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.
Kod: Tümünü seç
<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:
Kod: Tümünü seç
<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>
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:
Kod: Tümünü seç
<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:
Kod: Tümünü seç
<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>
* 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:
Kod: Tümünü seç
<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>
Volkan Derinbay'a tşkler.