Tabel Table

1. Struktur Dasar Tabel

Tabel di HTML dimulai dengan tag <table>. Setiap baris tabel diwakili oleh tag <tr> (table row). Selanjutnya, dalam setiap baris, Anda dapat memiliki sel data (<td>) atau sel header (<th>).

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Data 1.1</td>
        <td>Data 1.2</td>
    </tr>
    <tr>
        <td>Data 2.1</td>
        <td>Data 2.2</td>
    </tr>
</table>

2. Menambahkan Border

Untuk menambahkan border pada tabel, Anda dapat menggunakan CSS:

<style>
    table, th, td {
        border: 1px solid black;
    }
</style>

3. Menggabungkan Sel (Colspan dan Rowspan)

Jika Anda ingin menggabungkan beberapa sel secara horizontal atau vertikal, Anda dapat menggunakan atribut colspan atau rowspan.

<table>
    <tr>
        <th colspan="2">Header Gabungan</th>
    </tr>
    <tr>
        <td>Data 1.1</td>
        <td>Data 1.2</td>
    </tr>
    <tr>
        <td rowspan="2">Data 2.1 dan 3.1</td>
        <td>Data 2.2</td>
    </tr>
    <tr>
        <td>Data 3.2</td>
    </tr>
</table>

4. Menambahkan Padding

Untuk memberikan jarak antara konten sel dan batas selnya, gunakan CSS:

<style>
    th, td {
        padding: 8px;
    }
</style>

5. Mengatur Lebar dan Tinggi Sel

Anda dapat mengatur lebar dan tinggi sel menggunakan CSS:

<style>
    th, td {
        width: 100px;
        height: 50px;
    }
</style>

Itulah dasar-dasar pembuatan tabel di HTML. Anda dapat mengkombinasikan dan memodifikasi kode di atas sesuai kebutuhan Anda. Selamat mencoba!