4
Kasım

Yazan: WEBMASTERYOLCU  |  Kategori: Uygulamalı Html Dersleri  |  Okunma: 39.303 Defa

Selamun aleyküm değerli arkadaşlar son dersimizde kaldığımız 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.

Bir Önceki Dersimiz: Web Tasarım Dersleri Tablolara Arkaplan Vermek Ders 13

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″>&nbsp;</td>
<td width=”50″>&nbsp;</td>
<td width=”75″>&nbsp;</td>
</tr>

<tr height=”200″>
<td width=”25″>&nbsp;</td>
<td width=”50″>&nbsp;</td>
<td width=”75″>&nbsp;</td>
</tr>
</table>

</body>
</html>

Html Tablo Boyutlandırılması

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

  1. left (sola yaslar)
  2. center (ortalar)
  3. 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 Hizalama

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<tr> ve <td> içerisinde kullanılabilir.

  1. valign=”top”   Hücre içindeki nesneyi üst kısma hizalar
  2. valign=”top”   Hücre içindeki nesneyi ortalar
  3. 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 Hizalama

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.

Derslerimi istediğiniz legal alanda yayınlayabilirsiniz www.webmasteryolcu.com ibaresini eklemek kaydı ile



   Paylaş

2 Yorum yapılmış

  • A.kadir
    11 Mart 2015 | Cevapla

    tablo resim boyutlarını cep telefonlarına uyumlu hale nasıl getiririz bununla ilgili bir makale yazabilirmisiniz. teşekkürler…

    • 27 Mart 2015 | Cevapla

      Kadir: Bunun için CSS bilgisi gerekmektedir. Boyutlandırmayı sabit yerine % olarak yapılmalıdır.

Yorum yapın