<link href="https://fonts.googleapis.com/css?family=Bree+Serif&display=swap" rel="stylesheet">
<style type="text/css">
    table{
        border: 5px outset blue;
        background: linear-gradient(to bottom, #33ccff 0%, #ff3399 100%);
        width: 400px;
    }
    th{
        font-family: 'Bree Serif', serif;
        font-size: 30px;
    }
    td{
        font-family: 'Bree Serif', serif;
        font-size: 20px;
    }
    td.batas{
        height: 5px;
        border-radius: 50px;
        background-color: blue;
    }
</style>

<?php
    $nama = $_POST['nama'];
    $nilaiTugas = $_POST['nilaiTugas'];
    $nilaiUharian = $_POST['nilaiUharian'];
    $nilaiUts = $_POST['nilaiUts'];
    $nilaiUas = $_POST['nilaiUas'];
    $nilaiAkhir = ($nilaiTugas * 20 / 100) + ($nilaiUharian * 10 / 100) + ($nilaiUts * 30 / 100) + ($nilaiUts * 40/100);
?>

<table>
    <tr>
        <th colspan="3">Nilai Rapot dan Index</th>
    </tr>
    <tr>
        <td class="batas" colspan="3"></td>
    </tr>
    <tr>
        <td>Nama</td>
        <td>:</td>
        <td>
            <?php
                echo $nama;
            ?>
        </td>
    </tr>
    <tr>
        <td>Nilai Tugas</td>
        <td>:</td>
        <td>
            <?php
                echo $nilaiTugas;
            ?>
        </td>
    </tr>
    <tr>
        <td>Nilai Ulangan Harian</td>
        <td>:</td>
        <td>
            <?php
                echo $nilaiUharian;
            ?>
        </td>
    </tr>
    <tr>
        <td>Nilai UTS</td>
        <td>:</td>
        <td>
            <?php
                echo $nilaiUts;
            ?>
        </td>
    </tr>
    <tr>
        <td>Nilai UAS</td>
        <td>:</td>
        <td>
            <?php
                echo $nilaiUas;
            ?>
        </td>
    </tr>
    <tr>
        <td>Nilai Akhir</td>
        <td>:</td>
        <td>
            <?php
                echo $nilaiAkhir;
            ?>
        </td>
    </tr>
    <tr>
        <td>Index</td>
        <td>:</td>
        <td>
            <?php
                if ($nilaiAkhir >= 80 && $nilaiAkhir <= 100) {
                    echo "<font color = 'green'>A</font>";
                }
                elseif ($nilaiAkhir >= 70 && $nilaiAkhir <= 79) {
                    echo "<font color = 'blue'>B</font>";
                }
                elseif ($nilaiAkhir >= 60 && $nilaiAkhir <= 69) {
                    echo "<font color = 'yellow'>C</font>";
                }
                elseif ($nilaiAkhir >= 50 && $nilaiAkhir <= 59) {
                    echo "<font color = 'orange'>D</font>";
                }
                else {
                    echo "<font color = 'red'>E</font>";
                }
            ?>
        </td>
    </tr>
</table>