Web sayfamıza eklediğimiz tablo üzerinde çerçeve ekleme, arka plan rengi düzenlemesi, metin hizalama, yazı rengi değiştirme işlemlerini CSS ile düzenleyebiliriz.
Tabloya Border Ekleme
<TABLE> etiketine verdiğimiz BORDER özelliği tablomuza genel bir çerçeve çizilmesini sağlar.
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 | <HTML> <HEAD> <STYLE TYPE="TEXT/CSS"> table {border: 1px solid black;} </STYLE> </HEAD> <BODY> <TABLE> <TR> <TD>ÖĞRENCİ NO</TD> <TD>AD</TD> <TD>SOYAD</TD> <TD>SINAV NOTU</TD> </TR> <TR> <TD>2003</TD> <TD>Şahin</TD> <TD>GEVREK</TD> <TD>77</TD> </TR> <TR> <TD>2018</TD> <TD>Vahdet</TD> <TD>DEVECİ</TD> <TD>60</TD> </TR> <TR> <TD>2082</TD> <TD>Melih</TD> <TD>AY</TD> <TD>95</TD> </TR> <TR> <TD>2129</TD> <TD>Ahmet</TD> <TD>ŞÖLEN</TD> <TD>100</TD> </TR> <TR> <TD>2141</TD> <TD>Rabia</TD> <TD>AKTAŞ</TD> <TD>70</TD> </TR> <TR> <TD>2161</TD> <TD>Semih</TD> <TD>MANDALI</TD> <TD>70</TD> </TR> <TR> <TD>2217</TD> <TD>Burak</TD> <TD>KILIÇ</TD> <TD>75</TD> </TR> <TR> <TD>9101</TD> <TD>Fatma Ahsen</TD> <TD>UZUN</TD> <TD>90</TD> </TR> </TABLE> </BODY> </HTML> |
Hücrelerde çerçeve belirlemek istiyorsak <TD> etiketine BORDER vermemiz gerekir.
1 2 3 4 | <STYLE TYPE="TEXT/CSS"> table {border: 1px solid black;} table td {border: 1px solid black;} </STYLE> |
Tablonun çerçevesini düzenleme
Tablonun kenarlıklarını birleştirerek tek bir çizgi olarak görünmesini istiyorsak border-collapse özelliğini değiştirmemiz gerekir.
1 2 3 4 | <STYLE TYPE="TEXT/CSS"> table {border-collapse:collapse;} td {border: 1px solid black;} </STYLE> |
Tablonun genişlik ve yükseklik ayarları
<TABLE> etiketine yazdığımız width (genişlik) ve height (yükseklik) değerleri tüm tabloyu etkilemektedir. Ancak belli bir satırı etkilemek istiyorsak aşağıdaki örnekte olduğu gibi <TR> etiketine yukseklik adında ID tanımlayarak yalnızca o satırın yüksekliği ayarlanabilir.
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 71 72 73 74 75 76 77 78 79 80 81 | <HTML> <HEAD> <STYLE TYPE="TEXT/CSS"> table { border-collapse:collapse; width:500px; height:300px; } td { border: 1px solid black; } tr#yukseklik { height:80px; } </STYLE> </HEAD> <BODY> <TABLE> <TR> <TD>ÖĞRENCİ NO</TD> <TD>AD</TD> <TD>SOYAD</TD> <TD>SINAV NOTU</TD> </TR> <TR> <TD>2003</TD> <TD>Şahin</TD> <TD>GEVREK</TD> <TD>77</TD> </TR> <TR> <TD>2018</TD> <TD>Vahdet</TD> <TD>DEVECİ</TD> <TD>60</TD> </TR> <TR> <TD>2082</TD> <TD>Melih</TD> <TD>AY</TD> <TD>95</TD> </TR> <TR> <TD>2129</TD> <TD>Ahmet</TD> <TD>ŞÖLEN</TD> <TD>100</TD> </TR> <TR> <TD>2141</TD> <TD>Rabia</TD> <TD>AKTAŞ</TD> <TD>70</TD> </TR> <TR> <TD>2161</TD> <TD>Semih</TD> <TD>MANDALI</TD> <TD>70</TD> </TR> <TR> <TD>2217</TD> <TD>Burak</TD> <TD>KILIÇ</TD> <TD>75</TD> </TR> <TR> <TD>9101</TD> <TD>Fatma Ahsen</TD> <TD>UZUN</TD> <TD>90</TD> </TR> </TABLE> </BODY> </HTML> |
Tablonun iç boşluklarını ayarlama
<TD> etiketine verdiğimi PADDING özelliği ile yazıların tablo hücrelerine olan uzaklığı ayarlanır.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <STYLE TYPE="TEXT/CSS"> table { border-collapse:collapse; width:500px; height:300px; } td { border: 1px solid black; padding:8px; } tr#yukseklik { height:80px; } </STYLE> |
Tabloda metin hizalama
TEXT-ALIGN özelliği ile tablo içinde yazılan metinlerin konumu ayarlanır.
- Center (ortala)
- Left (Sola dayalı)
- Right (Sağa dayalı)
- Justify(iki yana yaslı)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <STYLE TYPE="TEXT/CSS"> table { border-collapse:collapse; width:500px; height:300px; text-align:center; } td { border: 1px solid black; padding:8px; } tr:first-child { height:80px; } </STYLE> |
Tablonun arkaplan rengi değiştirme
<TABLE> etikete verilecek olan BACKGROUND-COLOR özelliği ile tabloya arkaplan rengi verilir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <STYLE TYPE="TEXT/CSS"> table { border-collapse:collapse; width:500px; height:300px; text-align:center; background-color:#C1FFC1; } td { border: 1px solid black; padding:8px; } tr:first-child { height:80px; } </STYLE> |
Arkaplana resim ekleme
<TABLE> etikete verilecek olan BACKGROUND-IMAGE özelliği ile tabloya arkaplan resmi eklenir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <STYLE TYPE="TEXT/CSS"> table { border-collapse:collapse; width:500px; height:300px; text-align:center; background-image:url(arkaplan.jpg); } td { border: 1px solid black; padding:8px; } tr:first-child { height:80px; } </STYLE> |
Tabloda yazı rengi değiştirme
COLOR özelliği ile tablo içindeki metinlerin rengi değiştirilir. FONT-WEIGHT özelliği ile metinlerin kalın olması sağlanır.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <STYLE TYPE="TEXT/CSS"> table { border-collapse:collapse; width:500px; height:300px; text-align:center; background-image:url(arkaplan.jpg); } td { border: 1px solid black; padding:8px; } tr:first-child { height:80px; color: #8B5A00; font-weight:bolder; } </STYLE> |
Tabloda Sütun ve Satır renklendirme
nth-child kullanı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 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 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 | <HTML> <HEAD> <STYLE TYPE="TEXT/CSS"> table { border-collapse:collapse; width:500px; height:300px; text-align:center; background-image:url(arkaplan.jpg); } td { border: 1px solid black; padding:8px; } tr:first-child { height:80px; color: #8B5A00; font-weight:bolder; } tr:nth-child(2n+3){background-color:#FF6;} </STYLE> </HEAD> <BODY> <TABLE> <TR> <TD>ÖĞRENCİ NO</TD> <TD>AD</TD> <TD>SOYAD</TD> <TD>SINAV NOTU</TD> </TR> <TR> <TD>2003</TD> <TD>Şahin</TD> <TD>GEVREK</TD> <TD>77</TD> </TR> <TR> <TD>2018</TD> <TD>Vahdet</TD> <TD>DEVECİ</TD> <TD>60</TD> </TR> <TR> <TD>2082</TD> <TD>Melih</TD> <TD>AY</TD> <TD>95</TD> </TR> <TR> <TD>2129</TD> <TD>Ahmet</TD> <TD>ŞÖLEN</TD> <TD>100</TD> </TR> <TR> <TD>2141</TD> <TD>Rabia</TD> <TD>AKTAŞ</TD> <TD>70</TD> </TR> <TR> <TD>2161</TD> <TD>Semih</TD> <TD>MANDALI</TD> <TD>70</TD> </TR> <TR> <TD>2217</TD> <TD>Burak</TD> <TD>KILIÇ</TD> <TD>75</TD> </TR> <TR> <TD>9101</TD> <TD>Fatma Ahsen</TD> <TD>UZUN</TD> <TD>90</TD> </TR> </TABLE> </BODY> </HTML> |
Güzel bir paylaşım. Artık Bootstrap ile modern tablolar da kullanılabiliyor 🙂