Sunday, August 13, 2017

Cara mudah membuat tabel dengan kode HTML

Pada kesempatan ini kita akan mencoba cara membuat tabel dengan kode HTML.
Yang mana tabel dengan kode HTML adalah pengkodean yang paling mudah.
Beberapa tag dan attributes yang digunakan antara lain,
<table>, <tbody>, <tr>, <th>, <td>, rowspan dan colspan

<table>: Tag pembuka untuk perintah pembuatan tabel
<tbody>: Table body
<th>: table header
<tr>: table row (deretan kotak horisontal)
<td>: table data (deretan kotak vertikal)
rowspan: jumlah row
colspan: jumlah kolom

"Mari kita memulai membuat tabel dengan kode HTML"
Baca juga: Membuat link POP-UP WINDOW dengan mudah CONTOH TABEL HTML SEDERHANA

header 1 header 2 header 3
data 1 data 2 data 3

<table border="1px" cellpadding="5px" cellspacing="0px">
<tbody>
<tr>
<th>header 1</th>
<th>header 2</th>
<th>header 3</th>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
</tr>
</tbody>
</table>
Keterangan:
Bila menambahkan <td> lebih banyak lagi maka kotak kolom akan semakin banyak pula (tabel akan semakin melebar kesamping karena banyaknya kolom)
Dan bila menambahkan <tr> lebih banyak lagi, maka row akan semakin banyak juga (tabel akan memanjang kebawah karena banyaknya row)



CONTOH TABEL HTML DENGAN "COLSPAN"

header 1 header 2 header 3
data 1 data 2 data 3 data 4

<table border="1px" cellpadding="5px" cellspacing="0px">
<tbody>
<tr>
<th colspan="2">header 1</th>
<th>header 2</th>
<th>header 3</th>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
</tr>
</tbody>
</table>
Keterangan:
Tabel diatas menggunakan <th colspan="2"> pada header 1
berarti pada kolom header 1 dipisah lagi menjadi 2 kolom, yaitu pada data 1 dan data 2.
Bila menginginkan isi dari kolom yang lebih banyak lagi maka buatlah <tr> lagi dibawahnya sama seperti yang diatasnya dan ubahlah nilai dari colspan, misal colspan="10"



CONTOH TABEL HTML DENGAN "ROWSPAN"

header 1 header 2 header 3
data 1 data 2
data 3 data 4

<table border="1px" cellpadding="5px" cellspacing="0px">
<tbody>
<tr>
<th rowspan="3">header 1</th>
<th>header 2</th>
<th>header 3</th>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
</tr>
<tr>
<td>data 3</td>
<td>data 4</td>
</tr>
</tbody>
</table>
Keterangan:
Tabel diatas menggunakan <th rowspan="3"> pada header 1
berarti pada kolom header 1 mempunyai 3 row, yaitu pada header 1 dan header 2, data 1 dan data 2 lalu data 3 dan data 4.
Bila menginginkan row yang lebih banyak lagi maka buatlah <tr> lagi dibawahnya sama seperti yang diatasnya dan ubahlah nilai rowspan-nya.



CONTOH TABEL HTML DENGAN "COLSPAN" DAN "ROWSPAN"

header 1 header 2 header 3
data 1 data 2 data 3 data 4
data 5 data 6 data 7 data 8

<table border="1px" cellpadding="5px" cellspacing="0px">
<tbody>
<tr>
<th colspan="2">header 1</th>
<th rowspan="3">header 2</th>
<th colspan="2">header 3</th>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
</tr>
<tr>
<td>data 5</td>
<td>data 6</td>
<td>data 7</td>
<td>data 8</td>
</tr>
</tbody>
</table>
Keterangan:
Tabel diatas menggunakan gabungan colspan dan rowspan
Sama seperti keterangan sebelumnya dan pada tabel diatas disisipkan rowspan="3" pada header 2 dengan data kosong dan hanya mengikuti jumlah row yang ada disebelah kanannya.

LIHAT VIDEO TUTORIALNYA



Mudah bukan?
Semoga artikel tentang cara membuat tabel dengan kode HTML ini bermanfaat bagi pembaca..
Happy Blogging!

3comments

Sari Oktarini Cara mudah membuat tabel dengan kode HTML delete January 12, 2018 at 8:20 PM

sangat bermanfaat, terima kasih ilmunya kak.

Sari Oktarini Cara mudah membuat tabel dengan kode HTML delete January 14, 2018 at 4:36 PM

Terima kasih kak, ini sangat bermanfaat.

My blog

Sari Oktarini Cara mudah membuat tabel dengan kode HTML delete January 14, 2018 at 4:39 PM

thanks kak, sngat membantu

My blog

IBX59E89E6F98B8E