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

  • 0 replies
  • 3846 views

0 Üye ve 3 Ziyaretçi konuyu incelemekte.

*

Çevrimdışı gece_mavisi

  • *
  • 3684
  • +299/-0
  • Cinsiyet: Bay
    • Uyanan Gençlik
Html ile Tablo Nasıl Yapılır?
« : 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: Linkleri gorebilmeniz icin izniniz yok! Uye ol veya Giris yap
<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: Linkleri gorebilmeniz icin izniniz yok! Uye ol veya Giris yap
<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: Linkleri gorebilmeniz icin izniniz yok! Uye ol veya Giris yap
<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: Linkleri gorebilmeniz icin izniniz yok! Uye ol veya Giris yap
<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: Linkleri gorebilmeniz icin izniniz yok! Uye ol veya Giris yap
<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: Linkleri gorebilmeniz icin izniniz yok! Uye ol veya Giris yap
<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.
 

 

Bunlarda İlginizi Çekebilir

  Konu / Başlatan replies Son İleti
0 replies
3492 views
Son İleti 16 Aralık 2010, 03:21:46
Gönderen: gece_mavisi
0 replies
2362 views
Son İleti 14 Ocak 2011, 20:22:27
Gönderen: D®agon
0 replies
6359 views
Son İleti 14 Ocak 2011, 21:38:31
Gönderen: D®agon
0 replies
2655 views
Son İleti 14 Ocak 2011, 23:09:33
Gönderen: D®agon
0 replies
2220 views
Son İleti 21 Eylül 2012, 10:02:12
Gönderen: busegül
0 replies
2722 views
Son İleti 21 Eylül 2012, 10:11:47
Gönderen: busegül
0 replies
17571 views
Son İleti 21 Eylül 2012, 10:22:49
Gönderen: busegül
0 replies
2492 views
Son İleti 13 Mayıs 2013, 22:25:28
Gönderen: D®agon
0 replies
9028 views
Son İleti 03 Ocak 2014, 22:28:43
Gönderen: D®agon
0 replies
967 views
Son İleti 20 Ekim 2016, 09:50:10
Gönderen: kardelen