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

Postingan populer dari blog ini

CARA MEMBUAT LAYOUT MENGGUNAKAN HTML DAN CSS

MEMBUAT LAYOUT MENGGUNAKAN HTML DAN CSS Pada kesempatan kali ini, kita akan membuat layout pada sebuah halaman website.  Aplikasi yang dibutuhkan adalah Visual Studio Code.Yang bisa kalian download di link berikut:https:https://code.visualstudio.com/ Dan cara install nya sebagai berikut:   untuk memasang Microsoft Visual Studio Code di komputer Windows 10 berikut ini langkah-langkahnya. 1. Kunjungi situs web Visual Studio Code                          2. Klik link download Visual Studio Code. 3. Buka folder downloads. 4. Double klik hasil download. 5. Klil "I accept the agreement" dan klik Next.    6. Klik Next.   7. Ceklis semua dan klik Next.   8. Klik Install.     9. Klik Finish.       Dan untuk selanjutnya kita akan Mempelajari cara membuat layout menggunakan HTML dan CSS     Ini adalah contoh layout yang terdiri dari Header, Menu, Sidebar-left, ...
Posting Komentar
Baca selengkapnya