Dersler => Webmaster => HTML => Konuyu başlatan: gece_mavisi - 16 Aralık 2010, 04:07:17

Başlık: Html ile Tablo Nasıl Yapılır?
Gönderen: gece_mavisi - 16 Aralık 2010, 04:07:17
Web sayfanızdaki yazı ve resimlerin bulunduğu yeri denetlemek için kullanacağınız şey tablolardır.
Her tabloda dikey ve yatay istediğiniz kadar hücre oluşturabilirsiniz. Bu hücrelerin büyüklüklerini siz belirleyebilirsiniz. Böylece yazıdığınız yazılar tam olarak istediğiniz yerde durabilir.

Tablo için kullanacağımız temel etiketler aşağıdakilerdir.
 
Tablo oluşturmak için
<table> </table>

Yatay hücre oluşturmak için
<tr>

Dikey hücre oluşturmak için
<td>

6 bömüme (hücreye) ayrılmış bir tablo yapalım

Kod: You are not allowed to view links. Register or Login
<html>
<head>
<title> 6 hücreli tablo </title>
</head>
<body>
<table border="1">
<tr>
 <td>Birinci sırada Hücre1</td>
 <td>Birinci sırada Hücre2</td>
 <td>Birinci sırada Hücre3</td>
 </tr>

<tr>
 <td>İkinci sırada Hücre1</td>
 <td>İkinci sırada Hücre2</td>
 <td>İkinci sırada Hücre3</td>
</tr>
</table>
</body>
</html>
Explorer görünümü:
6 hücreli tablo
Birinci sırada Hücre1 Birinci sırada Hücre2 Birinci sırada Hücre3
İkinci sırada Hücre1 İkinci sırada Hücre2 İkinci sırada Hücre3

Hücremin içi renkli olsun (bgcolor)


Kod: You are not allowed to view links. Register or Login
<html>
<head>
<title> renkli hücre </title>
</head>
<body>
<table>
<tr>
<td bgcolor="red">
kırmızı hücrem oldu</td>
</tr>
</table>
</body>
</html>
Explorer görünümü:
renkli hücre
kırmızı hücrem oldu
Kırmızı hücrem oldu (arkaplanı kırmızı,yazı siyah)
 

Hücremin içinde resim istiyorum (background)


Kod: You are not allowed to view links. Register or Login
<html>
<head>
<title> hücreye resim ekleme</title>
</head>
<body>
<table>
<tr>
<td background="http://uyanangenclik.com/Smileys/default/bow3.gif">
Heeyy burada resimlerim vaarr</td>
</tr>
</table>
</body>
</html>
Explorer görünümü:
hücreye resim ekleme
Heeyy burada resimlerim vaarr

Heeyy burada resimlerim vaarr (arkaplanda resim yazı siyah)

 
Hücremin kenar kalınlığını değiştirmek istiyorum (border)

Kod: You are not allowed to view links. Register or Login
<html>
<head>
<title> hücre kalınlıgı</title>
</head>
<body>
<table border="10">
<tr>
<td>kenarı kalın oldu</td>
</tr>
</table> <table border="1">
<tr>
<td>kenarı ince oldu</td>
</tr>
</table>
 </body>
</html>
explorer görüntüsü:
hücre kalınlıgı
kenarı kalın oldu
kenarı ince oldu

kenarı kalın oldu (kenar kalın)
kenarı ince oldu (kenar ince)


Hücremin kenarını renkli yapmak istiyorum (bordercolor)

Kod: You are not allowed to view links. Register or Login
<html>
<head>
<title> hücre kalınlıgı</title>
</head>
<body>
<table border="10" bordercolor="green">
<tr>
<td>kenarını yeşil yaptım</td>
</tr>
</table>
 </body>
</html>
Explorer görünümü:
hücre kalınlıgı
kenarını yeşil yaptım

kenarını yeşil yaptım (hücrenin kenarı renkli)

   
Hücremin büyüklüğünü ayarlamak istiyorum (width=" " height=" ")


Kod: You are not allowed to view links. Register or Login
<html>
<head>
<title> hücre büyüklüğü</title>
</head>
<body>
<table border="10" width="300" height="80" >
<tr>
<td>genişliği 250 yüksekliği 80 piksel</td>
</tr>
</table>
 </body>
</html>
Explorer görünümü:
hücre büyüklüğü
genişliği 250 yüksekliği 80 piksel

genişliği 300 yüksekliği 80 piksel

 
Hücremin içindeki yazı sağda olsun (align=" ")


<table border="1" width="150" height= "100">
<tr>
<td align="right">
UzmanWeb</td>
</tr>
</table>
DayDay
 

Hücremin içindeki yazı altta olsun (valign=" ")

<table border="1" width="150" height="100">
<tr>
<td valign="bottom">
Hücre</td>
</tr>
</table>
UzmanWeb
 

Tablomdaki yanyana iki hücreyi birleştirmek istiyorum (colspan)


<table border="1">
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr><td colspan="2">4</td><td>5</td>
</tr>
<tr><td>6</td><td>7</td><td>8</td>
</tr>
</table>
1 2 3
4 5
6 7 8
 

Tablomdaki altalta iki hücreyi birleştirmek istiyorum (rowspan)

<table border= "1">
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr><td >4</td><td> rowspan="2">5</td><td>6</td>
</tr>
<tr><td>7</td><td>8</td>
</tr>
</table>
1 2 3
4 5 6
7 8

 
Yazılarım hücrenin kenarına değmesin (cellpadding)

<table border="1" cellpadding="15">
<tr>
<td>Değmiyor</td>
</tr>
</table>
Değmiyor (yazı tam ortada)
 

Hücremin etrafındaki çerçevenin kalınlığını ayarlıyayım (cellspacing)

<table border="1" cellspacing="15">
<tr>
<td>Etrafında boşluk var</td>
</tr>
</table>
kalın veya ince
 
Bunların hepsini tekrar tekrar deneyip, neler olduğunu görmek, öğrenmenin en iyi yoludur.