Tablo Oluşturma Html-Web Tasarım ve Programlama Ders 5
Html’de yapılmış tablo örnekleri için link : https://www.gorselprogramlama.com/tablo-olusturma-ornekleri-html-web-tasarim-ve-programlama
Tablo Oluşturma: Html dilinde tablo oluşturmak için <table> </table> etiketi arasına yazılır. Satır oluşturmak için tr, sütun oluşturmak için td etiketi kullanılır.
Not: Oluşturduğunuz tabloda boş hücre kullacaksanız td etiketi arasına   eklemelisniz.Yoksa çizgiler gözükmez.
Aşağıdaki tabloyu html dili ile oluşturalım.
3 satır , 3 sütun bulunuyor.
[code language=”csharp”]
<html>
<head>
<title>Tablo işlemleri</title>
<head>
<body>
<table border="1">
<tr>
<td> </td> <td>Eylül</td> <td>Ekim</td>
</tr>
<tr>
<td>Ford</td><td>123</td><td>114</td>
</tr>
<tr>
<td>Bmw</td><td>104</td><td>109</td>
</tr>
</table>
</body>
</html>
[/code]
table yanındaki border=”1″ tablonun dış kenar çizgi kalınlığını belirliyor.Farklı bir değer kullanabilirsiniz.İlk hücre boş olduğu için   yazdık.Eğer yazmasaydık kenar çizgileri gözükmezdi. Kaydedip çalıştıralım.
Table içinde kullanılabilecek özellikler:
border: Dış kenar çizgi kalınlığı
width:Tablonun piksel olarak genişliğini belirler.
height:Tablonun piksel olarak yüksekliğini belirler.
bordercolor: Tablonun çizgi rengini belirler.
bgcolor: :Tablonun arkaplan rengini belirler.Bu özellik satır (tr) ve hücre (td) arka plan rengi içinde kullanılır.
bordercolorlight: Tablonun dış kenar çizgisindeki aydınlık kısmın rengini belirler.
bordercolordark: Tablonun dış kenarındaki karanlık kısmın rengini belirler.
Aşağıdaki tabloyu oluşturalım.
[code language=”csharp”]
<html>
<head>
<title>Tablo İşlemleri</title>
</head>
<body>
<table border="1" width="200" height="150" bordercolor="blue" bgcolor="yellow">
<tr>
<td> </td><td>Eylül</td><td>Ekim</td>
</tr>
<tr>
<td>Ford</td><td>123</td><td>114</td>
</tr>
<tr>
<td>Bmw</td><td>104</td><td>109</td>
</tr>
</table>
</body>
</html>
[/code]
Aşağıdaki tabloyu oluşturalım.
[code language=”csharp”]
<html>
<head>
<title>Tablo İşlemleri</title>
</head>
<body>
<table border="1" width="200" height="150" bordercolor="blue" bgcolor="yellow">
<tr bgcolor="red">
<td> </td><td>Eylül</td><td>Ekim</td>
</tr>
<tr>
<td>Ford</td><td>123</td><td>114</td>
</tr>
<tr>
<td>Bmw</td><td>104</td><td>109</td>
</table>
</body>
</html>
[/code]
Yukarıda 1.satırı kırmızı yapmak için birinci tr etiketi içine bgcolor=”red” yazdğımıza dikkat edin.
Aşağıdaki tabloyu oluşturalım.
[code language=”csharp”]
<html>
<head>
<title>Tablo İşlemleri</title>
</head>
<body>
<table border="1" width="200" height="150" bordercolor="blue" bgcolor="yellow">
<tr bgcolor="red">
<td> </td><td>Eylül</td><td>Ekim</td>
</tr>
<tr>
<td>Ford</td><td>123</td><td>114</td>
</tr>
<tr>
<td>Bmw</td><td>104</td><td bgcolor="#66FFFF">109</td>
</tr>
</table>
</body>
</html>
[/code]
Yukarıda 3. satır 3. hücreyi su rengi yapmak için 3. tr içindeki 3. td etiketi içine bgcolor=”#66FFFF” yazdğımıza dikkat edin.
Önemli Not: Renkler için ingilizce ismi veya 16’lık sayı sistemindeki değeri yazılır.Her ikiside kullanılabilir. Ör: siyah için black veya #00000 ,beyaz için white veya#FFFFFF
Html’de yapılmış tablo örnekleri için link : https://www.gorselprogramlama.com/tablo-olusturma-ornekleri-html-web-tasarim-ve-programlama
*********
align: Veriyi yatay olarak hizalamak için kullanılır. left:sola , right: sağa , center:ortaya hizalar.
valign: Veriyi dikey olarak hizalamak için kullanılır. top: üste , bottom: alta , middle:ortaya hizalar.
align ve valign birarada kullanılabilir.Mesela üste sağa hizalamak için <td align=”right” valign=”top”>gorselprogramlama.com</td> kullanılır.
Aşağıdaki tabloyu hazırlayalım.
[code language=”csharp”]
<html>
<head>
<title>Tablo İşlemleri</title>
</head>
<body>
<table border="1" width="350" height="200" bordercolor="green" bgcolor="yellow">
<tr bgcolor="red">
<td>&nbsp</td><td align="right">Eylül</td><td valign="top">Ekim</td>
</tr>
<tr>
<td>Ford</td><td align="right" , valign="bottom">123</td><td>114</td>
</tr>
<tr>
<td>Bmw</td><td>104</td><td>109</td>
</table>
</body>
</html>
[/code]
*********
Satır birleştirmek için colspan özelliği kullanılır. ör: colspan=”3″ i yanyana olan üç hücreyi birleştirir.
Sütun birleştirmek için rowspan özelliği kullanılır. ör: rowspan=”5″ i altalta olan beş hücreyi birleştirir.
Aşağıdaki tabloyu hazırlayalım.
[code language=”csharp”]
<html>
<head>
<title>Tablo İşlemleri</title>
</head>
<body>
<table border="1" width="400" height="200" bordercolor="blue" bgcolor="yellow">
<tr bgcolor="silver">
<td> </td><td> </td><td align="center" colspan="2">2006</td>
</tr>
<tr bgcolor="red">
<td>&nbsp</td><td>&nbsp</td><td>Eylül</td><td>Ekim</td>
</tr>
<tr>
<td rowspan="2">Ford</td><td>Fiesta</td><td>123</td><td>114</td>
</tr>
<tr>
<td>Focus</td><td>104</td><td>109</td>
</table>
</body>
</html>
[/code]
*********
Tablo oluşturuken hücre verilerini başlık olarak yazmak için th etiketi kullanılır.<th></th> etiketi arasına yazılan hücreler başlık olarak yazılır.
Aşağıdaki tabloyu hazırlayalım:2006,Eylül,Ekim,Ford,Fiesta,Focus başlık konumundadır.
[code language=”csharp”]
<html>
<head>
<title>Tablo İşlemleri</title>
</head>
<body>
<table border="1" width="400" height="200" bordercolor="blue" bgcolor="yellow">
<tr bgcolor="silver">
<td> </td> <td> </td> <th align="center" colspan="2">2006</th>
</tr>
<tr bgcolor="red">
<td> </td> <td> </td> <th>Eylül</th><th>Ekim</th>
</tr>
<tr>
<th rowspan="2">Ford</th><th>Fiesta</th><td>123</td><td>114</td>
</tr>
<tr>
<th>Focus</th><td>104</td><td>109</td>
</table>
</body>
</html>
[/code]
*********
Tablonun üstüne başlık eklemek için thead etiketi kullanılır.Tablonun altına veya üstüne ikinci bir başlık eklemek için caption etiketi kullanılır.
Aşağıdaki tabloyu hazırlayalım.
[code language=”csharp”]
<html>
<head>
<title>Tablo İşlemleri</title>
</head>
<body>
<table border="1" width="400" height="200" bordercolor="blue" bgcolor="yellow">
<thead>Satış Tablosu</thead>
<caption align="bottom">Tablo 1.1 araç satış</caption>
<tr bgcolor="silver">
<td> </td> <td> </td><th align="center" colspan="2">2006</th>
</tr>
<tr bgcolor="red">
<td> </td> <td> </td><th>Eylül</th><th>Ekim</th>
</tr>
<tr>
<th rowspan="2">Ford</th><th>Fiesta</th><td>123</td><td>114</td>
</tr>
<tr>
<th>Focus</th><td>104</td><td>109</td>
</table>
</body>
</html>
[/code]
*********
Tabloda hücreler ile dış kenarlık arasında boşluk bırakmak istiyorsak cellspacing özelliğini kullanabiliriz.
Yukarıdaki tablonun cellspacing değerini 7 yapalım.
[code language=”csharp”]
<html>
<head>
<title>Tablo İşlemleri</title>
</head>
<body>
<table border="1" bordercolor="green" cellspacing="7">
<tr>
<td> </td><td>Eylül</td><td>Ekim</td>
</tr>
<tr>
<td>Ford</td><td>123</td><td>114</td>
</tr>
<tr>
<td>Bmw</td><td>104</td><td>109</td>
</tr>
</table>
</body>
</html>
[/code]
cellspacing değerini 16 yapalım.
[code language=”csharp”]
<html>
<head>
<title>Tablo İşlemleri</title>
</head>
<body>
<table border="1" bordercolor="green" cellspacing="16">
<tr>
<td> </td><td>Eylül</td><td>Ekim</td>
</tr>
<tr>
<td>Ford</td><td>123</td><td>114</td>
<tr>
<td>Bmw</td><td>104</td><td>109</td>
</table>
</body>
</html>
[/code]
Yukarıda iki tablo arasındaki farkı görüyüruz.
*********
Tabloda hücreler verileri ile kenarlık arasında boşluk bırakmak istiyorsak cellpadding özelliğini kullanabiliriz.
,
cellpadding değerini 12 yapalım.
[code language=”csharp”]
<html>
<head>
<title>Tablo İşlemleri</title>
</head>
<body>
<table border="1" bordercolor="green" cellpadding="12">
<tr>
<td> </td><td>Eylül</td><td>Ekim</td>
</tr>
<tr>
<td>Ford</td><td>123</td><td>114</td>
</tr>
<tr>
<td>Bmw</td><td>104</td><td>109</td>
</table>
</body>
</html>
[/code]
cellpadding değerini 25 yaptğımızda aşağıdaki görüntüyü elde ederiz.
Yukarıda iki tablo arasındaki farkı görüyüruz.
Html’de yapılmış tablo örnekleri için link https://www.gorselprogramlama.com/tablo-olusturma-ornekleri-html-web-tasarim-ve-programlama
Hocam Kendi Temamızı Hazırlamamız icin Gerekli Kodları Paylasırsanız Sevinirimm..
İleri derslerde olabilir.
Özenle hazırlanmış,çok güzel bilgiler buldum burada.Hazırlayan ve emeği geçenlere teşekkürler.
derste anlamadıklarımı anladım gayet başarılı fakat keşke iç içe tablolardanda bahsedilseymiş
yazılıda da bu kadar sorsalar güzel olurdu
mukenbel ya
Final ödevim için hazırlayacağım bir konu için saatlerdir düşündüğüm tabloyu burada bulduğum için çok mutluyum. Kendi konuma göre biraz daha düşünmem lazım sadece
Yapacağım tablo cumartesi ve pazar gününe ait 11 farklı gazetenin manşetindeki haberlerinin kapladığı alan olacaktı ki bu sayede hangi gazete hangi habere ne kadar yer ayırmış rahatça olacak tablomda harika bir ödev yapmış olacagım aklına benım verılerımle ılgılı tablo gelen paylasırsa sevınırım tsekkurler
html tablo için güzel sayfa
Güzel sayfa
hocam konular ii güzel anlamsı kolay ama çooooook sıkıcı.
manyak bişi bu ya kafam dumanlandı