Cara Membuat Tabel Pada HTML Lengkap dan Mudah | Favorite Computer

Menyajikan Pembuatan Tabel Pada HTML. Pada artikel kali ini akan dibahas tentang bagaimana cara membuat tabel pada html. Tabel adalah sekumpulan data yang disusun berdasarkan baris dan kolom. Dalam sebuah website, tabel digunakan untuk menampilkan sebuah basis data atau data base.

Dulu sebelum CSS berkembang, tabel digunakan buat mendesain tampilan web. Seiring makin populernya CSS, maka dalam mendesain tampilan web nir lagi menggunakan tabel lantaran dipercaya terlalu lambat.

Nah, bagaimana cara membuat tabel pada HTML, berikut penjelasannya.

Dalam HTML, untuk membuat sebuah tabel digunakan 3 tag yaitu <table>, <tr> dan <td>

a. Tag <table> digunakan untuk memulai membuat table, dan tag ini ditutup dengan </table>

b. Tag <tr> yang merupakan kepanjangan dari table row, fungsi dari tag ini untuk membuat baris dalam tabel. Tag ini ditutup dengan </tr>

C. Tag <td> merupakan kepanjangan dari table row, berfungsi untuk menampilkan data dalam tabel yang membentuk kolom-kolom, tag ini ditutup dengan <td>.

Berikut adalah contoh membuat tabel 2 baris 2 kolom dengan menggunakan tag <table>,<tr> dan <td>.

Silahkan Anda simak & praktekan di personal komputer .

<html>

<head>

<title>contoh tabel 1</title>

</head>

<body>

<h1>Contoh Tabel</h1>

<table border="1">

<tr><td>Ini baris 1, kolom 1</td>

<td>Ini baris 1, kolom 2</td>

</tr>

<tr><td>Ini baris 2, kolom 1</td>

<td>Ini baris 2, kolom 2</td>

</tr>

</table>

</body>

</table>

Simpan kode html diatas, kemudian buka di browser maka tampilannya nampak seperti berikut.

Coba Anda perhatikan, pada tag <table> disisipkan atribut border. Atribut border digunakan untuk memberikan ketebalan pada garis tepi tabel. Dalam kode HTML diatas tertulis <table border="1">, berarti garis tepi tabel bernila 1pixel. Secara default jika tanpa disisipkan atribut border pada tag <table> maka border tersebut bernilai 0.

Agar lebih paham mengenai cara membuat tabel pada HTML, silahkan Anda coba latihan kembali dengan menulis tag HTML membuat tabel 4 baris 3 kolom.

<html>

<head>

<title>Contoh Tabel 2</title>

</head>

<body>

<h1>Contoh Tabel 4 Baris 3 Kolom</h1>

<table border="1">

<tr><td>Ini Baris 1, Kolom 1</td>

<td>Ini Baris 1, Kolom 2</td>

<td>Ini Baris 1, Kolom 3</td>

</tr>

<tr><td>Ini Baris 2, Kolom 1</td>

<td>Ini Baris 2, Kolom 2</td>

<td>Ini Baris 2, Kolom 3</td>

</tr>

<tr><td>Ini Baris 3, Kolom 1</td>

<td>Ini Baris 3, Kolom 2</td>

<td>Ini Baris 3, Kolom 3</td>

</tr>

<tr><td>Ini Baris 4, Kolom 1</td>

<td>Ini Baris 4, Kolom 2</td>

<td>Ini Baris 4, Kolom 3</td>

</tr>

</table>

</body>

</html>

Simpan kode HTML diatas, kemudian Anda buka pada browser maka akan tampil seperti berikut.

Bagaimana, apakah sudah paham menggunakan penjelasan diatas atau tambah galau :d. Baiklah supaya lebih paham mengenai cara membuat tabel di HTML, berikut Saya akan buat tabel yg berisi data tentang biodata diri. Silakan Anda coba & praktekan kode HTML berikut :

<html>

<head>

<title>Contoh Tabel 3</title>

</head>

<body>

<center><h1>Bodata Diri</h1></center>

<center><table border="0">

<tr><td>Nama</td>

<td>:</td>

<td>Jeki</td>

</tr>

<tr><td>Jenis Kelamin</td>

<td>:</td>

<td>Laki-laki</td>

</tr>

<tr><td>Umur</td>

<td>:</td>

<td>23 tahun</td>

</tr>

<tr><td>E-Mail</td>

<td>:</td>

<td>Jeki-xxx@gmail.com</td>

</tr>

</table>

</center>

</body>

</html>

Simpan kode HTML diatas, kemudian Anda buka pada browser maka akan tampil seperti berikut.

Jika Anda perhatikan tampilan tabel di browser maka garis tepi tabel tidak muncul, hal ini dikarenakan nilai dari atribut border bernilai "0" dan tabel tersebut tampil di posisi tengah halaman. Fungsi dari tabel pada HTML selain untuk mengisi data, juga berfungsi untuk merapihkan data-data agar tampilan terlihat rapih tidak acak-acakan.

Demikianlah artikel singkat tentang Cara Membuat Tabel Pada HTML. Pada artikel selanjutnya Saya akan membahas tentang Cara Menggbungkan Sel Tabel Pada HTML.

Jika artikel ini bermanfaat silahkan Anda share melalui tombol share. Terima kasih :)