Html'de tablo yapımı

  • 50.502
  • 06 Kasım 2006

Html'de tablo nasıl yapılır, renkler, boyutlar vs.. nasıl ayarlanır? Bu dersimizde bunları öğreneceğiz.

Ewet bu dersimizde html tablo nasıl yapılır onu anlatıcam.

Tablolar

.....
Kodları arasına yazılır
kodu yeni bir satır oluşturur. bu sırada kodu ile hücrelere bölünür

Şimdi basit bir tablo yapalım:

Not: " kodumuzu yazarken 1tab boşluğu 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. Yeşil
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>




Örnek Site:Tıkla

  • Etiketler;
Ali Yazal
1987'de Ankara'da dünyaya geldi. Küçük yaşlarda iken bilgisayar dünyasına adımını attı. Yaşın önemi yok dercesine yurtiçi ve yurtdışı programlar hazırladı. Halen bilgisayar programcısı olarak Ankara'da web programcılığı ile ilgili çalışmalarına devam ediyor.
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

hocam su </table> kodunun hemen üstündek i kod <tr> nin yanlis oldugunu düsünüyorum...bence o </tr> olmasi gerekmiyormu?
süper teşekkürler :) ödevimi yaptım yhaa
colspan kullanılmasa ne fark olcaktı?
[b]Dikkat ettiysen colspan="1" yaptığında colspan yaptığın hücre alttaki satırda 1. hücreye kadar uzuyor. 2 yaptığında ise 2.hücreye kadar uzuyor. Düşün biraz bakalım neden olabilir diye :)[/b]
colspan ı ilk defa duydum
çok iyi yapıyorumda mesela bir tablo yu saga koydum bir tabloyu sola koymaya çalışıyorum olmuyor ???

Yukarı Git