Gönderen Konu: Html Tablo Yapıları  (Okunma sayısı 666 defa)

danua

  • Yönetici
  • Kıdemli Üye
  • *****
  • İleti: 301
  • Karma 65535
Html Tablo Yapıları
« : 04 Aralık 2018, 00:16:31 »
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.
Kod: [Seç]
<!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 Şekillendirme
border-collapse: Tek çizgi şeklinde kenarlık belirler
Kod: [Seç]
<!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.
Kod: [Seç]
<!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.

Kod: [Seç]
<!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
Kod: [Seç]
<!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>



Kod: [Seç]
<!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ı
« Son Düzenleme: 07 Aralık 2018, 00:10:57 Gönderen: danua »
لاَ حَوْلَ وَلاَ قُوَّةَ اِلاَّ بِاللهِ الْعَلِىِّ الْعَظِيمِ
𐱅𐰇𐰼𐰚

Sitelerim
:::::::::::::::::::
www.telkaricim.com
www.takip.in
www.jewelka.com

Tags: