valign= top Hücre içindeki nesneyi üst kısma hizalar valign= top Hücre içindeki nesneyi ortalar valign= top Hücre içindeki nesneyi alt kısma hizalar burası yanlış olmuş

Eline sağlık.

elıne saglık

Selamun aleyküm değerli arkadaşlar son dersimizde kaldığımı yerden devam ediyoruz taki php ve veritabanlı siteler yapmayı öğrenene kadar devam Allahın izniyle son olarak tablolara arkaplan rengi ve arkaplan resmi atamayı öğrenmiştik bu dersimiz ise tabloların boyutlandırılmasını ve sayfamızda hizalandırmayı görecez öncelikle bir önceki dersi inceleme imkanı bulamayan arkadaşlar için aşağıda linkini paylaşalım. Width ve Height Valign arkadaşlar hücre içerisindeki nesneleri düşey olarak hizalamamızı sağlar ve 3 değer almakla birlikte yukardada belirttiğim gibi Width parametresi arkadaşlar tablolarda tablo yada hücrenin genişliğini piksel cinsinden ayarlamamız için kullanılır. Height parametresi ise tablo yada hücrelerin yüksekliğini piksel cinsinden ayarlamızı sağlar. Width ve Height Tablolarda Kullanımı Dikkat etmemiz gereken width ve height table etiketinde kullanılırsa bu tablonun tüm ölçüsünü belirlemeyi sağlar. Unutmamanız gereken tablomuza boyutlandırma yaparken aynı satırdaki hücrelerin yüksekliklerinin eşit olacağı unutulmamalıdır. Aynı satırda aynı satırda farklı yüksekliğe yada aynı sütunda farklı genişlik istenen hücreler için birden fazla hücrenin bir hücrede birleştirilmesi sonucu yapılabilir bunu 1 yada 2 ders sonra tablo birleştirmeleri göreceğiz ozaman daha net anlayacasınız demek istediğimi NOT: Tablolarda bir hücreye her hangi bir nesne eklenmeyecekse boş bırakılmak isteniyorsa tamamen boş bırakmak yerine aşağıdaki kodu kullanmanız mantıklı olur boş geçmeniz durumunda tablolarda görüntülenme sorunu yaşanabilir. Tablo Boyutlandırma Uygulaması Uygulama yapacağımız tablo 2 satır 3 sütundan oluşacak arkadaşlar Sütun 1. 25 piksel 2. 50 piksel 3. 75 piksel Satır Yükseklikleri 1. satır 100 piksel 2. satır 200 piksel olan bir tablo yapacağız. Açıyoruz not defterimizi arkadaşlar aşağıdaki kodları yazarak farklı kaydet diyerek dosya adı tabloboyut.html olarak masaüstüne kaydedin. &lt;html&gt; &lt;head&gt; &lt;title&gt;Web Tasarım Dersleri Tabloları Boyutlandırma Ders 14&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;table border="1′′&gt; &lt;tr height="100′′&gt; &lt;td width="25′′&gt; &lt;/td&gt; &lt;td width="50′′&gt; &lt;/td&gt; &lt;td width="75′′&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr height="200′′&gt; &lt;td width="25′′&gt; &lt;/td&gt; &lt;td width="50′′&gt; &lt;/td&gt; &lt;td width="75′′&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt; Html Tablo Boyutlandırılması Hemen yukarda yaptıkalrımı öetliyim arkadaşlar 2 satır 3 sütunlu bir tablo dedimki ilk satır yüksekliği 100 piksel olsun 2. satır yüksekliği ise 200 piksel olsun o nedenle alt satır farklı görünüyor. Sütunlar içinse her satıra 3 sütun istedim ve genişlik olarak 1. sütun 25 2. sütun 50 3. sütun 75 piksel dikkat ederseniz genişleyerek gidiyor. Tabloların ve Hücrelerin Hizalanması Tablo ve tablomuzda yer alan yazı, resim türü içeriğin tablo içerisinde hizalanası ve konumlandırılmasını sağlamak için align ve valign parametresinden faydalanacağız. Align Align parametresi table ile kullanıldığında tablomuzu yatayda hizalamaya yarar değerli arkadaşlar sağ orta sol şeklinde hizalar. td etiketi yani sütun etiketi ile kullanıldığında ise sütun hücre içerisinde yer aln yazı, resim türü materyalleri hizalar. Align Parametreleri 3 adettir arkadaşlar nedir bunlar hemen bakalım left center right Tablo Hizalama Uygulaması evet arkadaşlar uygulamamızda 3 satır tek sütun olan bir tabo kullanacağız açıyoruz not defterimizi ve aşağıdaki kodları uyguluyoruz farklı kaydet diyerek dosya adı tablohzalama.html olarak masaüstüne kaydedin ve inceleyin. &lt;html&gt; &lt;head&gt; &lt;title&gt;Web Tasarım Dersleri Tabloları Hialandırma Ders 14&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;table border="1′′ align="center"&gt; &lt;tr&gt; &lt;td height="50′′ width="150′′ align="left"&gt;1. HÜCRE&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td height="50′′ width="150′′ align="center"&gt;2. HÜCRE&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td height="50′′ width="150′′ align="right"&gt;3. HÜCRE&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt; Html Tablo Hizalama Evet arkadaşlar yukardaki örnekte tablomuzu ortaladık sonrasında ilk sütun sola yasladık 2. sütun ortaladık ve 3. sütun ise sağa yasladık. Tabloların Üstten Hizalanması Yukardaki örneğimizde yandan hizalama yaptık arkadaşlar sağa sola yasladık ortaladık peki birde üstten hizalamayı görelim dikkat etmeniz gereken diğerinde tabloda dahil hizalanıyordu bunda ise sadece hücreler hizalanabilir. Valign Valign arkadaşlar hücre içerisindeki nesneyi düşey olarak hizalamaya yarar valign 3 değeri bulunmaktadır ve şimdi aşağıda görecez bu paraketreler sadece&lt;tr&gt; ve &lt;td&gt; içerisinde kullanılabilir. valign="top" Hücre içindeki nesneyi üst kısma hizalar valign="top" Hücre içindeki nesneyi ortalar valign="top" Hücre içindeki nesneyi alt kısma hizalar Valign Uygulaması Evet arkadaşlar 3 satır tek sütunlu bir tablo yapıcam ve height değerini atayacam yani yükseklik genişlik bu durumda içeriğe göre otomatik oluşacaktır. Kodları yazıp farklı kaydet diyerek dosya adı tabloduseyhizalama.html olarak kaydedin. &lt;html&gt; &lt;head&gt; &lt;title&gt;Web Tasarım Dersleri Tabloları Düşey Hizalandırma Ders 14&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;table height="200′′ border="1′′ align="center"&gt; &lt;tr&gt; &lt;td valign="top"&gt;ÜST HİZALANDI&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td valign="middle"&gt;ORTA HİZALAMA&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td valign="bottom"&gt;ALT HİZALAMA&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt; Tablolarda Düşey Hizalama Evet arkadaşlar bu dersimizinde sonuna geldik bir sonraki dersimizde tablo hücrelerinin birleştirilmesini göreceğiz ve artık 2 ders sonrası projeye ve uygulamaya başlıyoruz artık sitelerimizi yapmaya başlayacaz basit anlamda sonrasında veritabanlı siteleri görecez kurulum, ayar, tema yükleme, tema editleme, forum kurulumu, ayarları, tema yükleme, veritabanı işlemleri çok faydası olacak allahın izniyle.