Skip to content
Eylül 15, 2006 / Erkan

Tablosuz Tasarım (Tableless)


Bugün son zamanlar da oldukça ilgi gören tablosuz tasarımdan çok teknik konulara inmeden bahsetmek istiyorum.

Tablosuz Tasarım Nedir?

Tablosuz tasarım adından da kolayca anlaşılacağı gibi, web sayfalarımızı tasarlarken tablolu yerleşim planını terkedip, HTML 2.0’dan sonraki versiyonlarda desteklenmeye başlanan bölümlü yada bölmeli diyebileceğimiz yerleşim planına geçmemiz ve sayfalarımıza CSS ile stil vermemiz anlamına geliyor.

Tablosuz Tasarım İçin Nelere Yapmalıyız?

Öncelikle “CSS” yani “Cascading Style Sheets” (Stil şablonları: http://tr.wikipedia.org/wiki/CSS) kullanımı hakkında daha fazla bilgi edinmeliyiz. CSS hakkında daha fazla teknik bilgi edinmek için http://www.w3.org/Style/CSS/ adresini ziyaret edebilirsiniz. Evet CSS ile ilgili yeterli deneyime ve bilgiye sahipsek tablosuz tasarım yapmamamız için bir neden yok.

Web sayfalarımızın yerleşim planını <table><tr><td></td></tr></table> etiketleri yerine <div></div> etiketleri ile planlayıp CSS yardımıylada stil vermeliyiz.

Tablosuz yerleşim planı hakkında daha detaylı bilgi almak için http://www.w3.org/2002/03/csslayout-howto, http://www.andybudd.com/@media2005/ ve http://www.thenoodleincident.com/
tutorials/box_lesson/boxes.html
adreslerindeki örneklere bakabilirsiniz.

Tablosuz Tasarımın Yararları

İnternet tarayıcıları (browser), tablosuz tasarım ile yerleşim planı yapılmış web sayfalarını tablolu tasarımlara göre daha hızlı okurlar.

Web sayfalarınız daha az boyutlarda olur ve bant genişliğinden tasarruf sağlar.

Web sayfanıza ait kod daha okunaklı ve anlaşılır olur.

Tablolu tasarımda yüzlerce satırda yapacağınız işleri daha az kod yazarak tablosuz tasarımla yapabilirsiniz.

Tablolu tasarımlarda zor olan bir çok görsel oluşumu tablosuz tasarımlarda kolayca yapabilirsiniz.

Tablosuz Tasarımın Bazı Dezavantajları

Öncelikle, sayacağım dezavantajların sadece kendi görüşlerim ve tecrübelerim olduğunu belirtmek isterim.

Tablosuz tasarım ile yerleşim planı yapılmış web sayfaları karışık ve yüksek boyutlarda CSS dosyaları içerebilir.

CSS dosyasının zarar görmesi veya internet tarayıcısına yüklenmemesi durumunda web sayfası hiç hoş karşılamayacağınız bir şekilde görünebilir.

ASP .Net gibi teknolojileri kullanıyorsanız, ASP .Net repeater, datalist, datagrid gibi bazı kontrolleri tablolu html kodlar ile oluşturulmaktadır bu durumda kendi ASP .Net kontrollerinizi yazmanız gerekebilir.

CSS kodlarının bazı tarayıcılarda farklı algılanması nedeniyle tarayıcıya özel CSS kodlama yazmanız gerekebilir.

Tablosuz Tasarıma Geçişte Önerilerim

CSS konusunda yeterli bilgiye ve deneyime ulaştığınızdan emin olmalısınız.

Tablosuz tasarım ile yapılmış web sitelerine ait kodları incelemelisiniz, başkalarının tecrübeleri size yol gösterici olabilir fakat emeğe saygı göstermemiz gerektiğini ve kodları alıp hiç bir emek sarfetmeden veya kodu yazan kişiden izin almadan kullanmamız gerektiğini hatırlatmak isterim.

Konu hakkında teknik bilgi veren web sitelerine ait yazıları, makaleleri okumalısınız.

Web sayfalarınızın yerleşim planını kağıt üzerinde tasarlamanız ve daha sonra işe başlamanız, sayfalarınızı şekillendiren kodları yazarken nasıl bir görüntü elde etmeniz gerektiğini hatırlamanızda yardımcı olacaktır.

Hoş olmayan ve telafisi zaman alacak durumlarla karşılaşmamak için, farklı platformlarda ve internet tarayıcılarında sayfalarınızı mutlaka test ediniz. http://www.browsercam.com/ adresinde deneme hesabı oluşturarak web sayfalarınızın farklı platformlarda görsel açıdan nasıl sonuç verdiğini görebilirsiniz.

Not: Tablosuz tasarım ile tabloları hayatımızdan tamamen silmemiz gerekmiyor. Tablosuz tasarım ile tabloları web sitemizde gerektiği yerlerde yani tablo yapmak için kullanabiliriz.

22 Yorum

Yorum Yapın
  1. Sinan Ata / Eyl 21 2006 11:37 am

    bu konu üzerinde çok çalıştım bence çok zevkli bir olay. Liste tablolarımı bile css de yapıyorum artık. Tablodan çok daha özgür. Ama eğer yeni başlayan arkadaşlar varas illa css yapacağım diye işlerini zorlaştırmasınlar.

    http://oswd.org
    http://openwebdesign.org

    bu arkadaşlar tablosuz tasarım adına çok hoş işler yapıyor. Takip edip customize etmeye çalışmakla başlayabilir yeni arkadaşlar en hızlı bu şekidle öğreniliyor.Float mantığını kavramanız yeterli büyük ölçüde.

  2. Codolophier / Eki 7 2006 12:58 am

    Tablosuz tasarımla sitenin görsel dizaynını değiştirmek de çok kolay hale geliyor.

  3. Pardus / Kas 2 2006 3:34 pm

    Sanırım CSSZen Garden (http://www.csszengarden.com/) bu konuda harika bir kaynak… Tablosuz hazırlanmış bi HTML ve onu düzenleyen CSS…

  4. kadir güler / Oca 9 2007 6:43 pm

    merabalar .geçen günlerden bende sadece div etiketlerinden oluşan bir site yaptım ..yalnız yazılar uzadıkça katmanlardan taşıyor ne kadar denedimse olmadı taşmayı önleyemedim.bunun için bir yol var mı

  5. Erkan / Oca 9 2007 8:31 pm

    Arka arkaya boşluk bırakmadan yazılmış harfler div etiketinin boyutunu geçiyorsa dışarı taşma yaparlar.. Eğer boşluk olduğu halde bu tarz bir taşma oluyorsa.

    <div style=”white-space:normal”></div> veya <p style=”white-space:normal”></p>

    şeklinde deneyiniz.

  6. Angel / Tem 4 2007 5:28 am

    Ellerine saglık çok güzel bi makale

  7. Gaziantep Web Tasarım / Ara 26 2009 2:12 pm

    Teşekkürler Çok Güzel Bir Paylaşım…

  8. destan / Şub 18 2010 1:22 pm

    paylasim icin tesekkurler bastan sonra video ile alatım olsaydı cok güzel olurdu yinede sagol

  9. Hasan ÇİMİLİ / Şub 23 2010 7:17 pm

    “Tablosuz Tasarımın Bazı Dezavantajları ” başlığında yazdıklarınıza katılmıyorum.

  10. Web Sayfam / Haz 17 2010 1:36 am

    Güzel paylaşım olmuş tebrikler.

  11. Güzel paylaşım olmuş tşkrlr

  12. Dem Bilişim / Ağu 20 2010 12:33 pm

    sağol

  13. Reklam Tabela / Ağu 26 2010 2:14 am

    çok güzel paylaşımlar tebrikler

  14. antalya web tasarım / Eyl 24 2010 1:08 pm

    css’lerde anlamadığım ve sevmediğim şey bazen internet explorerda farklı firefoxda farklı chrome ‘da farklı görünmesi.

Trackbacks

  1. Ceyhun AKSAN &#160 CSS ile Web Sayfası Yapalım: Giriş
  2. Türkçe CSS kaynakları | Blog ve Wolkanca - işimiz gücümüz blog!
  3. Ceyhun AKSAN : Tamamlanmamış Makaleler » Arşiv » CSS ile Web Sayfası Yapalım
  4. tasarım hakkında herşey « Salihsati’s Weblog
  5. Ceyhun Aksan: İşim, Gücüm; Fikir - » Arşiv » CSS ile Web Sayfası Yapalım
  6. Türkçe CSS Kaynakları ve Yazıları « WebeGe Blog
  7. Tablo mu? Div mi? Karmaşasına Son Noktayı HTML5 koydu / Fatih Hayrioğlu'nun not defteri
  8. Türkçe CSS kaynakları | Blog Wolkanca

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Connecting to %s

%d blogcu bunu beğendi: