cara membuat table pada html

-

CARA MEMBUAT TABLE PADA HTML



 

assalamualaikum temen temen,perkenalkan nama saya tristan yedidia ramana dari kelas X PPLG 1

kali ini saya akan memberi tahu cara membuat table pada html

pertama tama,ita harus tau dulu apa saja komponen pada table

komponen dalam membuat table

  • sel
  • kolom
  • baris
  • border
berikut ini adalah tag untuk membuat table

  1. Tag <table> untuk membungkus tabelnya
  2. Tag <thead> untuk membungkus bagian kepala tabel
  3. Tag <tbody> untuk membungkus bagian body dari tabel
  4. Tag <tr> (tabel row) untuk membuat baris
  5. Tag <td> (table data) untuk membuat sel
  6. Tag <th> (table head) untuk membuat judul pada header
untuk lebih lanjut kalian bisa mengunjungi w3schools ataupun website lainnya

berikut adalah contohnya


<!DOCTYPE html>
<html>
<head>
    <title>Table HTML</title>
</head>
<body>

    <table border="1">
        <tr>
            <td>Baris 1 Kolom 1</td>
            <td>Baris 1 Kolom 2</td>
            <td>Baris 1 Kolom 3</td>
        </tr>
        <tr>
            <td>Baris 2 Kolom 1</td>
            <td>Baris 2 Kolom 2</td>
            <td>Baris 2 Kolom 3</td>
        </tr>
    </table>

</body>
</html>



nahh,jika table terlalu sempit,kalian bisa beri jarak agar table keliatan lebih enak dipandang

kalian bisa menggunakan cellpadding



berikut adalah contohnya

<table border="1" cellpadding="5">
    <tr>
        <td>Baris 1 Kolom 1</td>
        <td>Baris 1 Kolom 2</td>
        <td>Baris 1 Kolom 3</td>
    </tr>
    <tr>
        <td>Baris 2 Kolom 1</td>
        <td>Baris 2 Kolom 2</td>
        <td>Baris 2 Kolom 3</td>
    </tr>
</table>




jika bosan dengan tulisan yang monoton,kalian juga bisa memberi warna pada table juga lho
kalian bisa menggunakan atribut bgcolor,dalam tag <td> atau <tr>

berikut adalah contohnya


<table border="1" cellpadding="5">
    <tr bgcolor="yellow">
        <td>Baris 1 Kolom 1</td>
        <td>Baris 1 Kolom 2</td>
        <td>Baris 1 Kolom 2</td>
    </tr>
    <tr>
        <td bgcolor="red">Baris 2 Kolom 1</td>
        <td bgcolor="green">Baris 2 Kolom 2</td>
        <td bgcolor="blue">Baris 2 Kolom 3</td>
    </tr>
</table>

ebih

dan jika kalian ingin tabel lebih bervariasi,kalian bisa menggunakan atribut rowspan,colspan 
dalam tag <th>

berikut adalah contohnya





mungkin sekian yang bisa saya share,maaf bila ada kekurangan dalam tutorial yang saya berikan.

terimakasih semuanyaaaa


Komentar

Posting Komentar