CSS / HTML / Uncategorized

HTML ve CSS ile Tablo Yapımı

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=PT+Sans&display=swap" rel="stylesheet">

    <style type="text/css">

        .arabatablo {
            border-collapse: collapse;
            font-family: 'PT Sans', sans-serif;
            width:100%;
        }

        .arabatablo td, .arabatablo th {
            border: 1px solid lavenderblush;
            padding: 8px 12px;

        }

        .arabatablo th {

            text-align: left;
            background-color:tomato;
            color:white;
        }

        .arabatablo tr:hover{
            background-color: lavenderblush;
        }

        .arabatablo tr:nth-child(even){
            background-color:floralwhite;
        }

    </style>
</head>
<body>




    <table class="arabatablo">
        <tr>
            <th>Otomobil Markası</th>
            <th>Menşei</th>
            <th>En Popüler Modeli</th>
            <th>Ticari Kullanım</th>
        </tr>
        <tr>
            <td>Toyota</td>
            <td>Japonya</td>
            <td>Corolla</td>
            <td>+</td>
        </tr>

        <tr>
            <td>BMW</td>
            <td>Almanya</td>
            <td>E30</td>
            <td>-</td>
        </tr>
        <tr>
            <td>Volvo</td>
            <td>İsveç</td>
            <td>S60</td>
            <td>+</td>
        </tr>

        <tr>
            <td>Lada</td>
            <td>Rusya</td>
            <td>Ciguli</td>
            <td>-</td>
        </tr>
    </table>

</body>
</html>

 

3.3 3 votes
Article Rating
Subscribe
Bildir
guest
1 Yorum
Eskiler
En Yeniler Beğenilenler
Inline Feedbacks
View all comments
yunus
3 yıl önce

Güzel paylaşım teşekkürler