5 Dersin Adını, Başarılı ve Başarısız Öğrenci Sayısını Listeleyen Tabloyu Html5 ve Css Özellikleriyle Tasarlayınız

Tablolar web sayfalarının en önemli özelliklerindendir. Tabloları tasarlamak için css özelliklerini kullanabilirsiniz. Html5 etiketlerinin yeni gelen özellikleriyle tablo tasarımını rahatlıkla yapabilirsiniz. Bu uygulamamızda bir okulda okutulan 5 dersin adını, başarılı öğrenci sayısını, başarısız öğrenci sayısını listeleyiniz. Sayısal bilgiler sağa dayalı olarak yazılacaktır.  Css kodlarının nasıl kullanıldığına dikkat ediniz.

Visual Studio 2022 programını açalım.

Create a new project diyerek teni bir proje oluşturalım.

Proje dilini c#, platformunu Windows, ortamı Web olarak belirleyelim. Aşağıda listelenen şablonlardan 

İsmi index.html olan yeni bir web sayfası ekleyelim.

Aşağıdaki kodları head etiketi arasına yazalım.

    <style type="text/css">

        table

        {

            width: 60%;

        }

        table, th, td

        {

            border: 1px solid black;

            border-collapse: collapse;

        }

        th, td

        {

            padding: 5px;

            text-align: left;

        }

        .th01 tr:nth-child(even)

        {

            background-color: #fff;

        }

        .th01 tr:nth-child(odd)

        {

            background-color: #eee;

        }

        .th01 th

        {

            background-color: black;

            color: white;

        }

        .sag

        {

            text-align: right;

        }

    </style>

Aşağıdaki kodları body etiketi arasına yazalım.

    <table class="th01">

        <caption>

            Başarı Tablosu</caption>

        <thead>

            <tr>

                <th>

                    Ders Adı

                </th>

                <th>

                    Başarılı Öğrenci Sayısı

                </th>

                <th>

                    Başarısız Öğrenci Sayısı

                </th>

            </tr>

        </thead>

        <tr>

            <td>

                Matematik

            </td>

            <td class="sag">

                250

            </td>

            <td class="sag">

                9000

            </td>

        </tr>

        <tr>

            <td>

                Beden

            </td>

            <td class="sag">

                1000

            </td>

            <td class="sag">

                60

            </td>

        </tr>

        <tr>

            <td>

                Biyoloji

            </td>

            <td class="sag">

                89

            </td>

            <td class="sag">

                3500

            </td>

        </tr>

        <tr>

            <td>

                Felsefe

            </td>

            <td class="sag">

                200

            </td>

            <td class="sag">

                1000

            </td>

        </tr>

        <tr>

            <td>

                İngilizce

            </td>

            <td class="sag">

                35

            </td>

            <td class="sag">

                550

            </td>

        </tr>

    </table>