Html Tablo YapılarıHtml Tablo yapıları <
table > etiketi'i ile tanımlanmıştır. Html Satır aralıkları <
tr>ile tanımlanır.Tablo Başlıkları <
th>etiketi ile tanımlanır.
Tablo başlıkları varsayılan olarak ortalanmış ve kalın yazı ile tanımlanmıştır.Tablo yapısında hücreler <
td> etiketi ile oluşturulur.
Html Tablolarına Kenarlık Eklleme (Border)
Oluşturacağımız Tablolara bir kenarlık(border) belirtmezsek tablomuz sınırsız olacaktır.
Tablo kenarlıklarını Css ile oluşturacağız.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Kenarlıklı Tablo</h2>
<p>Kenarlıkları Css kullanarak Şekillendirdik.</p>
<table style="width:100%">
<tr>
<th>AD</th>
<th>SOYAD</th>
<th>YAŞ</th>
</tr>
<tr>
<td>Ahmet</td>
<td>ULU</td>
<td>50</td>
</tr>
<tr>
<td>Ayşe</td>
<td>CAN</td>
<td>94</td>
</tr>
<tr>
<td>Hasan</td>
<td>ORDU</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Tablo Kenar Şekillendirmeborder-collapse: Tek çizgi şeklinde kenarlık belirler
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Tek çizgi Kenarlık</h2>
<p>Bu kenalık belirlemede de Css yapısından faydalanacağız</p>
<table style="width:100%">
<tr>
<th>AD</th>
<th>SOYAD</th>
<th>YAŞ</th>
</tr>
<tr>
<td>Ali</td>
<td>CAN</td>
<td>20</td>
</tr>
<tr>
<td>Samet</td>
<td>CAN</td>
<td>35</td>
</tr>
<tr>
<td>Hikmet</td>
<td>CAN</td>
<td>40</td>
</tr>
</table>
</body>
</html>
Hücre İle Metin Arasındaki Boşluğu Ayarlama :
Tablo da Hücre içerisine yazılan metin ile hücre kenarlıkları arasında olması gereken boşluk miktarını
padding ile ayarlayacağız.
Tablo Başlıklarını Sola Hizalama :
Tablo Başlıklarını sola hizalamak için
text-align: left özelliğini kullanacağız.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
th {
text-align: left;
}
</style>
</head>
<body>
<h2>Tablo Başlıklarını Sola Hizalama</h2>
<p>Bu kenalık belirlemede de Css yapısından faydalanacağız</p>
<table style="width:100%">
<tr>
<th>AD</th>
<th>SOYAD</th>
<th>YAŞ</th>
</tr>
<tr>
<td>Ali</td>
<td>CAN</td>
<td>20</td>
</tr>
<tr>
<td>Samet</td>
<td>CAN</td>
<td>35</td>
</tr>
<tr>
<td>Hikmet</td>
<td>CAN</td>
<td>40</td>
</tr>
</table>
</body>
</html>
Tablo Hücreleri Arasında Boşluk Oluşturma :
Eğer oluşturacağımız bir tabloda hücre aralarını ayırmak boşluk tanımlamak istersek
border-spacing özelliğini kullanarak aralık belirleyebiliriz.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
padding: 5px;
}
table {
border-spacing: 15px;
}
</style>
</head>
<body>
<h2>Hücreler arasında boşluk oluşturma</h2>
<p>Bu kenalık belirlemede de Css yapısından faydalanacağız</p>
<table style="width:100%">
<tr>
<th>AD</th>
<th>SOYAD</th>
<th>YAŞ</th>
</tr>
<tr>
<td>Ali</td>
<td>CAN</td>
<td>20</td>
</tr>
<tr>
<td>Samet</td>
<td>CAN</td>
<td>35</td>
</tr>
<tr>
<td>Hikmet</td>
<td>CAN</td>
<td>40</td>
</tr>
</table>
</body>
</html>
Stil Tablo<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 15px;
text-align: left;
}
table#t01 {
width: 100%;
background-color: #ff0000;
color:#ffffff
}
</style>
</head>
<body>
<h2>Stil Tabloları</h2>
<table style="width:100%">
<tr>
<th>AD</th>
<th>SOYAD</th>
<th>YAŞ</th>
</tr>
<tr>
<td>Ahmet</td>
<td>ŞAHİN</td>
<td>30</td>
</tr>
<tr>
<td>Ayşe</td>
<td>ŞAHİN</td>
<td>24</td>
</tr>
<tr>
<td>Mehmet</td>
<td>ŞAHİN</td>
<td>30</td>
</tr>
</table>
<br>
<table id="t01">
<tr>
<th>AD</th>
<th>SOYAD</th>
<th>YAŞ</th>
</tr>
<tr>
<td>Ahmet</td>
<td>ŞAHİN</td>
<td>30</td>
</tr>
<tr>
<td>Ayşe</td>
<td>ŞAHİN</td>
<td>24</td>
</tr>
<tr>
<td>Mehmet</td>
<td>ŞAHİN</td>
<td>30</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
}
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 15px;
text-align: left;
}
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color: #ff0000;
color: #fff
}
table#t01 th {
background-color: black;
color: white;
}
</style>
</head>
<body>
<h2>Stil Tabloları</h2>
<table style="width:100%">
<tr>
<th>AD</th>
<th>SOYAD</th>
<th>YAŞ</th>
</tr>
<tr>
<td>Ahmet</td>
<td>ŞAHİN</td>
<td>30</td>
</tr>
<tr>
<td>Ayşe</td>
<td>ŞAHİN</td>
<td>24</td>
</tr>
<tr>
<td>Mehmet</td>
<td>ŞAHİN</td>
<td>30</td>
</tr>
</table>
<br>
<table id="t01">
<tr>
<th>AD</th>
<th>SOYAD</th>
<th>YAŞ</th>
</tr>
<tr>
<td>Ahmet</td>
<td>ŞAHİN</td>
<td>30</td>
</tr>
<tr>
<td>Ayşe</td>
<td>ŞAHİN</td>
<td>24</td>
</tr>
<tr>
<td>Mehmet</td>
<td>ŞAHİN</td>
<td>30</td>
</tr>
</table>
</body>
</html>
Linkback:
Html Tablo Yapıları
