Ewet bu dersimizde html tablo nasıl yapılır onu anlatıcam.
Tablolar <table>.....</table> Kodları arasına yazılır
<tr> kodu yeni bir satır oluşturur. bu sırada <td> kodu ile hücrelere bölünür
Şimdi basit bir tablo yapalım:
Not: "<tr> kodumuzu yazarken 1tab boşluğu <td> kodumuzu yazarken ise 2tab boşluğu bırakınız."
kod:
<html>
<head>
<title>Tablo</title>
</head>
<body>
<table border="1">
<tr>
<td>Elma</td>
<td>Muz</td>
</tr>
<tr>
<td>Mavi</td>
<td>Yeşil</td>
<tr>
</table>
</body>
</html>
Burada basit bir tablo yaptık örnek site için:
Tıkla
Şimdi ise tek satırlı ve 4 hücreli bir tablo yapalım ama bu sefer yazının fonları tablonun boyunu ve tablonun backgroundları ile oynayalım.
Tablonun hangi hücrenin boyutu ile oynucaksak, onun içine yazıcaz kodumuzu, yani:
<td width="250px">Sarı<td>
Bu şekilde olucak. Fon ile oynamak için yine hücreye gidiyoruz;
<td><font color="red" font size"20px" font size="35px">kırmızı</font></td>
Buradaki hücremizin kırmızı yazısının boyutunu 35 px yaptık ve boyutunu ise 20 px yaptık, şimdi 3. hücremize background ekleyelim. Bunun için ise hücremizin içine gidiyoruz ve
background="resimadi.jpg"
kodumuzu ekliyoruz, yani:
<td background="1.jpg">Siyah</td>
Bu şekilde diğer 4.hücreyi kırmızı yapalım; bunun içinse bgcolor="red" kodumuzu kullanıcaz. <td bgcolor="red">Yeşil</td>
Bu şekilde tablamuzu görelim.
kod:
<html>
<head>
<title>Tablo</title>
</head>
<body>
<table border="1">
<tr>
<td width="250px">Sarı</td>
<td><font color="red" font size"20px" font size="35px">kırmızı</font></td>
<td background="1.jpg">Siyah</td>
<td bgcolor="red">Yeşil</td>
</tr>
</table>
</body>
</html>
Örnek site:
Tıkla
Peki, şimdi ise yine tek satırlı, 3 hücreli bir tablo yapalım. Bu sefer tabloların ikisinde resim olsun, ortadakinde ise Sanalkurs yazsın. Resim px'leri ise 150x150 olsun. İki td arasına resmimizi cağırıyoruz:
<td><img src="1.jpg" width="150px" heigth="150px"></td>
İki hücreye de:
kod:
<html>
<head>
<title>Tablo</title>
</head>
<body>
<table border="1" width="800" align="center">
<tr>
<td><img src="1.jpg" width="150px" heigth="150px"></td>
<td>Sanalkurs</td>
<td><img src="1.jpg" width="150px" heigth="150px"></td>
</tr>
</table>
</body>
</html>
Örnek Site :
Tıkla
Bazı şeyler dikkatinizi çekti mi? İki resim de sola yatık. İşte gelelim asıl konuya. Bunları ayarlamak için hücrenin boyutunu ayarlamamız gerekiyor. Çağırdığımız resimin boyutu kaç px'di? 150px idi değil mi? İşte tablomuzu da 150px yapıcaz. (width="150px") Bir de Sanalkurs yazımızı ortalayalım, bunun için ise;
<td><p align="center">Sanalkurs</p></td>
kodunu kullanıcaz.
kod:
<html>
<head>
<title>Tablo</title>
</head>
<body>
<table border="1" width="800" align="center">
<tr>
<td width="150px"><img src="1.jpg" width="150px" heigth="150px"></td>
<td><p align="center">Sanalkurs</p></td>
<td width="150px"><img src="1.jpg" width="150px" heigth="150px"></td>
</tr>
</table>
</body>
</html>
örnek site :
Tıkla
Şimdi ise 2 satırlı, ilk satır 2 hücreli, ikinci satır ise 3 hücreli bir tablo yapalım. Bunu
colspan="" kodu ile yaparız. Ben colspan'a bu tablo için 2 değerini vericem. Bu değer tablodan tabloya değişir.
kod:
<html>
<head>
<title>Tablo</title>
</head>
<body>
<table border="1" width="400" align="center">
<tr>
<td colspan="2">Elma</td>
<td>Muz</td>
</tr>
<tr>
<td>Mavi</td>
<td>Yeşil</td>
<td>Siyah</td>
<tr>
</table>
</body>
</html>
Örnek Site:
Tıkla 
