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<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)<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 (arkaplanı kırmızı,yazı siyah)
Hücremin içinde resim istiyorum (background)<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)<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 kalın)
kenarı ince oldu (kenar ince)
Hücremin kenarını renkli yapmak istiyorum (bordercolor)<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 (hücrenin kenarı renkli)
Hücremin büyüklüğünü ayarlamak istiyorum (width=" " height=" ")<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.
0 Yanıt
5885 Gösterim