Langsung ke konten utama

Cara Membuat Tabel HTML

Assalamualaikum......
Hai...... Kali ini saya akan membahas tentang cara membuat tabel di html. 
Dalam menampilkan data yang terstruktur atau tampilan dari database, kita biasanya akan membuatnya dalam bentuk tabel. HTML juga menyediakan Tabel tag digunakan untuk menampilkan data dalam bentuk tabel.


Cara Membuat Tabel HTML dengan tag <table>, <tr> dan <td>

Untuk membuat tabel di HTML, kita membutuhkan setidaknya 3 tag, yaitu tag <table>, tag <tr>, dan tag <td>:

  • Tag <table> digunakan untuk memulai tabel
  • Tag <tr> adalah singkatan dari table row, digunakan untuk membuat baris dari tabel.
  • 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 <table>:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!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>

Cara Membuat tabel di HTML (tag table)
Perhatikan bahwa pada tag <table> 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.

Daftar Pustaka : https://www.duniailkom.com/belajar-html-cara-membuat-tabel-di-html-tag-table/

Komentar