Yazar: Merhaba değerli arkadaşlar!
Bu yazımda sizlere css’de tablo özelliklerini ve bu özelliklerin kullanımını detaylı bir şekilde anlatacağım.
Css ile html’deki yapmış olduğumuz tabloları css ile nasıl şekillendirebiliriz bu yazımda bu konuya detaylı birşekilde deyineceğim.
Peki o zaman başlayalım.
css tablo şekillendirirken ilk olarak ele alacağımız özellik border: yani kenarlık olacaktır. tablomuzun kenarlıklarını border ile şekillendirebiliriz.border-collapse: kenarlıkları kaldırmak için bu özellikten faydalanabiliriz. bu özellik kullanıldığında tablonun varsayılan değerlerini yok edebiliriz.
width: tablo hücreleri için genişlik belirtmenizi sağlayan bir özelliktir.
height: tablo hücreleri için yükseklik belirtmenizi sağlayan bir özelliktir.
text-align: tablo içerisindeki yazıların hezalanması sağlanır. center, right, left, justify gibi değerler alırlar.
padding: tablo içerisinden belirttiğiniz değerde boşluk verilmesini sağlar.
background-color: arkaplan vermek için kullanılır.
color: yazı rengini belirtir.
genel olarak bu komutlar ile tablolarınızı şekillendirebilirsiniz. bir örnek yapalım ve örnek içerisinde birlikte görelim.
örnek:
tablo.html isminde bir dosya oluşturalım ve şu kodları içerisine yazalım.
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>
<title> tablo biçimlendirme örneği </title>
<style>
#personel
{
border-collapse: collapse;
width: 100%;
background-color: #ecf0f1;
font-weight: bold;
}
#personel td, #personel th
{
padding: 8px;
}
#personel th
background: #3498db;
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
color: #fff;
}
#personel td
{
color:#2c3e50;
}
</style>
</head>
<body>
<table id=”personel”>
<tr>
<th> sıra </th>
<th> ad </th>
<th> soy ad </th>
<th> yaş </th>
</tr>
<tr>
<td> 1 </td>
<td> sadık </td>
<td> özdoğan </td>
<td> 31 </td>
</tr>
<tr>
<td> 2 </td>
<td> dilek </td>
<td> özdoğan </td>
<td> 27 </td>
</tr>
<tr>
<td> 3 </td>
<td> ahmet </td>
<td> çabıtçı </td>
<td> 27 </td>
</tr>
<tr>
<td> 4 </td>
<td> yunus emre </td>
<td> özdoğan </td>
<td> 22 </td>
</tr>
<tr>
<td> 5 </td>
<td> mehmet </td>
<td> özdoğan </td>
<td> 28 </td>
</tr>
<tr>
<td> 6 </td>
<td> emirhan </td>
<td>>> yazıcı </td>
<td> 29 </td>
</tr>
<tr>
<td> 7 </td>
<td> özge </td>
<td> yazıcı </td>
<td> 32 </td>
</tr>
<tr>
<td> 8 </td>
<td> eymen </td>
<td> yazıcı </td>
<td> 30 </td>
</tr>
<tr>
<td> 9 </td>
<td> ali
<td> veli </td>
<td> 29 </td>
</tr>
<tr>
<td> 10 </td>
<td> ayhan </td>
<td> gündüz </td>
<td> 35 </td>
</tr>
</table>
</body>
</html>
Evet arkadaşlar sayfayı kayıt ettiğinizde tablomuzun nasıl şekillendiğini sizlerde farketmiş olacaksınız. css kullanarak tablolarımızı bu şekilde şekillendirebilir birbirinden farklı stil özellikleri kazandırabiliriz.
Css tablo özellikleri ile ilgili soru ve sorunlarınızı yorum yaz kısmından bana ulaştırabilirsiniz. iyi bloglamalar herkese.
Bir önceki yazımız olan css bağlantı stil özellikleri ve kullanımı başlıklı makalemizde css bağlantı stil özellikleri, css bağlantılar ve css link özellikleri hakkında bilgiler verilmektedir.