Web Tasarım Dersleri Tablo Boyutlandırma ve Hizalama
Bu dersimiz ise tabloların boyutlandırılmasını ve sayfamızda hizalandırmayı göreceğiz.
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 (sütunların) 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 (Hücre Genişlikleri) 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.
<html>
<head>
<title>Web Tasarım Dersleri Tabloları Boyutlandırma Ders 14</title>
</head>
<body>
<table border=”1″>
<tr height=”100″>
<td width=”25″> </td>
<td width=”50″> </td>
<td width=”75″> </td>
</tr>
<tr height=”200″>
<td width=”25″> </td>
<td width=”50″> </td>
<td width=”75″> </td>
</tr>
</table>
</body>
</html>
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 (sola yaslar)
- center (ortalar)
- right (saga yaslar)
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.
<html>
<head>
<title>Web Tasarım Dersleri Tabloları Hialandırma Ders 14</title>
</head>
<body>
<table border=”1″ align=”center”>
<tr>
<td height=”50″ width=”150″ align=”left”>1. HÜCRE</td>
</tr>
<tr>
<td height=”50″ width=”150″ align=”center”>2. HÜCRE</td>
</tr>
<tr>
<td height=”50″ width=”150″ align=”right”>3. HÜCRE</td>
</tr>
</table>
</body>
</html>
Html Tablo HizalamaEvet 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<tr> ve <td> 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
<html>
<head>
<title>Web Tasarım Dersleri Tabloları Düşey Hizalandırma Ders 14</title>
</head>
<body>
<table height=”200″ border=”1″ align=”center”>
<tr>
<td valign=”top”>ÜST HİZALANDI</td>
</tr>
<tr>
<td valign=”middle”>ORTA HİZALAMA</td>
</tr>
<tr>
<td valign=”bottom”>ALT HİZALAMA</td>
</tr>
</table>
</body>
</html>
Tablolarda Düşey HizalamaEvet 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.
Benzer Yazılar:
Kategoriler :HTML, WEB TASARIM
Anahtar Kelimeler : html de hizalama nasıl yapılır, Html dersleri, Html Tablo Hizalama nasıl yapılır, Tablo Boyutlandırma Uygulaması, Tablo Boyutlandırma ve Hizalama, Tabloların Üstten Hizalanması, web tasarım dersleri, Width ve Height nedir, Width ve Height Tablolarda Kullanımı
