HTML Tablo Tasarımı

ASP, PHP, PERL, CGI, HTML gibi web programcılık dilleri hakkında yardım, tartışma ve paylaşımlar.
Cevapla
Kullanıcı avatarı
UnreaL
Fast Friend
Fast Friend
Mesajlar: 207
Kayıt: 24-12-2005 17:26

HTML Tablo Tasarımı

Mesaj gönderen UnreaL »

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.

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>
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:

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>
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:

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>&nbsp;</td>
          <td><br>Buraya metinsel dokümanları, resimleri, anlatı araçlarını ve donatıları koyabilirsiniz.</td>
          <td width=20>&nbsp;</td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</body>   
</html>



Volkan Derinbay'a tşkler.
ahmetcan01
New Friend
New Friend
Mesajlar: 4
Kayıt: 15-08-2006 16:26

Mesaj gönderen ahmetcan01 »

eline saglık hocam bisi anlamadım ama nese :D
Cevapla
  • Benzer Konular
    Cevaplar
    Görüntüleme
    Son mesaj

Kimler çevrimiçi

Bu forumu görüntüleyen kullanıcılar: Hiç bir kayıtlı kullanıcı yok ve 2 misafir