Cara Membuat Tabel di HTML
"Tutorial belajar HTML, cara membuat tabel dengan rowspan dan colspan dan berwarna"
8 min read
Bagaimana sih cara membuat tabel HTML berwarna? Dan bagaimana cara menggabungkan kolom dan baris di HTML?
 |
| Cara Membuat Tabel di HTML |
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.