html de hizalama nasıl yapılır | Barış ÖZCAN Web Tasarım | antalya web tasarım | antalya web tasarımı | Sosyal Medya Danışmanlığı https://www.barisozcan.net Sat, 04 Dec 2010 17:22:19 +0000 tr hourly 1 https://wordpress.org/?v=6.9.4 Web Tasarım Dersleri Tablo Boyutlandırma ve Hizalama https://www.barisozcan.net/web-tasarim-dersleri-tablo-boyutlandirma-ve-hizalama https://www.barisozcan.net/web-tasarim-dersleri-tablo-boyutlandirma-ve-hizalama#respond Sat, 04 Dec 2010 17:22:19 +0000 http://www.barisozcan.net/?p=745 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.

The post Web Tasarım Dersleri Tablo Boyutlandırma ve Hizalama first appeared on Barış ÖZCAN Web Tasarım | antalya web tasarım | antalya web tasarımı | Sosyal Medya Danışmanlığı.

]]>

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″>&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 HizalamaHtml 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 HizalamaTablolarda 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.

The post Web Tasarım Dersleri Tablo Boyutlandırma ve Hizalama first appeared on Barış ÖZCAN Web Tasarım | antalya web tasarım | antalya web tasarımı | Sosyal Medya Danışmanlığı.

]]> https://www.barisozcan.net/web-tasarim-dersleri-tablo-boyutlandirma-ve-hizalama/feed 0