Skip to main content

Cara Membuat Tabel di HTML

Bagaimana sih cara membuat tabel HTML berwarna? Juga cara menggabungkan kolom dan baris di HTML?

cara membuat tabel HTML dengan mudah
Cara membuat tabel HTML - pixabay

Hari ini, kita akan belajar membuat tabel HTML sederhana dengan notepad dan tag-tag yang digunakan

Tag HTML dasar untuk membuat tabel

<table> ... </table> : Tag pembuka dan penutup untuk membuat tabel HTML
<tr> ... </tr> : Table Row membuat baris baru pada tabel
<td> ... </td> : Table Data membuat kolom pada tabel
<th> ... </th> : Table Head untuk tabel header


Konsep dasar HTML : Tag, Atribut, dan Value (Nilai)


Setelah kita memahami kunci tabel HTML di atas, kita tinggal mememahi penggunaan atribut dan nilai. Langsung saja, berikut beberapa contoh cara membuat tabel HTML lengkap dengan penjelasan setiap tag dan atribut yang digunakan.

Lihat juga

Copy and paste script HTML untuk membuat tabel di bawah ini ke notepad dan simpan dengan nama apapun dengan ekstensi .html dan type all files. Contoh tabelhtml.html

Membuat Tabel HTML Sederhana

Berikut contoh script HTML yang paling sederhana.

<html>
<head>
<title>Contoh Tabel HTML Sederhana</title>
</head>
<body>
<p>Membuat tabel pada HTML
<table border="1">
<tr>
<td>Baris 1, kolom 1</td>
<td>Baris 1, kolom 2</td>
</tr>
<tr>
<td>Baris 2, kolom 1</td><td>Baris 2 kolom 2</td>
</tr>
<tr>
<td>Baris 3, kolom 1</td><td>Baris 3 kolom 2</td>
</tr>
</table>
</body>
</html>

Tabel HTML dengan Atribut Border


Contoh tabel HTML ini untuk memberi border pada tabel.

<html>
<head>
<title>Contoh Tabel HTML dengan Border</title>
</head>
<body>
<h4>Tabel tanpa atribut border</h4>
<table>
<tr>
<td>Baris 1, kolom 1</td><td>Baris 1, kolom 2</td>
</tr>
<tr>
<td>Baris 2, kolom 1</td><td>Baris 2 kolom 2</td>
</tr>
</table>
<h4>Tabel dengan nilai border 2</h4>
<table border="2">
<tr><td>Baris 1, kolom 1</td><td>Baris 1, kolom 2</td></tr>
<tr><td>Baris 2, kolom 1</td><td>Baris 2 kolom 2</td></tr>
</table>
<h4>Tabel dengan nilai border 5</h4>
<table border="5">
<tr><td>Baris 1, kolom 1</td><td>Baris 1, kolom 2</td></tr>
<tr><td>Baris 2, kolom 1</td><td>Baris 2 kolom 2</td></tr>
</table>
</body>
</html>

Cara menggabungkan kolom tabel HTML


Gunakan Colspan untuk menggabungkan kolom dan 2 adalah jumlah kolom yang akan digabungkan

<html>
<head>
<title>Menggabungkan Kolom Tabel</title>
</head>
<body>
<table border="1">
<tr><td>Belajar</td>
<td colspan="2" bgcolor="#fff000">HTML</td></tr>
<tr>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td></tr>
</table>
</body>
</html>

Cara menggabungkan baris tabel HTML


Gunakan rowspan dan total baris yang akan digabungkan

<html>
<head>
<title>Menggabungkan Baris</title>
</head>
<body>
<p>ROWSPAN</p>
<table border="1">
<tr><td rowspan="2" bgcolor="#ffff00">No</td>
<td> Alamat </td></tr>
<td>Baebunta, Luwu Utara</td>
</tr>
</table>
</body>
</html>

Tabel HTML Menggabungkan Rowspan dan Colspan


Contoh ini merupakan penggabungan antara rowspan dan colspan. Terlihat rumit tapi sebenarnya tidak yang penting kita sudah paham tag dan atribut HTML yang digunakan untuk membuat tabel sederhana.

<html>
<head>
<title>Script HTML menggunakan Rowspan dan Colspan</title>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" witdh="100%">
<caption><b>Nilai Ujian Nasional SMPN 2 Baebunta</b></caption>
<tr bgcolor="#00FFFF"><th width="40%" rowspan="2" valign="middle">Nama</th>
<th width="60%" colspan="2">Nilai</th></tr>
<tr><th width="30%" bgcolor="#00FF00">Tugas</th>
<th width="30%" bgcolor="#00FF00">Praktikum </th></tr>
<tr>
<td>Petrus</td>
<td align="center">91</td>
<td align="center">87</td></tr>
<tr><td>Yohanes</td>
<td align="center">93</td>
<td align="center">73</td></tr>
<tr><td>Yakobus</td>
<td align="center">99</td>
<td align="center">97</td><tr>
</table>
</body>
</html>

Dengan konsep dasar membuat tabel HTML di atas, kita sudah bisa membuat berbagai jenis dan bentuk tabel HTML di website dan blog.

Yang perlu diperhatikan saat membuat tabel HTML hanya pada bagian atributnya. Misalnya menambahkan gambar pada tabel, mewarnai tabel dengan bgcolor, border untuk tebal sisi tabel, dan lain-lain.
Demikianlah artikel tentang cara membuat tabel sederhana dan lengkap di HTML. Semoga bermanfaat dan langsung dipraktekkan aja. Menguasai HTML adalah dasar untuk membuat website dan juga untuk menjadi desainer web.
  October 26, 2018
Comment Policy: Tulis Komentar Anda Sesuai dengan Isi Artikel!
Buka Komentar
Tutup Komentar
close