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
Baca juga: Cara menambahkan kata di awal / akhir kalimat secara bersamaan di banyak baris<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 mudahCONTOH TABEL HTML SEDERHANA

header 1header 2header 3
data 1data 2data 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 1header 2header 3
data 1data 2data 3data 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 1header 2header 3
data 1data 2
data 3data 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 1header 2header 3
data 1data 2data 3data 4
data 5data 6data 7data 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!