Bu yazımızda HTML ile Tablo oluşturma ve HTML ile Tablo Örnekleri konusuna değineceğim. Öncelikle Tablo nasıl oluşturulur ve tablo özellikleri nelerdir ? inceleyelim
|
1 2 3 |
<table> </table> |
Hazırlamış olduğunuz bir web sayfasına tablo eklemek isterseniz;
etiketlerinden faydalanmanız gerekecek.
Tablolar satır ve sütunlarda oluşur. Bu satır ve Sütunların kesiştiği bölüme hücre adı verilir.
Youtube kalanındaki HTML Tablo oluşturma videosu için tıklayın.
“tr” etiketi kullanarak tabloya satır ekleme işlemi gerçekleştirilir. “td” etiketi ile de sütun oluşturma işlemi gerçekleşir. border parametresi ise tablomuzun çerçevesinin kalınlığını belirlemek için kullanılmaktadır. Eğer tablo kenarlığı istenmiyorsa border=0 olarak ayarlanmalıdır.
Aşağıdaki örnekte bir satırda 3 tane hücre oluşturulmuştur.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> </head> <body> <table border=1> <tr> <td>Ahmet</td> <td>Hayri</td> <td>Hüseyin</td> </tr> </table> <!--Not: border artık kullanılmamaktadır--> </body> </html> |
Yukarıdaki kodları dikkatli incelediğimizde tr satır etiketi içine 3 tane td etiketi oluşturarak bir satırda 3 tane hücre oluşturulmuştur.
Aşağıdaki örnekte ise 3 satırda birer tane hücre oluşturulmuştur.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <head> </head> <body> <table border=1> <tr> <td>Kalem</td> </tr> <tr> <td>Kitap</td> </tr> <tr> <td>Defter</td> </tr> </table> <!-- Not: border artık kullanılmamaktadır--> </body> </html> |
Kodlarımızı oluşturduğumuzda table etiketi içinde tr etiketleri ile 3 satır oluşturulduğunu ve her bir satırda bir adet td etiketi kullanıldığını görüyoruz. Böyle bir durumda 3 satır ve 1 sütundan oluşan aşağıdaki tabloyu elde ediyoruz.
Şimdi de 2 sütun ve 2 satırdan oluşan bir tablo oluşturalım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html> <head> </head> <body> <table border=2> <tr> <td>1. Sütun</td> <td>2. Sütun </td> </tr> <tr> <td>Ahmet</td> <td>Cansever</td> </tr> <tr> <td>Mehmet</td> <td>Salim</td> </tr> </table> <!--Not: border artık kullanılmamaktadır--> </body> </html> |
kodlarımızı çalıştırdığımızda;
İlginizi çekebilir: HTML Kodları
şeklinde 2 satır ve 2 sütundan oluşan bir tablo oluşturmuş oluyoruz.
BorderColor parametresi tablomuzda kalınlığı belirlenen kenarlığın rengini ayarlamak için kullanılır. Örneğimizi inceleyelim.
Aşağıdaki yöntem yerine bir alttaki CSS kullanımını tercih edin.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html> <head> </head> <body> <table border=2 bordercolor="Red" > <tr> <td>Hayri</td> <td>KOÇMARLAR</td> </tr> <tr> <td>Ahmet</td> <td>Cansever</td> </tr> <tr> <td>Mehmet</td> <td>Salim</td> </tr> </table> <!--Not: border artık kullanılmamaktadır--> </body> </html> |
CSS ile tablo çerçeve rengini ve çerçevesini belirleme
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html> <head> <style> table,td{ border:1px solid red; } </style> </head> <body> <table> <tr> <td>Hayri</td> <td>KOÇMARLAR</td> </tr> <tr> <td>Ahmet</td> <td>Cansever</td> </tr> <tr> <td>Mehmet</td> <td>Salim</td> </tr> </table> <!--Not: border artık kullanılmamaktadır--> </body> </html> |
Yukarıdaki HTML kodlarını tarayıcıda çalıştırdığımızda aşağıdaki görüntüyü elde ederiz.
Şimdi de aynı örnek üzerinde bgcolor parametresi ile hücre arkaplan renklerini değiştirelim. bgcolor=”pink” ifadesi ile hücre renklerini değiştirip sonuca bakalım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html> <head> </head> <body> <!--tavsiye edilmez--> <table border=1 bgcolor="#00B5B5" bordercolor="#FFFFF7"> <tr> <td>Hayri</td> <td>KOÇMARLAR</td> </tr> <tr> <td>Ahmet</td> <td>Cansever</td> </tr> <tr> <td>Mehmet</td> <td>Salim</td> </tr> </table> </body> </html> |
CSS Kullanarak zemin rengini değiştirme
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html> <head> <style> table,td{ border:1px solid #FFFFF7; background-color: #00B5B5; } </style> </head> <body> <table> <tr> <td>Hayri</td> <td>KOÇMARLAR</td> </tr> <tr> <td>Ahmet</td> <td>Cansever</td> </tr> <tr> <td>Mehmet</td> <td>Salim</td> </tr> </table> </body> </html> |
Şimdide tablomuzda arkaplana background parametresini kullanarak bir resim ekleyelim. Örneğimizde html sayfamızla aynı yerde php.png isimli bir resim olduğunu belirterek kodlarımızı yazalım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html> <head> </head> <body> <!--tavsiye edilmez--> <table border=1 background="zemin.png" bordercolor="#282830"> <tr> <td>Hayri</td> <td>KOÇMARLAR</td> </tr> <tr> <td>Ahmet</td> <td>Cansever</td> </tr> <tr> <td>Mehmet</td> <td>Salim</td> </tr> </table> </body> </html> |
CSS ile zemin resmi tanımlama
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html> <head> <style> table,td{ border:1px solid #282830; } table{ background-image: url("zemin.png") ; } </style> </head> <body> <table> <tr> <td>Hayri</td> <td>KOÇMARLAR</td> </tr> <tr> <td>Ahmet</td> <td>Cansever</td> </tr> <tr> <td>Mehmet</td> <td>Salim</td> </tr> </table> </body> </html> |
Şimdide Width ve Height parametrelerine bakalım. Width parametresi Tablonun veya hücrenin pixel cinsinden genişliğini belirlemek için kullanılır.
|
1 2 3 |
<table width="200"> |
CSS ile
|
1 2 3 4 5 6 7 |
<style> table{ width: 200px; } </style> |
şeklinde Tablo genişliğini belirlemek için kullanılır.
|
1 2 3 |
<td width="200">Mehmet</td> |
CSS ile
|
1 2 3 4 5 6 7 |
<style> td{ width: 200px; } </style> |
şeklinde kullanımda ise hücre genişliği ayarlanabilir.
Örneğimizi inceleyelim.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html> <head> </head> <body> <!--tavsiye edilmez--> <table border=1 width="200" bordercolor="#282830"> <tr> <td>Hayri</td> <td>KOÇMARLAR</td> </tr> <tr> <td>Ahmet</td> <td>Cansever</td> </tr> <tr> <td>Mehmet</td> <td>Salim</td> </tr> </table> </body> </html> |
CSS ile
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html> <head> <style> table,td{ border:1px solid #282830; } table{ width: 200px; } </style> </head> <body> <table> <tr> <td>Hayri</td> <td>KOÇMARLAR</td> </tr> <tr> <td>Ahmet</td> <td>Cansever</td> </tr> <tr> <td>Mehmet</td> <td>Salim</td> </tr> </table> </body> </html> |
Şimdiki örneğimizde 1. sütun genişliğini 150 piksel, 2. sütunun genişliğini 300piksel olarak ayarlayalım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html> <head> </head> <body> <!--tavsiye edilmez--> <table border=1 bordercolor="#282830"> <tr> <td width="150">Hayri</td> <td width="300">KOÇMARLAR</td> </tr> <tr> <td>Ahmet</td> <td>Cansever</td> </tr> <tr> <td>Mehmet</td> <td>Salim</td> </tr> </table> </body> </html> |
Satır içi CSS ile
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html> <head> <style> table,td{ border:1px solid #282830; } </style> </head> <body> <table> <tr> <td style="width: 150px;">Hayri</td> <td style="width: 300px;">KOÇMARLAR</td> </tr> <tr> <td>Ahmet</td> <td>Cansever</td> </tr> <tr> <td>Mehmet</td> <td>Salim</td> </tr> </table> </body> </html> |
Şimdide tablomuzda hücre birleştirme işlemlerinin nasıl yapılacağına bakalım. Eğer aynı satırdaki hücreleri birleştireceksek Colspan, aynı sütundaki hücreleri birleştirmek istiyorsak Rowspan kullanılır.
Bir örnekle inceleyelim. Örneğimizde bir sınıfa ait kız ve erkek öğrenci sayılarının gösterildiği bir tablo bulunmakta. Tablomuzun ilk satırındaki iki hücreyi colspan ile birleştirelim.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html> <head> </head> <body> <table border=1 bordercolor="#CF000F"> <tr> <td colspan="2" width="100">5B Sınıfı</td> </tr> <tr> <td>Kız</td> <td>Erkek</td> </tr> <tr> <td>12</td> <td>18</td> </tr> </table> </body> </html> |
rowspan ve colspan aynı anda kullanımına bakalım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!DOCTYPE html> <html> <head> </head> <body> <table border=1 bordercolor="#CF000F"> <tr> <td colspan="3" width="100">STOKLAR</td> </tr> <tr> <td width="100">Sıra No</td> <td width="100">Stok Adı</td> <td width="100">Stok Adeti</td> </tr> <tr> <td>1</td> <td>Kalem</td> <td rowspan="3">50</td> </tr> <tr> <td>2</td> <td>Kitap</td> </tr> <tr> <td>3</td> <td>Silgi</td> </tr> </table> </body> </html> |
Yukarıdaki örnekte 1. satırdaki hücre içinde bulunan STOKLAR içeriğini ortalamak için align parametresini kullanabiliriz. Ufak bir değişiklik yapalım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!DOCTYPE html> <html> <head> </head> <body> <table border=2 bordercolor="Red" > <tr> <td align="center" colspan="3" width="100">STOKLAR</td> </tr> <tr> <td width="100">Sıra No</td> <td width="100">Stok Adı</td> <td width="100">Stok Adeti</td> </tr> <tr> <td>1</td> <td>Kalem</td> <td align="center" rowspan="3">50</td> </tr> <tr> <td>2</td> <td>Kitap</td> </tr> <tr> <td>3</td> <td>Silgi</td> </tr> </table> </body> </html> |
Cellspacing ifadesi Tablonun içerisindeki hücrelerin, birbirlerinden ve tablo sınırlarından uzaklığını pixel türünden ayarlamak için kullanılır.
Cellpadding ise Hücrelerin içindeki verilerin, hücre sınırlarından uzaklığının ne kadar olacağını belirlemek için kullanılır.
Örnek 3:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<body> <table border="2"> <tr> <td colspan="4">Alış Veriş Tablosu</td> </tr> <tr> <td>Tür</td> <td>Ürün</td> <td>Fiyat</td> <td>İndirim Oranı</td> </tr> <tr> <td rowspan="5">Beyaz Eşya</td> <td>Buzdolabı</td> <td>1.750</td> <td rowspan="3">%25</td> </tr> <tr> <td>Fırın</td> <td>650</td> </tr> <tr> <td>Çamaşır Makinesi</td> <td>1.100</td> </tr> <tr> <td>Bulaşık Makinesi</td> <td>750</td> <td rowspan="2">%35</td> </tr> <tr> <td>Dondurucu</td> <td>600</td> </tr> <tr> <td rowspan="2">Küçük Ev Aletleri</td> <td>Mikser</td> <td>138</td> <td rowspan="2">%10</td> </tr> <tr> <td>Saç Kurutma</td> <td>151</td> </tr> </table> </body> </html> |
Örnek 4:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<head> <title>Tablo Örnekleri</title> <meta charset="utf-8"> </head> <body> <h1>Tablo Örnekleri</h1> <table border="1"> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td align="center" rowspan="2" colspan="2" >6</td> <td>7</td> </tr> <tr> <td>8</td> <td>9</td> </tr> <tr> <td>10</td> <td>11</td> <td>12</td> <td>13</td> </tr> </table> </body> </html> |
Ekran Çıktısı:
Örnek 5:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!doctype html> <html> <head> <title>Tablo Örnekleri</title> <meta charset="utf-8"> <meta name="description" content="Tablo Örnekleri"> </head> <body> <table border="2" width="200"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td colspan="2" align="center">5</td> </tr> <tr> <td>6</td> <td>7</td> <td>8</td> </tr> </table> </body> </html> |
Ekran Çıktısı:
Örnek 6:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!doctype html> <html> <head> <title>Tablo Örnekleri</title> <meta charset="utf-8"> <meta name="description" content="www.yazilimkodlama.com"> </head> <body> <table border="2" width="200"> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td colspan="2" align="center">6</td> <td>7</td> </tr> <tr> <td>8</td> <td>9</td> <td>10</td> <td>11</td> </tr> <tr> <td>12</td> <td colspan="3" align="center">13</td> </tr> </table> </body> </html> |
Ekran Çıktısı:
Örnek 7:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!doctype html> <html> <head> <title>Tablo Örnekleri</title> <meta charset="utf-8"> <meta name="description" content="Tablo Örnekleri"> </head> <body> <table border="2" width="200"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td rowspan="2">4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> </tr> </table> </body> </html> |
Ekran Çıktısı:
Örnek 8 :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<!doctype html> <html> <head> <title>Tablo Örnekleri</title> <meta charset="utf-8"> <meta name="description" content="Tablo Örnekleri"> </head> <body> <table border="2" width="200"> <tr> <td rowspan="3">1</td> <td>2</td> <td colspan="2">3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td colspan="3">7</td> </tr> <tr> <td rowspan="2">8</td> <td colspan="2" align="center">9</td> <td>10</td> </tr> <tr> <td colspan="2">11</td> <td>12</td> </tr> </table> </body> </html> |
Ekran Çıktısı:
Örnek 9:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!doctype html> <html> <head> <title>Tablo Örnekleri</title> <meta charset="utf-8"> <meta name="description" content="Tablo Örnekleri"> </head> <body> <h3 align="center">Başlık</h3> <table border="2" bordercolor="Red" bgcolor="Pink" align="center"> <tr> <td colspan="2">65</td> <td colspan="2">40</td> <td colspan="2">20</td> </tr> <tr> <td>Erkek</td> <td>Kadın</td> <td>Erkek</td> <td>Kadın</td> <td>Erkek</td> <td>Kadın</td> </tr> <tr> <td>82</td> <td>85</td> <td>78</td> <td>82</td> <td>77</td> <td>81</td> </tr> </table> </body> </html> |
Ekran Çıktısı:
Örnek 10:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<!doctype html> <html> <head> <title>Tablo Örnekleri</title> <meta charset utf="8"> </head> <body> <table border="3" width="50%" height ="200" bordercolor="white" bgcolor="red" align="center"> <tr> <td align="center">1</td> <td rowspan="2" align="center">2</td> <td rowspan="2" colspan="2" align="center">3</td> <td align="center">4</td> </tr> <tr> <td align="center">5</td> <td align="center">6</td> </tr> <tr> <td align="center">7</td> <td rowspan="3" align="center">8</td> <td align="center">9</td> <td rowspan="2"align="center">10</td> <td align="center">11</td> </tr> <tr> <td align="center">12</td> <td align="center">13</td> <td rowspan="2"align="center">14</td> </tr> <tr> <td align="center">15</td> <td colspan="2" align="center">16</td> </tr> </table> </body> </html> |
Ekran Çıktısı:
Örnek 11: CSS ile Tabloyu Biçimlendirme Örneği
HTML Css Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
<!DOCTYPE html> <html> <head> <style> table{ border: 3px solid #CF000F; width: 500px; height: 250px; text-align: center; font-family: "Comic Sans MS", "Comic Sans", cursive; background-color: #F1654C; color:#fff; } table td{ border: 5px solid #F29B34; } #tablo-baslik{ font-weight: 700; } </style> </head> <body> <table> <tr id="tablo-baslik"> <td>Sıra</td> <td>Ad</td> <td>Soyad</td> <td>Numara</td> </tr> <tr> <td>1</td> <td>Ahmet</td> <td>Cansever</td> <td>15</td> </tr> <tr> <td>2</td> <td>Hayri</td> <td>Koçmarlar</td> <td>48</td> </tr> <tr> <td>3</td> <td>Hüseyin</td> <td>Öztürk</td> <td>52</td> </tr> <tr> <td>4</td> <td>Ufuk</td> <td>İlkiz</td> <td>65</td> </tr> <tr> <td>4</td> <td>Recep</td> <td>Ortaköylü</td> <td>71</td> </tr> </table> </body> </html> |
Arkadaşlar ben notepad ile html kullanarak tablo yaptım ama kenarlarını nasıl yumuşatacam bilmiyorum yardımcı olur musunuz
table {
border-radius:6px;
}
CSS kullanarak kenarları yumuşatabilirsin.
Hocam süpersiniz elinize emeğinize sağlık
çok iyi anlatım olmuş, emeğize sağlık.
Sayenizde ödevimi hallettim. Hem de konuyu çok iyi kavradım. Teşekkürler.