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

Metin Yerleştirme

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-tasarimi metin-yerlestirme align text-align web-programlama

Tabloya metin yerleştirmek için, text-align ve vertical-align özellikleri kullanılır. text-align özelliği, yatay yerleştirmeyi belirler; değerleri, left (sol), right (sağ) ya da center (merkez, ortala) olabilir.

td {
    text-align: right;
}

Vertical-align özelliğiyse hücre içinde düşey doğrultudaki atamayı gerçekleştirir; değerler, top (üstte), bottom (altta) veya middle (ortada) olabilir.

td {
    height: 50px;
    vertical-align: bottom;
}
<!DOCTYPE html>
<html>
    <head>
        <style>
            table, td, th {
                border: 1px solid black;
            }
        
        td {
            height: 60px;
            vertical-align: bottom;
        }
        td {
            text-align: right;
        }
        </style>
    </head>
    <body>
        
        <table>
            <tr>
                <th>AD</th>
                <th>SOYAD</th>
                <th>MAAS</th>
            </tr>
            <tr>
                <td>ALI</td>
                <td>CAN</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>AYSE</td>
                <td>OKAN</td>
                <td>1800</td>
            </tr>
            <tr>
                <td>MERT</td>
                <td>ALSAN</td>
                <td>3000</td>
            </tr>
            <tr>
                <td>BERNA</td>
                <td>CILEM</td>
                <td>2600</td>
            </tr>
        </table>
        
    </body>
</html>