tutorial table2: Atribut rowspan dan colspan pada table html

Seperti yang telah saya janjikan pada artikel saya minggu lalu tentang tutorial table: pengenalan dan cara membuat table dasar html", maka kini saatnya saya sedikit menjelaskan mengenai beberapa atribut khusus yang sering digunakan dalam pembuatan table. Beberapa diantaranya adalah "rowspan" dan "colspan".

<td rowspan="n">
dan
<td colspan="n">

Nilai "n" adalah jumlah kolom cell-cell table dan jumlah baris-baris cell yang akan digabungkan, maka masukanlah nilainya berdasarkan dengan kebutuhan dan modifikasi margin yang kamu inginkan.

Rowspan.
Adalah atribut table yang berfungsi untuk me-margin/menggabungkan baris-baris cell pada table. Di bawah ini adalah table yang menggunakan atribut rowspan di dalamnya

<table border="1">
<tr><td rowspan="3">Rows</td>
<td>cell a1</td><td>cell a2</td></tr>
<tr><td>cell b1</td><td>cell b2</td></tr>
<tr><td>cell c1</td><td>cell c2</td></tr>
</table>

Hasil:

Rows	cell a1	cell a2
	cell b1	cell b2
	cell c1	cell c2

Colspan.
Adalah atribut table yang berfungsi me-margin/menggabungkan cell table. Berikut adalah contoh colspan pada table.

<table border="1">
<tr><td colspan="2">colspan</td></tr>
<tr><td>cell a1</td><td>cell a2</td></tr>
<tr><td>cell b1</td><td>cell b2</td></tr>
<tr><td>cell c1</td><td>cell c2</td></tr>
</table>

Hasil:

colspan
cell a1	cell a2
cell b1	cell b2
cell c1	cell c2

Penggabungan rowspan dan colspan dalam satu table.
Di bawah ini adalah contoh penggunaan banyak atribut colspan dan rowspan dalam satu table. Table seperti ini biasanya digunakan untuk menjelaskan suatu data informasi secara lebih rinci.

RINCIAN JUMLAH SISWA/I SMKN1 SERANG TAHUN 2008 s/d 2010	Siswa/i Tahun 2008
	KELAS A		KELAS B		KELAS C
	Pria	Wanita	Pria	Wanita	Pria	Wanita
	cell a1	cell a2	cell a3	cell a4	cell a5	cell a6
	Siswa/i Tahun 2009
	KELAS A		KELAS B		KELAS C
	Pria	Wanita	Pria	Wanita	Pria	Wanita
	cell b1	cell b2	cell b3	cell b4	cell b5	cell b6
	Siswa/i Tahun 2010
	KELAS A		KELAS B		KELAS C
	Pria	Wanita	Pria	Wanita	Pria	Wanita
	cell c1	cell c2	cell c3	cell c4	cell c5	cell c6

inilah kode table di atas

<table border="1">
<tr><td rowspan="12" align="bottom">RINCIAN JUMLAH <br/>SISWA/I SMKN1 SERANG <br/>TAHUN 2008 s/d 2010</td>

<td colspan="6" align="center">Siswa Tahun 2008</td></tr>
<tr><td colspan="2">KELAS A</td><td colspan="2">KELAS B</td><td colspan="2">KELAS C</td></tr>
<tr><th>Pria</th><th>Wanita</th><th>Pria</th><th>Wanita</th><th>Pria</th><th>Wanita</th></tr>
<tr><td>cell a1</td><td>cell a2</td><td>cell a3</td><td>cell a4</td><td>cell a5</td><td>cell a6</td></tr>

--> karna kodenya terlalu panjang dan sama, maka kamu gandakan saja kode yang bercetak biru itu menjadi tiga. Jangan lupa untuk menambahkan <tr> di setiap awal kode yang kamu copy dan apa bila selesai kamu paste, akhiri dengan tag </head>. Maka hasilnya akan tampak seperti table di atas.

Sekian tutorial kali ini. Insya Allah selanjutnya akan saya tulis "tutorial table: Cara membuat table di dalam table"

Semoga bermanfaat..