Cara Membuat Tabel di HTML (tag table)


Belajar Pemrograman Dasar HTML : Cara Membuat Tabel di HTML (tag table)

Untuk menampilkan sebuah data dengan terstruktur atau menampilkan data dari database, kita biasanya akan membuatnya dalam bentuk tabel. HTML juga menyediakan Tag Table digunakan utnuk menampikan data dalam bentuk tabel.

Dalam tutorial kali ini, kita akan belajar bagaimana membuat tabel dengan menggunakan tag table.

cara membuat tabel dengan menggunakan tag <table>, <tr> dan <td>.


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

Tag <table> digunakan untuk memulai tabel
Tag <tr> singkatan dari tabel row, digunakan untuk membuat baris.
Tag <td> singkatan dari tabel data, digunakan untuk menginput data ke table.

Agar lebih jelas, kita akan langsung mencobanya dengan menggunakan contoh kode HTML di bawah ini.

<html>
<head>
<title>Belajar Membuat Tabel</title>
</head>
<body>
<table border="1" width=150>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</body>
</html>

Silahkan ketikan tag HTML di atas di teks editor kesayangan kamu. Setelah selesai kamu ketik jangan lupa simpan dengan extensi (.html). Setelah itu jalankan/buka file html yang kamu simpan tadi, maka hasilnya akan seperti gambar di bawah ini :

Nah, petanyaan selanjutnya bagaimana membuat text tersebut agar berada di tengah. caranya gampang saja kita dapat menggunakan attribut pada tag <tr> atau <td> sesuai kebutuhan kita. Contoh jika kita ingin meletakkan textnya berada di tengah untuk baris pertama maka kita gunakan atribut "align" pada tag <tr>, tapi jika kita ingin meletakkan textnya berdasarkan kolom yang kita inginkan maka letakkan atribut "align" di tag <td>. Contoh seperti tag HTML di bawah ini :

<html>
<head>
<title>Belajar Membuat Tabel</title>
</head>
<body>
<table border="1" width=150>
<tr align="center">
<td>A</td>
<td>B</td>
</tr>
<tr>
<td align="right">C</td>
<td align="center">D</td>
</tr>
</table>
</body>
</html>
Silahkan ketikan tag HTML di atas di teks editor kesayangan kamu. Setelah selesai kamu ketik jangan lupa simpan dengan extensi (.html). Setelah itu jalankan/buka file html yang kamu simpan tadi, maka hasilnya akan seperti gambar di bawah ini :


Nah jelas ya untuk memposisikan sebuah text pada tabel. Selanjutnya bagaimana membuat tabel dengan menggabungkan baris dan kolomnya. Nah untuk ini kita menggunakan atribut rowspan dan colspan di dalam tag <td>.  rowspan adalah untuk menggabungkan baris, dan sedangkan colspan adalah untuk menggabungkan kolom. Contoh tag HTMLnya seperti di bawah ini :

<html>
<head>
<title>Belajar Membuat Tabel</title>
</head>
<body>
<table border="1" width=150>
<tr align="center">
<td colspan="2">A</td>
</tr>
<tr>
<td align="right">C</td>
<td align="center">D</td>
</tr>
</table>
</body>
</html>
Tampilannya setelah kamu simpan dan jalankan akan tampak seperti gambar di bawah ini :
menggabungkan kolom dengan menggunakan atribut colspan
Dari gambar di atas dapat kita simpulkan kolomnya di satunya menjadi satu dimana kolomnya seharusnya ada 2. Nah, bagaiman HTML untuk menggabungkan barisnya, silahkan perhatikan HTML di bawah ini untuk menggabungkan baris :

<html>
<head>
<title>Belajar Membuat Tabel</title>
</head>
<body>
<table border="1" width=150>
<tr align="center">
<td rowspan="2">A</td>
<td align="right">C</td>
</tr>
<tr>
<td align="center">D</td>
</tr>
</table>
</body>
</html>

Silahkan ketik di notepad kesayangan anda dan simpan, lalu jalankan file htmlnya. Maka tampilannya akan tampak seperti gambar di bawah ini :

Menggabungkan baris
Nah. bagaimana ?? mudahkan ?? nahh selanjutnya mungkin sering kita temukan sebuah tabel dimana tabelnya berisi sebuah kolom yang digabungkan dan baris yang digabungkan dalam sebuah tabel. Nah kali ini saya juga akan berbagi cara itu. Caranya gampang, contoh tabelnya seperti gambar di bawah ini  :

Pasti kalian pusingkan bagaimana untuk membuatnya, nah sekarang akan saya berikan koding htmlnya, HTMLnya seperti di bawah ini :

<html>
<head>
<title>Tugas Coy</title>
</head>
<body>
<br>
<table border=1 width="150"  >
<tr>
<td rowspan=3>A</td>
<td>B</td>
<td>C</td>
<td colspan=2>D</td>
</tr>
<td>E</td>
<td rowspan=2>F</td>
<td>G</td>
<td>H</td>
</tr>
<tr>
<td>I</td>
<td>J</td>
<td>K</td>
</tr>
<tr>
<td>L</td>
<td>M</td>
<td>N</td>
<td>O</td>
<td>P</td>
</tr>
<tr>
<td colspan=3>Q</td>
<td>R</td>
<td>S</td>
</tr>
</table>
</body>
</html>

Ilustrasinya seperti gambar di atas ini


Nahhh.. bagaimana mudahkan. Silahkan lakukan analisa terhadap tag HTML di atas kenapa demikian bisa membentuk tabel seperti di atas. Jangan lupa kita hanya menggunakan atribut colspan dan rowspan aja lalu di barengin dengan berapa kolom yang mau digabungkan dan berapa baris yang mau digabungkan maka isilah value dengan jumlah kolom atau baris yang mau digabungkan.

Jika artikel Cara Membuat Tabel di HTML (tag table) bermanfaat bagi kamu, jangan lupa bagikan ke teman - teman kamu ya, agar mereka juga dapat mengetahui artikel ini, karena berbagi itu indah. Semoga artikel ini juga dapat bermanfaat buat kita semua, dan jangan lupa berlatih terus ya :) 

No comments for "Cara Membuat Tabel di HTML (tag table)"