Dreamweaver ile tablo oluşturmak ve bu tabloda arka plan, kenarlık, iç yapı gibi tasarımları değiştirmek için yapmanız gerekenler aşağıda anlatılmaktadır.

Dreamweaver İle Tablo Oluşturma ve Tasarlama

1.) İlk olarak yapılması gereken Dreamweaver programını açtıktan sonra karşımıza gelen dosya oluşturma penceresinden, oluşturmak istediğimiz dosya türünü seçmek olacaktır. Biz HTML ile uğraşacağımız için buradan HTML yazan yeri seçiyor ve işleme devam ediyoruz. Seçim yaptığımız yer aşağıdaki resimde de gösterilmiştir.

Dreamweaver Kod Seçimi

2.) Bu işlemden sonra karşımıza gelen boş çalışma ekranına tablo eklemek için en üst menüde bulunan Insert --> Table seçeneğine tıklamamız gerekmektedir. Bu işlem ile seçtiğimiz boş alana belirleyeceğimiz yapıdaki tabloyu ekleyebiliriz. Seçim yapmamız gereken yer aşağıdaki resimde gösterilmiştir.

Dreamweaver Tablo Ekleme Menüsü

3.) Tablo ekleme menüsüne tıkladıktan sonra karşımıza eklemek istediğimiz tablo ile ilgili detayları belirleyeceğimiz pencere gelecektir. Bu penceredeki bölümler ve işlevler aşağıda anlatılmıştır. Anlatılan bölüm numaraları aşağıdaki resimde mevcuttur.

Dreamweaver Tablo Özellikleri Seçimi

1. Rows: Yani yatay olarak kaç hücre bulunması gerektiğini belirler. Örnek olarak 5 katlı bir apartman düşünelim apartmandaki rows sayısı 5dir.
2. Columns: Yani dikey olarak kaç hücre seçmemiz gerektiğini belirler. Apartmandaki bir dairede bulunan yan yana 4 oda düşünelim buradaki columns sayısı 4 tür.
3. Table Width: Tablo genişliği seçim kısmı ile eklemek istediğimiz tablonun px veya cm cinsinden ne kadar genişlikte olması gerektiğini buradan belirleriz.
4. Border Thickness: Tablonun kenarlık genişliğini de buradaki seçim ile belirleriz. Birimiz px yani pixel dir. Alt kısımda bulunan iki resimdeki tablo kenarlık genişlikleri 10px tir. Gri ton ile kenarlıklar gözükmektedir.
5. Cell Padding: Hücre içindeki yazı veya bölümün, o hücreye ait kenarlara olan uzaklığını belirler. aşağıdaki resimde sol tarafta bulunan tabloya cell padding uygulanmamış, sağ taraftakine ise 15px kadar uygulanmıştır.

Dreamweaver Cell Padding Uygulaması

6. Cell Spacing: Bu seçim ile hücrelerin kenarları arasındaki uzaklığı belirleyebiliriz. Örnek olarak yan yana iki hücreni bitişik kenarları arasındaki mesafe bu seçim ile belirlenir. Aşağıdaki resimde sol tarafta bulunan tabloya cell spacing uygulanmamış, sağ taraftakine ise 15px kadar uygulanmıştır.

Dreamweaver Cell Spacing Uygulaması

7. Header: Yani tablo başlangıç kesimlerini belirlemektedir. Bu ve kalan bölümleri şu anda kullanmayacağız.

Tüm bu fonksiyonları öğrendikten sonra oluşturacağımız tabloyu seçip sayfamıza yerleştirelim. Tabi bu seçimi tasarımınıza uygun olarak yapınız. Bir rasgele bir seçim yaparak şu değerleri belirliyoruz. yatay:4, dikey:5, tablo genişliği 500px, kenar genişliği:5px, cell space:8px, cell padding:7px şeklinde ayarlayıp alt taraftaki OK butonuna tıklıyoruz. Bu işlem sonucunda oluşan tablomuz aşağıdaki gibidir.

Dreamweaver Örnek Tablo

Daha sonraki derslerimizde tablo tasarımlarını nasıl yapıldığı, nasıl renklendirildiği ve nasıl konumlandırıldığı üzerine çalışmalar yapacağız.