CEK DI SINI!! Cara Membuat Tabel Dengan HTML

PENDAHULUAN

Haiii semuaaa balik lagi sama aku Raisa kali ini aku akan menjelaskan tentang cara membuat tabel dengan HTML.

Super simple dan semoga ini membantu.

BTW! Sebelum kita masuk ke cara coding aku di sini bakal bantu jelasin tentang tabel apa aja yang harus kamu ketahui tentang colspan dan rowspan.

Colspan 

Atau column span merupakan atribut HTML yang berfungsi untuk menggabungkan beberapa kolom seperti menggabungkan kolom ke samping.

Rowspan

Merupakan atribut HTML yang berfungsi untuk menggabungkan beberapa baris seperti menggabungkan baris ke bawah.

Contoh coding dan jenis pemakaian tabel dengan colspan dan rowspan

Contoh 1

Gambar diatas merupakan salah satu contoh penggunaan tabel colspan dan rowspan menggunakan coding seperti dibawah ini.

<!DOCTYPE html>

<html>

    <head>

        <title>penggunaan colspan dan rowspan di HTML</title>

        <style type="text/css">

            table,th,td{

                border: 1px solid rgb(0, 0, 0);}

                border-collapse:collapse;}

                table{width:30%;}

                th,td{text-align: center;}

                </style>

                </head>

                <body>

                    <table>

                        <tr>

                            <th rowspan="2">no</th>

                            <th rowspan="2">nis</th>

                            <th rowspan="2">nama</th>

                            <th colspan="3">absen</th>

                        </tr>

                        <tr>

                            <td>hadir</td>

                            <td>sakit</td>

                            <td>izin</td>

                        </tr>

                        <tr>

                            <td>1</td>

                            <td>202120969</td>

                            <td>Raisa Arifa Zahra</td>

                            <td>29</td>

                            <td>0</td>

                            <th>0</th>

                        </tr>

                        <tr>

                            <td>2</td>

                            <td>202120949</td>

                            <td>Dhaifina Trimulyani</td>

                            <td>11</td>

                            <td>0</td>

                            <td>1</td>

                        </tr>

                    </table>

                </body>

        </style>

    </head>

</html>

Contoh 2

<!DOCTYPE html>

<html>

    <head>

        <title>membuat tabel colspan dan rowspan dengan HTML</title>

        <style type="text/css">

            tabel,th,td{

                border: 1px solid black;}

                border-collapse:collapse;}

                table {widht:50%}

                th,td{text-align: center;}

        </style>

    </head>

    <body>

        <table>

            <tr>

                <th rowspan="2">rowspan</th>

                <th rowspan="2">rowspan</th>

                <th rowspan="2">rowspan</th>

                <th rowspan="2">rowspan</th>

                <th colspan="3">colspan</th>

                <th colspan="3">colspan</th>

            </tr>

            <tr>

                <td>rowspan</td>

                <td>rowspan</td>

                <td>rowspan</td>

                <td>rowspan</td>

            </tr>

        </table>

    </body>

</html>

Sekian dari aku semoga membantu dan memudahkan kalian

Bye bye see you on my next blog