Tugas HTML Table Pertemuan 3 PWEB

pada tanggal

 

Tugas Pertemuan 3 PWEB

Bermain dengan table menggunakan HTML


Nama: Nur Muhammad Faiz
Kelas: Pemrograman Web (M)
NRP: 5053231008

Di pertemuan ke-3 ini saya mendapatkan tugas untuk membuat tabel menggunakan HTML. Ada 2 macam tabel yang harus dikerjakan, yaitu tabel nilai mahasiswa, dan tabel produk unggulan

Berikut kode untuk tabel nilai siswa: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tugas 02 | Pemrograman Web</title>
</head>
<style>
    table th {
        background-color: rgb(96, 96, 255);
        color: white;
    }

    table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
    }

    table {
        width: 30%;
    }

    main {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>
<body>
    <main>
        <table cellpadding="10">
            <tr>
                <th rowspan="2">Nama</th>
                <th colspan="3">Nilai</th>
            </tr>
            <tr>
                <th>Kimia</th>
                <th>Fisika</th>
                <th>Biologi</th>
            </tr>
            <tr>
                <td>Robby</td>
                <td>76</td>
                <td>80</td>
                <td>71</td>
            </tr>
            <tr>
                <td>Rendi</td>
                <td>84</td>
                <td>70</td>
                <td>75</td>
            </tr>
            <tr>
                <td>Alfian</td>
                <td>96</td>
                <td>70</td>
                <td>71</td>
            </tr>
        </table>
    </main>
</body>
</html>






Berikut kode untuk tabel produk unggulan:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Table 1</title>
</head>
<style>
    main {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    main table tr th {
        background-color: yellow;
    }

    table, tr, th, td {
        border: 1px solid black;
    }
</style>
<body>
    <main>
        <table>
            <tr>
                <th colspan="3">Produk Unggulan</th>
            </tr>
            <tr>
                <td rowspan="3">
                    <img
                        src="/images/prog-languages.png"
                        width="220"
                        height="200"
                        alt="benih kode"
                    >
                </td>
                <td>Nama</td>
                <td>Benih Kode</td>
            </tr>
            <tr>
                <td>Harga</td>
                <td>Rp 192.000</td>
            </tr>
            <tr>
                <td>Fitur</td>
                <td>
                    <ul>
                        <li>Dilengkapi Dokumentasi</li>
                        <li>Ukuran: 31MB</li>
                        <li>Masa Tanam: 6 Bulan</li>
                        <li>Lisensi: MIT</li>
                    </ul>
                </td>
            </tr>
        </table>
    </main>
</body>
</html>















Komentar

Posting Komentar