Apa itu colspan pada html?

Bagaimana? Masih pusing tidak? Mudah-mudahan tidak ya, sebab penjelasannya sudah sangat sederhana. Tapi kalau masih pusing, silahkan bertanya langsung dan kita diskusikan lagi dengan contoh dan penjelasan yang mudah-mudahan bisa dipahami. Table of Contents Show HTML Table - Colspan HTML Table - Rowspan HTML Exercises Test Yourself With Exercises Fungsi Atribut Colspan pada Table HTML Membuat Tabel dengan Atribut Colspan Pada Tag<th> Membuat Tabel dengan Atribut Colspan Pada Tag<td> Fungsi Atribut Rowspan pada Table HTML Membuat Tabel dengan Atribut Rowspan Apa itu rowspan pada HTML? Apa atribut untuk menggabungkan baris? Apa itu TR dan TD dalam HTML? Apa itu td di HTML? HTML tables can have cells that span over multiple rows and/or columns. HTML Table - Colspan To make a cell span over multiple columns, use the `colspan` attribute: Example NameAgeJillSmith43EveJackson57 Try it Yourself » Note: The value of the `colspan` attribute represents the number of columns to span. HTML Table - Rowspan To make a cell span over multiple rows, use the `rowspan` attribute: Example NameJillPhone555-1234555-8745 Try it Yourself » Note: The value of the `rowspan` attribute represents the number of rows to span. HTML Exercises Test Yourself With Exercises Exercise: Use the correct HTML attribute to make the first TH element span two columns. NameAgeJillSmith50EveJackson94 Submit Answer » Start the Exercise Btw tag	dan	ini sebenarnya hampir sama, tapi	kerap digunakan pada tabel sebagai tanda judul atau nama colom pada tabel. Meskipun tag	juga bisa kita buat sebagai judul tapi untuk proses pembelajaran saat ini kita gunakan	aja biar asyik. Atribute colspan dan rowspan pada pembuatan tabel HTML merupakan salah satu fitur yang dapat kita gunakan apabila dalam pembuatan tabel kita menginginkan beberapa kolom ingin digabungkan menjadi satu, begitu juga bila menginginkankan beberapa baris ingin digabungkan (merger). Fungsi Atribut Colspan pada Table HTML Atribut colpsan pada pembuatan table html, merupakan singkatan dari "column span" yang berfungsi untuk menggabungkan column. Penggunaan atribut colspan dapat diletakkan dalam tag <th> maupun tag <td>, tergantung kebutuhan tabel yang akan dibuat. Membuat Tabel dengan Atribut Colspan Pada Tag<th> Dalam contoh ini kita akan membuat sebuah tabel dimana atribut colspan diletakkan pada tag <th> seperti yang ditunjukkan oleh Gambar.1 dibawah ini : Gambar.1 Kode HTML untuk Gambar.1 diatas: <!DOCTYPE html> <html> <head> </head> <body> <table border="1"> <tr> <th>No</th> <th>Nama</th> <th colspan="2">No.HP</th> </tr> <tr> <td>1</td> <td>Andi Fraseria</td> <td>+6281342113</td> <td>+6281122333</td> </tr> <tr> <td>2</td> <td>Rudi Hariadi</td> <td>+6281552113</td> <td>081221333</td> </tr> </table> </body> </html> Seperti yang terlihat pada kode HTML, untuk dua data terakhir yang berada pada tag <td> akan menjadi data bagi judul No.HP. Membuat Tabel dengan Atribut Colspan Pada Tag<td> Sekarang kita akan menunjukkan bagaiman penerapan atribut colspan pada tag <td> seperti output yang ditunjukkan oleh Gambar.2 dibawah ini : Gambar.2 Kode HTML untuk Gambar.2 diatas: <!DOCTYPE html> <html> <head> </head> <body> <table border="1"> <tr> <th>No</th> <th>Nama</th> <th>No.HP</th> </tr> <tr> <td>1</td> <td colspan="2">Andi Fraseria Dengan No.HP: +6281342113</td> </tr> <tr> <td>2</td> <td>Rudi Hariadi</td> <td>+6281552113</td> </tr> </table> </body> </html> Kalau kita melihat Gambar.2, sepertinya tidak pernah kita menemukan model tabel seperti itu. Karena kolom-kolom pada baris pertama menyatakan Judul Tabel. Jika kolom-kolom pada baris pertama terdapat tiga kolom yang menjadiJudul, maka pada baris berikutnya juga terdapat tiga kolom yang akan menjadi data-datanya. Model pembuatan tabel seperti Gambar.2 sering digunakan sebagai pembuatan layout web pada awal-awal diperkenalkan HTML. Fungsi Atribut Rowspan pada Table HTML Atribut rowspan berfungsi untuk menggabungkan beberapa baris menjadi satu baris. Penggunaan atribut rowspan hanya dimungkinkan pada tag <td> saja, berbeda dengan colspan. Membuat Tabel dengan Atribut Rowspan Berikut ini kita akan sajikan contoh penerapan tabel dimana dua orang yang memiliki no.hp yang sama seperti yang ditunjukkan oleh Gambar.3 dibawah ini : Apa itu rowspan pada HTML? Rowspan merupakan salah satu atribut yang berkaitan erat dengan pembuatan tabel. Fungsinya adalah untuk menggabungkan beberapa data dalam baris. Sederhananya, menggabungkan baris ke bawah. Apa atribut untuk menggabungkan baris? digunakan untuk menggabungkan kolom adalah COLSPAN, sedang atribut untuk menggabungkan baris adalah ROWSPAN. Kedua atribut ini bisa dikenakan pada sembarang sel dalam suatu tabel (TH atau TD) dan untuk menggunakannya cukup dengan menentukan berapa banyak kolom atau baris yang akan digabungkan. Apa itu TR dan TD dalam HTML? Tag <tr> (tabel row) untuk membuat baris. Tag <td> (table data) untuk membuat sel. Tag <th> (table head) untuk membuat judul pada header. Apa itu td di HTML? Tag <td> digunakan untuk membuat kolom di dalam baris tabel di HTML sehingga akan membentuk sel (table data).

Bagaimana? Masih pusing tidak? Mudah-mudahan tidak ya, sebab penjelasannya sudah sangat sederhana. Tapi kalau masih pusing, silahkan bertanya langsung dan kita diskusikan lagi dengan contoh dan penjelasan yang mudah-mudahan bisa dipahami.

Table of Contents Show

HTML Table - Colspan
HTML Table - Rowspan
HTML Exercises
Test Yourself With Exercises
Fungsi Atribut Colspan pada Table HTML
Membuat Tabel dengan Atribut Colspan Pada Tag<th>
Membuat Tabel dengan Atribut Colspan Pada Tag<td>
Fungsi Atribut Rowspan pada Table HTML
Membuat Tabel dengan Atribut Rowspan
Apa itu rowspan pada HTML?
Apa atribut untuk menggabungkan baris?
Apa itu TR dan TD dalam HTML?
Apa itu td di HTML?

HTML tables can have cells that span over multiple rows and/or columns.

HTML Table - Colspan

To make a cell span over multiple columns, use the colspan attribute:

Example

NameAgeJillSmith43EveJackson57

Try it Yourself »

Note: The value of the colspan attribute represents the number of columns to span.

HTML Table - Rowspan

To make a cell span over multiple rows, use the rowspan attribute:

Example

NameJillPhone555-1234555-8745

Try it Yourself »

Note: The value of the rowspan attribute represents the number of rows to span.

HTML Exercises

Test Yourself With Exercises

Exercise:

Use the correct HTML attribute to make the first TH element span two columns.

NameAgeJillSmith50EveJackson94

Submit Answer »

Start the Exercise

Btw tag

dan

ini sebenarnya hampir sama, tapi

kerap digunakan pada tabel sebagai tanda judul atau nama colom pada tabel. Meskipun tag

juga bisa kita buat sebagai judul tapi untuk proses pembelajaran saat ini kita gunakan

aja biar asyik.

Atribute colspan dan rowspan pada pembuatan tabel HTML merupakan salah satu fitur yang dapat kita gunakan apabila dalam pembuatan tabel kita menginginkan beberapa kolom ingin digabungkan menjadi satu, begitu juga bila menginginkankan beberapa baris ingin digabungkan (merger).

Fungsi Atribut Colspan pada Table HTML

Atribut colpsan pada pembuatan table html, merupakan singkatan dari "column span" yang berfungsi untuk menggabungkan column. Penggunaan atribut colspan dapat diletakkan dalam tag <th> maupun tag <td>, tergantung kebutuhan tabel yang akan dibuat.

Membuat Tabel dengan Atribut Colspan Pada Tag<th>

Dalam contoh ini kita akan membuat sebuah tabel dimana atribut colspan diletakkan pada tag <th> seperti yang ditunjukkan oleh Gambar.1 dibawah ini :
Gambar.1
Kode HTML untuk Gambar.1 diatas:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table border="1">
  <tr>
    <th>No</th>
    <th>Nama</th>
    <th colspan="2">No.HP</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Andi Fraseria</td>
    <td>+6281342113</td>
    <td>+6281122333</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Rudi Hariadi</td>
    <td>+6281552113</td>
    <td>081221333</td>
  </tr>
</table>
</body>
</html>

Seperti yang terlihat pada kode HTML, untuk dua data terakhir yang berada pada tag <td> akan menjadi data bagi judul No.HP.

Membuat Tabel dengan Atribut Colspan Pada Tag<td>

Sekarang kita akan menunjukkan bagaiman penerapan atribut colspan pada tag <td> seperti output yang ditunjukkan oleh Gambar.2 dibawah ini :
Gambar.2
Kode HTML untuk Gambar.2 diatas:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table border="1">
  <tr>
    <th>No</th>
    <th>Nama</th>
    <th>No.HP</th>
  </tr>
  <tr>
    <td>1</td>
    <td colspan="2">Andi Fraseria Dengan No.HP: +6281342113</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Rudi Hariadi</td>
    <td>+6281552113</td>
  </tr>
</table>
</body>
</html>

Kalau kita melihat Gambar.2, sepertinya tidak pernah kita menemukan model tabel seperti itu. Karena kolom-kolom pada baris pertama menyatakan Judul Tabel. Jika kolom-kolom pada baris pertama terdapat tiga kolom yang menjadiJudul, maka pada baris berikutnya juga terdapat tiga kolom yang akan menjadi data-datanya.

Model pembuatan tabel seperti Gambar.2 sering digunakan sebagai pembuatan layout web pada awal-awal diperkenalkan HTML.

Fungsi Atribut Rowspan pada Table HTML

Atribut rowspan berfungsi untuk menggabungkan beberapa baris menjadi satu baris. Penggunaan atribut rowspan hanya dimungkinkan pada tag <td> saja, berbeda dengan colspan.

Membuat Tabel dengan Atribut Rowspan

Berikut ini kita akan sajikan contoh penerapan tabel dimana dua orang yang memiliki no.hp yang sama seperti yang ditunjukkan oleh Gambar.3 dibawah ini :

Apa itu rowspan pada HTML?

Rowspan merupakan salah satu atribut yang berkaitan erat dengan pembuatan tabel. Fungsinya adalah untuk menggabungkan beberapa data dalam baris. Sederhananya, menggabungkan baris ke bawah.

Apa atribut untuk menggabungkan baris?

digunakan untuk menggabungkan kolom adalah COLSPAN, sedang atribut untuk menggabungkan baris adalah ROWSPAN. Kedua atribut ini bisa dikenakan pada sembarang sel dalam suatu tabel (TH atau TD) dan untuk menggunakannya cukup dengan menentukan berapa banyak kolom atau baris yang akan digabungkan.