Html ile Tablo Nasıl Yapılır?

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>

[color=red]6 bömüme (hücreye) ayrılmış bir tablo yapalım[/color]

[code]<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>[/code]

Explorer görünümü:
[html] 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

[/html]

[color=red]Hücremin içi renkli olsun (bgcolor)[/color]

[code]<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>[/code]

Explorer görünümü:
[html] renkli hücre

kırmızı hücrem oldu

[/html]
Kırmızı hücrem oldu (arkaplanı kırmızı,yazı siyah)

[color=red]Hücremin içinde resim istiyorum (background)[/color]

[code]<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>[/code]

Explorer görünümü:
[html] hücreye resim ekleme

Heeyy burada resimlerim vaarr

[/html]

Heeyy burada resimlerim vaarr (arkaplanda resim yazı siyah)

[color=red]Hücremin kenar kalınlığını değiştirmek istiyorum (border)[/color]

[code]<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>[/code]

explorer görüntüsü:
[html] hücre kalınlıgı

kenarı kalın oldu

kenarı ince oldu

[/html]

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

[color=red]Hücremin kenarını renkli yapmak istiyorum (bordercolor)[/color]

[code]<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>[/code]

Explorer görünümü:
[html] hücre kalınlıgı

kenarını yeşil yaptım

[/html]

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

[color=red]Hücremin büyüklüğünü ayarlamak istiyorum (width=" " height=" ")[/color]

[code]<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>[/code]

Explorer görünümü:
[html] hücre büyüklüğü

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

[/html]

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

[color=red]Hücremin içindeki yazı sağda olsun (align=" ")[/color]

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

[color=red]Hücremin içindeki yazı altta olsun (valign=" ")[/color]

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

[color=red]Tablomdaki yanyana iki hücreyi birleştirmek istiyorum (colspan)[/color]

<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

[color=red]Tablomdaki altalta iki hücreyi birleştirmek istiyorum (rowspan)[/color]

<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

[color=red]Yazılarım hücrenin kenarına değmesin (cellpadding)[/color]

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

[color=red]Hücremin etrafındaki çerçevenin kalınlığını ayarlıyayım (cellspacing) [/color]

<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.

Html ile Tablo Nasıl Yapılır?

gece_mavisi

Html ile Tablo Nasıl Yapılır?