Cara mudah membuat tabel dengan kode HTML

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 cara mudah 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 mudah membuat tabel dengan kode HTML ini bermanfaat bagi pembaca..
Happy Blogging!

Comments

  1. sangat bermanfaat, terima kasih ilmunya kak.

    ReplyDelete
  2. Terima kasih kak, ini sangat bermanfaat.

    My blog

    ReplyDelete
  3. misalnya kita ingin tambahkan warna biar tampilannya lebih menarik bagaimana gan?

    ReplyDelete

Post a Comment