Tablo Oluşturma Html-Web Tasarım Ve Programlama Ders 5
Có thể bạn quan tâm
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
Từ khóa » Html Güzel Tablo örnekleri
-
HTML Tablo Oluşturma Örnekleri - Web Tasarım & Programlama
-
HTML Tablo Örnekleri - Web Tasarım & Programlama
-
HTML Tablo Örnekleri - Tasarım Kodlama
-
Tablo Örnekleri
-
Tablo HTML Şablonları - Nicepage
-
HTML5 Tablo (Table)
-
Html Tablo Örnekleri | Mehsatek
-
Top 20 Html örnek Tablo Kodları En Iyi 2022 - XmdForex
-
HTML Tablo Oluşturma - Kod Kampüsü
-
HTML'de Tablo Oluşturma - Beyaz.Net
-
Tablo Oluşturma Örnekleri Html-Web Tasarım Ve Programlama
-
CSS TABLOLARI ŞEKİLLENDİRME - WebCebir
-
HTML TABLO OLUŞTURMA - WebCebir