5.167 kez okundu

Web Tasarım Dersleri Cellspacing ve CellPadding Kullanımı

10 10 5.167 kez okundu incelendi

Bu dersimizde son olarak tabloları ele alacaz tablo Cellspacing ve CellPadding uygulamasını görüp bir sonraki dersimiz artık web tasarım uygulamaları olacak.

Cellspacing

Cellspacing etiketi arkadaşlar tablo içerisinde yer alan hücreler ve tablo kenarlığı arasındaki belirlemeye yarar Cellspacing değer olarak sadece pixel yönünden değer atanabilir.

Cellspacing Uygulaması

Aşağıdaki uygulamalarda ilk örnekteki tablo Cellspacing değeri 5 ve 2. örnek olarak Cellspacing 20 değeri verecem aradaki farkı anlamak için sizde aynı uygulamayı yapın arkadaşlar aşağıdaki kodları boş bir not defteri ile yazıp farklı kaydet diyerek dosya adı tabloyukseklik1.html olarak kaydedin.<html>
<head>
<title>Web Tasarım Dersleri Cellspacing Uygulaması Ders 16 </title>
</head>
<body>

<table border=”1″ cellspacing=”5″ bordercolor=”#FF0000″>
<tr align=”center”>
<td width=”100″>Ana Sayfa</td>
<td width=”100″>Hakkımızda</td>
<td width=”100″>Ürünler</td>
<td width=”100″>İletişim</td>
</tr>
</table>

</body>
</html>

Html Cellspacing Uygulaması 5 PikselHtml Cellspacing Uygulaması 5 Piksel

2. Cellspacing Örneği

<html>
<head>
<title>Web Tasarım Dersleri Cellspacing Uygulaması Ders 16 </title>
</head>
<body>

<table border=”1″ cellspacing=”20″ bordercolor=”#FF0000″>
<tr align=”center”>
<td width=”100″>Ana Sayfa</td>
<td width=”100″>Hakkımızda</td>
<td width=”100″>Ürünler</td>
<td width=”100″>İletişim</td>
</tr>
</table>

</body>
</html>

Evet arkadaşlar örneğimizde ilkinde cellspacing değeri 5 verdik ve 2. örnek 20 verdik 2. örnekte hücrelerin tablo kenarlıklarından nasıl uzaklaştığı net görünmektedir buradaki işlem hücre ile gerçekleşti aşağıda anlatacağım işlemse sadece hücre içindeki verileri etkileyecek.

Cellpadding

Cellpadding etiketi arkadaşlar tablo hücreleri içinde yer alan yazı, resim türü içeriğimizin hücre kenarlıkları ile içeriğin arasındaki mesafeyi Cellpadding ile ayarlanabilir piksel cinsinden değer verebiliriz.

Cellpadding Uygulaması

Yukardaki gibi yine 2 örnek yapacam arkadaşlar değer olarak ilk örnekte 5 diğer örnekte 20 piksel vereceğim sizlerde not defterinizde uygulayıp deneyin.

<html>
<head>
<title>Web Tasarım Dersleri Cellpadding Uygulaması Ders 16 </title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-9″></head>
<body>

<table border=”1″ cellpadding=”5″ bordercolor=”#FF0000″>
<tr align=”center”>
<td width=”100″>Ana Sayfa</td>
<td width=”100″>Hakkımızda</td>
<td width=”100″>Ürünler</td>
<td width=”100″>İletişim</td>
</tr>
</table>

</body>
</html>

Cellpadding UygulamasıCellpadding Uygulaması

2. Örnek yukardaki örnekten tek farkı değerin 5ten 20ye çekilmesi

Cellpadding UygulamasıCellpadding Uygulaması

Evet arkadaşlar Cellpadding uygulamamızda değer arttıkça hücre içnde yer alan yazı veya resimler hücre kenarlıklarından uzaklaştığı görülmektedir.

Bugünkü dersimiz bu kadar arkadaşlar bir sonraki dersimiz ise artık proje uygulamaları olacak çerçeveler ile başlayacaz Allahın izniyle.

Gelen aramalar :

Yorum yap

Barış Ozcan Facebook Sayfasi
Barış Ozcan Twitter