Penjelasan Ulang Kode HTML Untuk Colspan dan Rowspan (Untuk Rizka yang pusing)

Kode HTML Untuk Colspan dan Rowspan– Ini posting spesial buat anak-anak kelas 10 MM SMK Nida El-Adabi. Pada praktik kemarin ada beberapa yang merasa keburu pusing mengenai penempatan tag pada penulisan kode HTML untuk menggabungkan kolom (colspan) dan menggabungkan baris (rowspan) pada Tabel. Terutama ananda Rizka yang terlihat begitu kelelahan dan bete lantaran gagal mulu waktu coba menampilkan colpsan dan rowspan. Ini penjelasan sederhananya yang mudah-mudahan bisa dicerna dengan baik.

Untuk membuat Tabel menggunakan HTML, terlebih dahulu kenali tag-tag berikut ini:

  1. <table> Tag pembuka struktur HTML untuk membuat sebuah tabel.
  2. </table> Tag penutup struktur HTML untuk membuat sebuah tabel.
  3. <tr> Tag pembuka untuk membuat baris dalam tabel
  4. </tr> Tag penutup untuk membuat baris dalam tabel
  5. <td> Tag pembuka untuk membuat kolom dalam tabel
  6. </td> Tag penutup untuk membuat kolom dalam tabel

NB:
tr kepanjangan dari table rows (tabel kesamping alias baris)
td kepanjangan dari table down (tabel kebawah alias kolom)

Begini penjelasannya,
Ketika kita hendak membuat Tabel menggunakan HTML maka, kita akan menggunakan tag pembuka <table> dab diakhiri dengan tag </table>.

Jadi penulisan awalanya adalah;

<table>

…………………….(isi tabel)…………

</table>

Didalam tag <table> tersebut kita bisa menyisipkan atribut lain misalnya; border (untuk menentukan ketebalan garis tabel), widht (untuk menentukan lebar kolom), Height (untuk menentukan tinggi kolom).

Contoh:
<table border=”1″>
ini untuk menampilkan garis tabel dengan ketebalan 1. Kita bisa menentukan isi dari atribut  dengan isian 2,3 dan seterusnya. Atau bisa juga dengan atribut lainnya, misal table yang ditampilkan berbentuk titik-titik dotted, dashed dan lainnya, untuk yang ini pembahasannya nanti.

Menentukan jumlah baris dan kolom

Untuk menyisipkan jumlah baris, maka tag awalnya adalah:

<tr> : tag awal untuk menampilkan baris
</tr> : tag akhir untuk menampilkan baris

Penempatan tag diantara tag <table> dan </table>:

<table>

<tr>
……………….disini kode untuk menampilkan kolom…….
</tr>

</table>

Untuk menyisipkan jumlah kolom, tag awalnya adalah:

<td>: tag awal untuk menampilkan kolom
</td>: tag akhir untuk menampilkan kolom

Penempatan tag diantara tag <tr> dan </tr>:

<table>

<tr>
<td>Text dalam Kolom</td>
</tr>

</table>

Contoh:
1. Membuat Tabel 3 kolom 2 baris

<html>
<head>
<title>Menampilkan Tabel</title>
<body>
<table border="1">

<!...baris ke 1...>
<tr>
<td>Kolom 1 Baris ke 1</td> <!...menampilkan kolom ke 1 dari baris ke 1...>
<td>Kolom 2 Baris ke 1</td> <!...menampilkan kolom ke 2 dari baris ke 1...>
<td>Kolom 3 Baris ke 1</td> <!...menampilkan kolom ke 3 dari baris ke 1...>
</tr>

<!...baris ke 2...>

<tr>
<td>Kolom 1 Baris ke 2</td> <!...menampilkan kolom ke 1 dari baris ke 2...>
<td>Kolom 2 Baris ke 2</td> <!...menampilkan kolom ke 2 dari baris ke 2...>
<td>Kolom 3 Baris ke 2</td> <!...menampilkan kolom ke 3 dari baris ke 2...>
</tr>
</tble>
</body>
</head<
</html>

Jika ditampilkan menggunakan browser maka kode diatas akan menampilkan tabel dengan jumlah kolom sebanyak 3 kolom dan baris sebanyak 2 baris.

Kolom 1 Baris ke 1 Kolom 2 Baris ke 1 Kolom 3 Baris ke 1
Kolom 1 Baris ke 2 Kolom 2 Baris ke 2 Kolom 3 Baris ke 2

Berikutnya kita akan membahas colspan dan rowspan, silahkan klik disini >>

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: