HTML ile temel bir tablo tasarımı yaptıktan sonra tablonun çerçeve verme, çerçeve rengini değiştirme, hücrelere yada tabloya arka plan verme, yazıları hizalama yada yazının biçimini değiştirme gibi işlemleri yapmak isteyebilirsiniz.
İşte bu yazı sizlere tablonun ve hücrelerin biçimini nasıl değiştireceğinizi gösterecektir. Her uygulama kendi içinde ayrı ayrı örnekler barındıracak ve yukarıdaki bütün maddelere cevaplar içerecektir.
CSS Kullanmadan Tablo Ekleme
En temel hali ile bir tabloyu oluşturmak için aşağıdaki gibi <table>, <tr> ve <td> etiketleri kullanılır. Aşağıdaki örneği inceleyelim.
Yukarıdaki tabloda her hangi bir css kullanılmadığı için HTML kodları aşağıdaki gibi olacaktı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 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 | <!DOCTYPE html> <html> <head> </head> <body> <table> <tr> <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> |
CSS ile Tabloya Çerçeve Ekleme
Yukarıdaki gibi tablo ekledikten sonra tabloya çerçeve eklemek için CSS border özelliğini kullanıyoruz. Aşağıdaki örneği ve HTML/CSS kodlarını inceleyelim.
<head> etiketi arasına yazılan <style> etiketi içine table border ekleme kodunu renk kodu ve çerçeve kalınlığı ile ekledik. Bu işlemi tek satırda yapmak için border: 3px solid #CF000F; özelliğini tanımladık.
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 | <!DOCTYPE html> <html> <head> <style> table{ border: 3px solid #CF000F; } </style> </head> <body> <table> <tr> <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> |
Tablo İçindeki Hücrelerin Çerçevelerini Düzenleme
Tablo içindeki çerçevelerin hücrelerini düzenlemek için yine border özelliği ile table td seçicisini bir arada kullanmak gerekiyor. Aşağıdaki görseli ve HTML kodlarını inceleyelim.
Yukarıdaki turuncu alanlar <td> hücrelerini ifade etmektedir. CSS’de bunu seçmek için table td şeklinde kullanmak gerekiyor. Seçim yaptıktan sonra border ile renklendirme yaptık.
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 | <!DOCTYPE html> <html> <head> <style> table{ border: 3px solid #CF000F; } table td{ border: 5px solid #F29B34; } </style> </head> <body> <table> <tr> <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> |
CSS ile Tabloya Genişlik ve Yükseklik Verme
CSS ile bir nesneye genişlik ve yükseklik vermek için width ve height nitelikleri kullanılır. Tablolarda birer nesne olduğu için width ve height kullanarak genişlik ve yükseklik değerlerini değiştirebiliriz.
Aşağıdaki örnekte tablonun yüksekliği 250px, genişliği 500px olarak düzenlenmiştir.
Genişlik ve yükseklik özelliklerini table etiketine tanımlıyoruz.
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 | <!DOCTYPE html> <html> <head> <style> table{ border: 3px solid #CF000F; width: 500px; height: 250px; } table td{ border: 5px solid #F29B34; } </style> </head> <body> <table> <tr> <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> |
CSS ile Tablo içindeki Öğleri Hizalama
Bazı durumarda tablo içindeki öğeleri ortalama(center), sola(left) hizlama, sağa(right) hizalama yada her iki yana yaslama(justify) yapmak isteyebilirsiniz.
Hizlama işlemi için text-align özelliğini kullanarak tablodaki öğeleri istediğini duruma göre hizalama yapabilirsiniz. Aşağıdaki örnekte tüm öğeler ortalanmış durumda görünecektir.
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 | <!DOCTYPE html> <html> <head> <style> table{ border: 3px solid #CF000F; width: 500px; height: 250px; text-align: center; } table td{ border: 5px solid #F29B34; } </style> </head> <body> <table> <tr> <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> |
CSS ile Tablodaki ilk Satırı Kalın Gösterme
tablo içindeki öğeleri kalın göstermek için <th> etiketi kullanılabileceği gibi CSS ile de görününde kalın göstermek mümkündür.
Öncelikli olarak sadece bir satırın kalın olacağını ifade ettiğimiz için ilk <tr> etiketine bir tane id tanımlaması yapıyorum. Birinci satırdaki tr etiketini şu şekilde değiştirdim. <tr id=”tablo-baslik”>
Ardından id değeri tablo-baslik olan öğeyi CSS ile biçimlendirmek için #tablo-baslik seçicisini tanımlayarak yazıyı kalın yapmak için font-weigth özelliğine 100-900 arasında bir değer girdim.(100 en ince, 900 en kalın)
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 | <!DOCTYPE html> <html> <head> <style> table{ border: 3px solid #CF000F; width: 500px; height: 250px; text-align: center; } 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> |
CSS ile Tablo içindeki Metnin fontunu değiştirme
Tablodaki fontun biçimini değiştirmek için font-family özelliğini kullanarak istediğiniz fontu verebilirsiniz. Ayrıca google font ile aldığınız fontlarda da aynı yöntemi kullanabilirsiniz.
Aşağıdaki örnekte tablonun fontunu comic sans olarak değiştirdim.
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 | <!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; } 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> |
Tablonun Arkaplan Rengini Değiştirme
Tablonun arkaplan rengini CSS ile değiştirmek için background yada background-color özelliğini kullanabilrisiniz. Aşağıdaki örnekte tablonun arkaplan rengi değiştirilmiştir.
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 | <!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; } 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> |
Tablodaki Yazıların Rengini Değiştirme
CSS ile bir yazının rengini değiştirmek için color özelliği kullanılır. Aşağıdaki örnekte yazı rengi beyaz (#fff) yapılmıştı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 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> |
Bu kullanışlı veriler için teşekkürler.