Langsung ke konten utama

CARA MEMBUAT TABLE DI HTML

                CARA MEMBUAT TABLE DI HTML

 

Hallo Assalamualaikum nama saya Farizi Adam Dari PPLG 1 

Kali ini saya akan memberikan Tutorial cara membuat table di HTML

Jadi langsung aja 

Untuk membuat tabel di dalam HTML, kita membutuhkan tag-tag berikut:

  1. Tag <table>
  2. Tag <thead>
  3. Tag <tbody>
  4. Tag <tfoot>

Tag <table> sebagai kontainer.

Sedangkan tag <thead> sebagai tempat kita meletakkan nama kolom (baris paling atas sendiri).

Dan tag <tbody> adalah tempat kita menampilkan data.

Dan yang terakhir adalah tag <tfoot> untuk membuat “footer” atau bagian bawah dari suatu tabel.

4 tag di atas adalah tag yang mendefinisikan struktur dasar untuk setiap bagian dari tabel.

Sedangkan untuk mendefinikan baris dan kolom, kita membutuhkan tag-tag berikut:

  • Tag <tr> (table row) untuk mendefinisikan tiap baris pada tabel.
  • Tag <td> (table data) untuk mendefinisikan tiap sel pada tabel.
  • Tag <th> (table head) untuk mendefinisikan tiap nama kolom pada tabel.

 CONTOH ELEMEN👇

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mengenal Tabel HTML</title>
</head>
<body>
    <table border="1">
        <tr>
            <td>Baris ke 1 - Kolom ke 1</td>
            <td>Baris ke 1 - Kolom ke 2</td>
        </tr>
        <tr>
            <td>Baris ke 2 - Kolom ke 1</td>
            <td>Baris ke 2 - Kolom ke 2</td>
        </tr>
    </table>
</body>
</html>

 

Menggabungkan Sel pada Tabel HTML

Saat membuat tabel, terkadang kita dihadapkan akan kebutuhan untuk menggabungkan beberapa sel menjadi satu. Untuk menggabungkan beberapa sel menjadi satu pada suatu tabel, HTML menyediakan beberapa atribut yang bisa kamu gunakan seperti berikut :

  1. Atribut rowspan digunakan untuk menggabungkan baris pada tabel
  2. Atribut colspan digunakan untuk menggabungkan kolom pada tabel

Atribut tersebut bisa diterapkan pada tag td maupun th. Perhatikan contoh kode program berikut :

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mengenal Tabel HTML</title>
</head>
<body>
    <table border="1">
        <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>81</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>
</body>
</html>

Memberikan Warna Sel pada HTML

 HASILNYA 👇


Mengenal Tabel HTML
Nama Nilai
Kimia Fisika Biologi
Robby 76 80 81
Rendi 84 70 75
Alfian 96 70 71

Komentar

Posting Komentar