Turkcell | Geleceği Yazanlar

201: HTML5 & CSS Başlangıç seviyesi derslerde Web Programlama uygulama geliştirme ortamını detaylı olarak inceliyoruz.

Tüm Eğitimleri Aldın mı? Kendini sınamanın tam zamanı

Haydi Sınava Gir

Tablo Doldurma

Kategori : Mobil | Lisans : Creative Commons (by-nc-sa) | En son 12.09.2019 tarihinde güncellendi
Eğitmen : Geleceği Yazanlar Ekibi
Etiketler : css-tablo tablo-sinirlari css-border doctype tablo-olusturma tablo-tasarimiitablo-doldurma padding web-programlama

Bir tablonun sınırı ile içerik arasındaki boşluğu ayarlamak için td ve th elemanları üzerinde padding özelliği kullanılır. Şimdi örneğimizle içerideki boşluğu 17 piksel (px) yapalım. Bunun için aşağıda gördüğünüz gibi, istediğimiz boşluk miktarını td parametresinin içinde padding özelliğine piksel cinsinden söyleyebiliriz:

td {
    padding: 17px;
}

Şimdi HTML dosyasında nasıl kullandığımıza bakalım:

<!DOCTYPE html>
<html>
    <head>
        <style>
            table, td, th {
                border: 2px solid black;
            }

        td {
            padding: 17px;
        }
        </style>
    </head>
    <body>

        <table>
            <tr>
                <th>AD</th>
                <th>SOYAD</th>
                <th>MAAS</th>
            </tr>
            <tr>
                <td>ALI</td>
                <td>OKAN</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>VELI</td>
                <td>CAN</td>
                <td>3000</td>
            </tr>
            <tr>
                <td>AYSE</td>
                <td>BIRDAL</td>
                <td>2400</td>
            </tr>
            <tr>
                <td>BERNA</td>
                <td>SEN</td>
                <td>1500</td>
            </tr>
        </table>

    </body>
</html>