Membuat Tabel HTML Colspan Rowspan

Daftar Isi [Lihat]

Membuat Tabel HTML Colspan Rowspan - Pada kesempatan ini kita akan mencoba cara membuat tabel dengan kode HTML serta mengatur ROWSPAN, COLSPAN secara mudah dan sederhana.

Yang mana membuat tabel dengan kode HTML adalah pengkodean yang paling mudah.

Membuat tabel HTML dengan beberapa tag dan attributes,
<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

Membuat Tabel HTML dengan Colspan dan Rowspan

Apa fungsi colspan dan rowspan pada tabel?

COLspan: mengatur jumlah kolom dari atas ke bawah, [lihat contoh]

ROWspan: mengatur jumlah deretan baris dari kiri ke kanan [lihat contoh]

Cara membuat tabel kosong di 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:
Ketika membuat tabel HTML, 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 Membuat 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 Membuat 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 Membuat 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 Membuat Tabel HTML Colspan Rowspan ini bermanfaat bagi pembaca..
Happy Blogging!

Membuat Tabel HTML Colspan Rowspan secara mudah dan Sederhana, rowspan and colspan, rowspan html, cara membuat tabel html yang bagus, cara membuat tabel html berwarna, atribut tabel html, saat membuat tabel tag tr berfungsi untuk, cara membuat tabel di html dan css, cara membuat tabel kosong di html

Blogger Kauman

Laman

13 August 2017