Cara Membuat Tabel HTML

Belajar Membuat HTML

Hai semua dilatihan ke 7 ini saya akan menjelaskan tentang cara membuat Tabel di HTML.
Mari kita langsung mulai saja ^_^

Latihan 7. Belajar membuat tabel HTML


Dalam menampilkan data yang terstruktur atau tampilan dari database, kita biasanya akan membuatnya dalam bentuk tabel. HTML juga menyediakan Tabel tag yang digunakan untuk menampilkan data dalam bentuk tabel. Dalam tutorial belajar HTML membuat tabel HTML ini kita akan membahas cara penggunaannya.
Untuk membuat tabel di HTML, kita membutuhkan setidaknya 3 tag, yaitu tag <tabel>, tag <tr>,dan tag <td>:
  1. Tag <tabel> digunakan untuk memulai tabel
  2. Tag <tr> adalah singkatan dari table row, digunakan untuk membuat baris dari tabel.
  3. Tag <td> adalah singkatan dari table data, digunakan untuk menginput data ke tabel.
Agar lebih jelas, kita akan langsung menggunakan contoh kode HTML:
Contoh penggunaan tag <tabel>: 

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag Tabel</title>
</head>
<body>
<h1>Belajar Tag Tabel</h1>
<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>
    </tr>
        <td> Baris 3, Kolom 1</td>
        <td> Baris 3, Kolom 2</td>
        <td> Baris 3, Kolom 3</td>
    </tr>
    </tr>
        <td> Baris 4, Kolom 1</td>
        <td> Baris 4, Kolom 2</td>
        <td> Baris 4, Kolom 3</td>
    </tr>
</table>
</body>
</html>



Perhatikan bahwa pada tag <tabel> kita memberikan atribut border. Atribut border digunakan untuk memberikan nilai garis tepi dari tabel. Nilai ini dalam ukuran pixel. border="1", berarti kita mengistruksikan kepada web browser bahwa tabel tersebut akan memiliki garis tepi sebesar 1 pixel. Jika tidak ditambahkan, secara default tabel tidak memiliki garis tepi.

cukup sampai disini pembelajaran HTML kita kali ini mudah-mudahan bermanfaat bagi anda. Terimakasih ^_^ 

Comments

Popular posts from this blog

Tutorial | Cara Mengunci & Menyembunyikan Folder dengan Password (TANPA SOFTWARE) 100% BERHASIL