Web Programlama

Metin Yerleştirme

Lisans: Creative Commons 11.12.2020 tarihinde güncellendi

Bakabileceğiniz Etiketler: Eğitmen: Geleceği Yazanlar Ekibi

#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>

Sınava Gir