Hyperlink adalah link yang menghubungkan file dari sebuah website ke file yang lain dalam website itu sendiri.
Dulu ketika pertama kali ingin Belajar Membuat Website, saya heran sekali melihat text berwarna biru yang ada garis dibawahnya (underline) kalau diklik dapat membuka halaman lain dari sebuah website.
Tentu saja ini sangat menarik bagi saya yang pada waktu itu baru mulai belajar membuat website.
Setelah saya pelajari, ternyata caranya sangat mudah. Kita tinggal menuliskan kode Hyperlink HTML dan memasangnya pada salah satu halaman website.

Misalkan kita mempunyai website www.contoh-saja.com yang berisi 2 halaman, yaitu:
Halaman Website 1 dengan link: http://www.contoh-saja.com/website-1 dan
Halaman Website 2 dengan link: http://www.contoh-saja.com/website-2

Pada halaman website 1 kita tulis kode Hyperlink HTML seperti ini:

<a href=”http://www.contoh-saja.com/website-2″>LINK HALAMAN 2 INI</a>

Sebagai contoh saya berikan gambar dari Halaman 1 seperti dibawah ini

Kalau Anda Klik link “LINK HALAMAN 2 INI“, maka akan terbukalah halaman 2 dari website ini.
Contohnya seperti ini:

Halaman 1

Untuk membuka Halaman 2 silahkan Klik LINK HALAMAN 2 INI

Untuk kembali ke Halaman 1 silahkan Klik KEMBALI KE HALAMAN 1

<a href=”http://www.contoh-saja.com/website-1″>KEMBALI KE HALAMAN 1</a>

Kalau Anda Klik Link “KEMBALI KE HALAMAN 1“, maka Anda akan melihat kembali Halaman 1 dari website.

CATATAN: Halaman 1 dan Halaman 2 diatas hanya sebagai contoh yang sengaja saya buat pada satu halaman artikel ini untuk memudahkan pembaca supaya tidak me-loncat2 kehalaman lain. Jadi yang perlu diperhatikan adalah penulisan kode hyperlinknya.

Link menuju halaman lain tidak harus diisi text, tapi dapat juga diisi gambar/image. Kodenya: <a href="http://www.contoh-saja.com/website-1"><img src="IMAGE"></a> Sebagai contoh Silahkan Klik Gambar/Image disebelah ini – > >

Demikian cara Membuat Hyperlink HTML untuk membuka halaman lain dari website.
 
 

Dulu saya sering kesal kalau lihat postingan saya susunannya di halaman website statis kelihatan gak rapi.
Sudah saya coba merapikannya waktu menulis artikelnya, tapi waktu di publish jadi amburadul kembali. Setelah mencari kesana-kemari akhirnya saya temukan juga cara merapikan text dengan Text HTML.

Ternyata caranya merapikan kalimat dengan Text HTML itu sederhana sekali. Kita hanya perlu meletakkan tags <p align="#"> dan </p> Tanda # boleh diganti dengan center, right atau justify.
Kalau tidak diisi maka secara default kalimat diatur dengan left.

align-left membuat semua baris text berada disisi sebelah kiri.
align-right membuat semua baris text berada disisi sebelah kanan.
align-center membuat semua baris text berada ditengah halaman.
align-justify membuat semua baris text diatur sama jaraknya dengan tepi halaman sebelah kiri dan kanan.

Dibawah ini saya berikan contoh artikel yang saya buat dengan Mengatur Text HTML.
Diatas text saya tambahkan judul dengan warna merah dan ukuran yang besar sekedar untuk memperjelas keterangan saya saja.

Ini artikel dengan tags <p> </p> atau boleh juga diisi align="left". Tidak akan ada pengaruhnya sama sekali.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nibh sem, feugiat vitae placerat vel, facilisis quis arcu. Sed eu pretium tortor. Nam a velit in ipsum euismod ultrices quis non est. Aenean congue vulputate erat et accumsan. Integer id metus adipiscing felis suscipit laoreet viverra sed sapien. Donec purus ligula, elementum vel tristique sit amet, tempor ut est. Morbi placerat rutrum urna at dignissim. </p>

Ini artikel dengan tags <p align="right"> </p>

<p align="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nibh sem, feugiat vitae placerat vel, facilisis quis arcu. Sed eu pretium tortor. Nam a velit in ipsum euismod ultrices quis non est. Aenean congue vulputate erat et accumsan. Integer id metus adipiscing felis suscipit laoreet viverra sed sapien. Donec purus ligula, elementum vel tristique sit amet, tempor ut est. Morbi placerat rutrum urna at dignissim.</p>

Ini artikel dengan tags <p align="center"> </p>

<p align="center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nibh sem, feugiat vitae placerat vel, facilisis quis arcu. Sed eu pretium tortor. Nam a velit in ipsum euismod ultrices quis non est. Aenean congue vulputate erat et accumsan. Integer id metus adipiscing felis suscipit laoreet viverra sed sapien. Donec purus ligula, elementum vel tristique sit amet, tempor ut est. Morbi placerat rutrum urna at dignissim.</p>

Ini artikel dengan tags <p align="justify"> </p>

<p align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nibh sem, feugiat vitae placerat vel, facilisis quis arcu. Sed eu pretium tortor. Nam a velit in ipsum euismod ultrices quis non est. Aenean congue vulputate erat et accumsan. Integer id metus adipiscing felis suscipit laoreet viverra sed sapien. Donec purus ligula, elementum vel tristique sit amet, tempor ut est. Morbi placerat rutrum urna at dignissim.</p>

Terserah Anda untuk memilih pengaturan Text HTML yang sesuai untuk artikel yang akan Anda publikasikan di website HTML Anda.

Membuat List HTML (Lanjutan)

1. Gelas
2. Piring
3. Sendok
4. Garpu

Dan Unordered List seperti contoh dibawah ini.

• Gelas
• Piring
• Sendok
• Garpu

Selain itu ada beberapa macam tampilan lagi yang dapat dibuat dengan List HTML.
Langsung saja akan saya berikan kode berikut contohnya pada table dibawah ini:

Ordered List

<ol type=”a”> <li>Gelas</li> <li>Piring</li> <li>Sendok</li> <li>Garpu</li> </ol>	Gelas Piring Sendok Garpu
<ol type=”A”> <li>Gelas</li> <li>Piring</li> <li>Sendok</li> <li>Garpu</li> </ol>	Gelas Piring Sendok Garpu
<ol type=”i”> <li>Gelas</li> <li>Piring</li> <li>Sendok</li> <li>Garpu</li> </ol>	Gelas Piring Sendok Garpu
<ol type=”I”> <li>Gelas</li> <li>Piring</li> <li>Sendok</li> <li>Garpu</li> </ol>	Gelas Piring Sendok Garpu

Unordered List

<ul> <li>Gelas</li> <li>Piring</li> <li>Sendok</li> <li>Garpu</li> </ul>	Gelas Piring Sendok Garpu
<ol type=”disc”> <li>Gelas</li> <li>Piring</li> <li>Sendok</li> <li>Garpu</li> </ol>	Gelas Piring Sendok Garpu
<ol type=”circle”> <li>Gelas</li> <li>Piring</li> <li>Sendok</li> <li>Garpu</li> </ol>	Gelas Piring Sendok Garpu
<ol type=”square”> <li>Gelas</li> <li>Piring</li> <li>Sendok</li> <li>Garpu</li> </ol>	Gelas Piring Sendok Garpu

Itulah tadi lanjutan dari List HTML yang telah saya posting kemarin.
Mudah2an Contoh List HTML ini berguna bagi Anda

Membuat List HTML

Daftar Buku Sejarah dan Pahlawan Kemerdekaan:

• Pangeran Diponegoro
• Perang Padri
• Teuku Umar
• Wolter Monginsidi
• Dan Lain-lainnya

Atau yang seperti ini:
Daftar Buku Sejarah dan Pahlawan Kemerdekaan:

1. Pangeran Diponegoro
2. Perang Padri
3. Teuku Umar
4. Wolter Monginsidi
5. Dan Lain-lainnya

Nah, untuk membuat list atau daftar yang seperti ini dengan html caranya adalah dengan tag <ul></ul> yang disebut Unordered List atau dengan tag <ol></ol> yaitu Ordered List.

Beda antara <ol></ol> dan <ul></ul> adalah bahwa Ordered List <ol></ol> menghasilkan daftar dengan nomor urut 1,2,3 dst sedangkan Unordered List <ul></ul> hasilnya tanpa nomor.

Sekarang kita membuat list atau daftar dengan tag <ul></ul> supaya memperoleh hasil seperti diatas.

<strong>Daftar Buku Sejarah dan Pahlawan Kemerdekaan:</strong>
<ul>
<li>Pangeran Diponegoro</li>
<li>Perang Padri</li>
<li>Teuku Umar</li>
<li>Wolter Monginsidi </li>
<li>Dan Lain-lainnya</li>
</ul>

Hasilnya adalah seperti ini:

Daftar Buku Sejarah dan Pahlawan Kemerdekaan:

• Pangeran Diponegoro
• Perang Padri
• Teuku Umar
• Wolter Monginsidi
• Dan Lain-lainnya

Supaya kita tahu perbedaannya, maka tag <ul></ul> kita ganti dengan tag <ol></ol>
kita lihat kode htmlnya sekarang menjadi seperti ini:

<strong>Daftar Buku Sejarah dan Pahlawan Kemerdekaan:</strong>
<ol>
<li>Pangeran Diponegoro</li>
<li>Perang Padri</li>
<li>Teuku Umar</li>
<li>Wolter Monginsidi </li>
<li>Dan Lain-lainnya</li>
</ol>

Lihatlah…… Sekarang hasilnya adalah seperti dibawah ini:

Daftar Buku Sejarah dan Pahlawan Kemerdekaan:

1. Pangeran Diponegoro
2. Perang Padri
3. Teuku Umar
4. Wolter Monginsidi
5. Dan Lain-lainnya

Kelihatan bedanya, kan?
Catatan:
Tag <strong> </strong> adalah untuk menebalkan text.
Seperti pada contoh diatas ada tag <strong> </strong> yang mengapit kalimat Daftar Buku Sejarah dan Pahlawan Kemerdekaan:
Silahkan Anda coba sendiri apa yang terjadi kalau tag <strong> </strong> dihapus.
Anda lihat perbedaannya?

Demikian cara membuat List atau Daftar dengan kode HTML.

Mengatur Letak Table

Untuk mengatur letak table kita hanya perlu menambahkan <div align="#"> diatas tag <table> dan </div> dibawah tag </table> Tanda # bisa diganti dengan center atau right.
Kalau kita ingin mengatur letak table tetap berada dibagian kiri layar, kita tidak perlu menambahkan kode <div align="#"> dan </div>. Tapi kalau ingin memindahkan table kebagian tengah layar monitor maka perlu ditambahkan kode <div align="center"> atau cukup dengan kode <center> dan </center>.
Sedangkan untuk menaruh table kebagian kanan gambar,maka kodenya adalah <div align="right"> dan </div>

Mari sekarang kita letakkan table dibagian tengah layar.
Pertama kita taruh kode <div align="center"> diatas kode <table> dan kode </div> dibawah kode </table>
Sebagai contoh kali ini table nya akan saya perkecil lebarnya menjadi 300px dan kolom artikel ini saya gunakan se-olah2 sebagai lebar layar monitor computer.
Sekarang kode HTML nya saya buat seperti dibawah ini:

<html>
<head>
<title>Belajar HTML Table</title>
</head>
<body>
<div align="center">
<table border="2" width=”300″>
<tr>
<td colspan="3" bgcolor="#FF9900">Kolom 1+2+3 </td>
</tr>
<tr>
<td rowspan="2">Kolom 1A<br />+Kolom 1B</td>
<td>Kolom 2A</td>
<td>Kolom 3A<br />+Kolom 3B</td>
</tr>
<tr>
<td width="100" height="137">
<img title="Hawaiian Girl" src="Hawaiian-Girl.jpg" alt="Hawaiian Girl">
</td>
</tr>
<tr>
<td>Kolom 1C</td><td>Kolom 2C</td><td>Kolom 3C</td>
</tr>
</table>
</div>
</body>
</html>

Dan sekarang hasilnya menjadi seperti ini:

Mengatur Letak Table di Tengah Layar Monitor Computer

Untuk mengatur letak Table disebelah kanan hanya perlu mengganti "center" dengan "right"

Dan hasilnya akan menjadi seperti ini:

Mengatur Letak Table ke Sebelah Kanan Layar Monitor

Untuk mengatur letak Table disebelah kiri tidak perlu menuliskan kode <div align="left">
Tapi kalau mau diisi dengan <div align="left"> juga boleh. Sama sekali tidak akan ada pengaruhnya, sebab secara default letak Table adalah dibagian sebelah kiri screen monitor.

Letaknya akan tetap seperti ini:

Mengatur Letak Table ke Sebelah Kiri Layar Monitor

Yang Surya
Mengatur Letak Table

Letak Image

Letak Image dalam kolom dapat diatur sesuai dengan tempat yang kita inginkan.
Secara default image akan berada dibagian kiri-tengah pada bidang gambar atau kolom.

Pada posting yang lalu, yaitu Memasang Image, ukuran kolom sudah sengaja dibuat sama dengan ukuran image. Jadi otomatis image akan berada tepat pada kolom yang disediakan.
Tapi apabila ukuran kolom lebih besar daripada ukuran image, maka image akan berada pada bagian kiri-tengah kolom.

Sekarang kita sediakan image yang akan dipasang. Misalnya image peragawati disamping kiri ini yang ukurannya lebar = 100px dan tinggi = 215px.

Kemudian sebagai contoh saya akan membuat sebuah table sederhana dengan satu kolom yang ukurannya lebar = 450px dan tinggi = 450px.
Kode HTML nya adalah sbb:

<html>
<body>
<table border=”2″ width=”450″ height=”450″ bgcolor=”#99CCFF”>
<tr>
<td>
<img src=”peragawati.jpg” width=”100″ height=”215″>
</td>
</tr>
</table>
</body>
</html>

Tampilannya adalah seperti ini:

Mengatur Letak Image

Karena posisi image tidak ditentukan, maka image akan berada dibagian kiri-tengah kolom.

Untuk mengubah letak image dipakai kode tambahan align dan/atau valign.
Align untuk menentukan posisi image disebelah kiri, tengah atau kanan pada kolom. Kodenya seperti ini: align=”center” untuk meletakkan image ketengah dan align=”right” untuk meletakkan image kesebelah kanan.
Sedangkan untuk meletakkan image dibagian kiri kolom tidak perlu ditulis. Tapi kalau mau ditulis align=”left” juga boleh meskipun sebetulnya secara default image akan terletak dibagian kiri-tengah dalam kolom.

Valign adalah untuk menentukan letak image disebelah atas, tengah atau bawah pada kolom. Kode yang bisa ditulis untuk valign adalah valign=”top” untuk meletakkan image di bagian sebelah atas kolom, valign=”middle” untuk meletakkan image dibagian tengah kolom dan valign=”bottom” supaya image berada dibagian bawah kolom.

Align dan valign juga bisa digabungkan dalam mengatur letak image. Misalnya align=”right” valign=”bottom” maka image akan berada disudut kanan-bawah pada kolom.

Mari kita buat sebuah kolom html table dengan image yang kita letakkan dibeberapa tempat didalam kolom.
Image A: ditengah kolom; kodenya: align=”center”
Image B: di kiri-atas kolom; kodenya: valign=”top”
Image C: di kanan-bawah kolom; kodenya: align=”right” valign=”bottom”

Image A

<html>
<body>
<table border=”2″ width=”450″ height=”450″ bgcolor=”#99CCFF”>
<tr>
<td align=”center”>
<img src=”peragawati.jpg” width=”100″ height=”215″>
</td>
</tr>
</table>
</body>
</html>

Letaknya seperti ini:

Meletakkan Image di Tengah Kolom Belajar HTML Table

Image B

<html>
<body>
<table border=”2″ width=”450″ height=”450″ bgcolor=”#99CCFF”>
<tr>
<td valign=”top”>
<img src=”peragawati.jpg” width=”100″ height=”215″>
</td>
</tr>
</table>
</body>
</html>

Tampilannya:

Meletakkan Image di bagian Atas Kolom Belajar HTML Table

Image C

<html>
<body>
<table border=”2″ width=”450″ height=”450″ bgcolor=”#99CCFF”>
<tr>
<td align=”right” valign=”bottom”>
<img src=”peragawati.jpg” width=”100″ height=”215″>
</td>
</tr>
</table>
</body>
</html>

Letak image nya seperti dibawah ini:

Meletakkan image di bagian kanan-bawah kolom HTML Table

Sekarang Anda sudah tahu cara mengatur Letak Image dalam Belajar HTML Table.
Silahkan mencoba sendiri dengan berbagai kombinasi align dan valign.
Selamat ber experiment!
Yang Surya

Hawaiian-Girl

Untuk memasang image atau gambar pada table adalah mudah sekali.
Pertama pilih image atau gambar yang akan dipasang. Dan kemudian simpan dalam file yang sama dengan file yang akan diisi gambar tersebut.
Misalkan image yang akan dipasang adalah photo seperti disamping ini:
Ukuran photo ini adalah lebar = 150px dan tingginya = 206px.

Image ini akan kita pasang pada kolom 2B.
maka kita sisipkan <img title=”Hawaiian Girl” src=”Hawaiian Girl.jpg” alt=”Hawaiian Girl”/> mengantikan nama Kolom 2B.
alt=”Hawaiian Girl” diperlukan jika browser tidak dapat menampilkan image tersebut, maka akan tampil tulisan Hawaiian Girl sebagai penggantinya.
Sedangkan title akan menampilkan tulisan jika panah diletakkan pada image tersebut. (Lihat tanda panah pada hasil gambar Belajar HTML Table Memasang Image)

Oleh karena lebar gambar 150px dan tingginya 206px, maka kita taruh width=”150″ dan height=”206″ pada tag nya Kolom 2B itu. Supaya lebar dan tinggi kolomnya sesuai dengan lebar dan tinggi image yang akan dipasang.
Yang juga harus diperhatikan pada waktu memasang image pada table adalah nama pada image juga harus sama persis dengan nama yang ditulis pada img src. Sebab kalau namanya berbeda maka imagenya tidak akan muncul.
Misalnya nama imagenya Hawaiian.jpg, maka jangan ditulis sebagai hawaian.jpg. Perbedaan satu huruf saja akan menyebabkan image tidak muncul.

Nah, setelah kita masukkan img src tadi, maka Kode HTML nya sekarang menjadi seperti ini:

<html>
<head>
<title>Belajar HTML Table</title>
</head>
<body>
<table border=”2″ width=”450″>
<tr>
<td colspan=”3″ bgcolor=”#FF9900″>Kolom 1+2+3 </td>
</tr>
<tr>
<td rowspan=”2″>Kolom 1A<br />+Kolom 1B</td>
<td>Kolom 2A</td>
<td>Kolom 3A<br />+Kolom 3B</td>
</tr>
<tr>
<td width=”150″ height=”206″>
<img title=”Hawaiian Girl” src=”Hawaiian-Girl.jpg” alt=”Hawaiian Girl”>
</td>
</tr>
<tr>
<td>Kolom 1C</td><td>Kolom 2C</td><td>Kolom 3C</td>
</tr>
</table>
</body>
</html>

Dan tampilannya sekarang adalah seperti ini :

Belajar HTML Table Memasang Image

Selamat mencoba memasang image pada html table.

Kolom pada HTML Table juga bisa diberi warna. Bukan hanya kolom saja yang bisa diberi warna, tetapi juga body, table dan huruf2 juga bisa kita beri warna sesuai yang kita inginkan.
Untuk Memberi Warna pada Kolom, body dan table diperlukan kode bgcolor=”#” yang ditaruh pada tag yang akan diberi warna.

Untuk kali ini kita ambil Kolom 1+2+3 yang akan kita beri warna. Ada beberapa macam cara yang bisa dipakai untuk memberi kode warna pada kolom html table. Dalam posting ini hanya akan saya berikan dua cara yang gampang dan banyak dipakai.

Kesatu: Tulis warna Red, Blue, Black, White, Green atau Yellow dan sisipkan pada bgcolor seperti ini, misalnya bgcolor=”Red” dan taruh dalam tag “td” Dan Tag nya menjadi <td bgcolor=”Red”>
Pilihan warna dengan cara menulis nama warna ini jumlahnya sangat terbatas.

Kedua: Tulis kode warna #FF0000 (ini kode untuk warna Merah) dan sisipkan pada bgcolor yang ada dalam tag seperti diatas menjadi <td bgcolor=”#FF0000″>
Pilihan warna dengan kode seperti diatas cukup banyak dan bisa dilihat Html Color Codes.

Nah,sekarang kita buka dulu link HTML Color Codes. Pilih salah satu kode warna, misalnya #FF9900. (Jangan lupa taruh # didepan kode warna!)
Masukkan pada tag Kolom 1+2+3 sehingga tagnya menjadi
<td bgcolor=”#FF9900″>
Sekarang kode HTML nya menjadi seperti dibawah ini:

<html>
<head>
<title>Belajar HTML Table</title>
</head>
<body>
<table border=”2″ width=”450″>
<tr>
<td colspan=”3″ bgcolor=”#FF9900″>Kolom 1+2+3 </td>
</tr>
<tr>
<td rowspan=”2″>Kolom 1A<br />+Kolom 1B</td>
<td>Kolom 2A</td>
<td>Kolom 3A<br />+Kolom 3B</td>
</tr>
<tr>
<td>Kolom 2B</td>
</tr>
<tr>
<td>Kolom 1C</td><td>Kolom 2C</td><td>Kolom 3C</td>
</tr>
</table>
</body>
</html>

Dan tampilannya sekarang adalah seperti ini :

Memberi Warna Pada Kolom Belajar HTML Table

Pada posting yang lalu kita sudah menggabungkan kolom html table yang berada pada satu baris.
Sekarang, pada posting kali ini saya akan menunjukkan cara Menggabungkan Kolom yang Bersusun dari atas kebawah pada HTML Table.

Untuk menggabungkan kolom bersusun dari atas kebawah ini kita menggunakan rowspan=”#” yang disisipkan pada tag <td> Tanda # bisa diganti dengan angka sebanyak kolom yang akan digabungkan.
Mari sekarang kita gabungkan beberapa kolom yang bersusun dari atas kebawah. Kita ambil saja Kolom 1A dengan Kolom 1B dan Kolom 3A dengan Kolom 3B.
Jadi ada 2 pasang kolom bersusun yang akan digabung.

Pertama masukkan dulu kode rowspan=”2″ kedalam tag <td>Kolom 1A</td> menjadi <td rowspan=”2″>Kolom 1A</td> Disini rowspan diisi angka 2 karena yang akan digabung adalah 2 kolom.
Kemudian ubah juga tag pada Kolom 3A menjadi <td rowspan=”2″>Kolom 3A</td>
Setelah itu <td>Kolom 1B</td> dan <td>Kolom 3B</td> dihapus.

Dan supaya masih bisa dilihat kolom2 mana saja yang sudah digabungkan maka nama Kolom 1A diubah namanya menjadi Kolom 1A + Kolom 1B dan Kolom 3A diubah namanya menjadi Kolom 3A + Kolom 3B.

Nah,disini saya akan memberikan sedikit keterangan.
Pada HTML Table jika tidak ditentukan lebarnya atau tingginya sebuah kolom,maka lebar atau tinggi kolom akan menyesuaikan dengan panjang atau tingginya huruf2 atau gambar yang ada.
Maka supaya Kolom 1A + Kolom 1B dan Kolom 3A + Kolom 3B tidak terlalu panjang,maka akan kita sisipkan tag <br /> diantara kolom2 itu supaya nama kolom2 itu menyusun dari atas kebawah dan tidak memanjang kesamping.
Menjadi seperti ini <td>Kolom 1A<br />Kolom 1B</td> dan <td>Kolom 3A<br />Kolom 3B</td>

Sekarang lihat kode HTML nya menjadi seperti ini:

<html>
<head>
<title>Belajar HTML Table</title>
</head>
<body>
<table border="2" width="450">
<tr>
<td colspan="3">Kolom 1+2+3 </td>
</tr>
<tr>
<td rowspan="2">Kolom 1A<br />+Kolom 1B</td>
<td>Kolom 2A</td>
<td rowspan="2">Kolom 3A<br />+Kolom 3B</td>
</tr>
<tr>
<td>Kolom 2B</td>
</tr>
<tr>
<td>Kolom 1C</td><td>Kolom 2C</td><td>Kolom 3C</td>
</tr>
</table>
</body>
</html>

Dan tampilannya menjadi seperti ini:

Menggabung Kolom Bersusun

Sekarang perhatikan caranya bilamana kita ingin Menggabungkan Kolom yang Sebaris Pada Table.
Dalam contoh ini kita akan menggabungkan Kolom 1, Kolom 2 dan Kolom 3 menjadi hanya satu kolom yang panjang.

Caranya adalah dengan menyisipkan kode colspan=”#” didalam tag <td> seperti ini: <td colspan=”#”> tanda # bisa diganti dengan angka sebanyak kolom yang akan digabungkan.
Kolom yang akan kita gabungkan ini kodenya adalah:

<tr>
<td> Kolom 1 </td><td> Kolom 2 </td><td> Kolom 3 </td>
</tr>

Karena yang kita gabung adalah 3 buah kolom maka kita isikan angka 3 menggantikan tanda # dalam colspan=”#” menjadi <td colspan=”3″>
Kalau misalnya akan menggabungkan 2 kolom atau 5 kolom, maka colspannya diisi dengan angka 2 atau 5 sesuai dengan banyaknya kolom2 yang akan digabungkan.
Setelah kita menaruh colspan=”3″ tadi maka Kolom 2 dan Kolom3 harus dihapus.Dan Kolom 1 kita ganti namanya menjadi Kolom 1+2+3 supaya kita tidak lupa darimana Kolom ini berasal.

Sebelum diubah
<tr>
<td> Kolom 1 </td><td> Kolom 2 </td><td> Kolom 3 </td>
</tr>

Sesudah diubah
<tr>
<td colspan=”3″>Kolom 1+2+3 </td>
</tr>

Sekarang kode HTML nya menjadi seperti ini:

<html>
<head>
<title>
Belajar HTML Table</title>
</head>
<body>
<table border=”2″ width=”450″>
<tr>
<td colspan=”3″>Kolom 1+2+3 </td>
</tr>
<tr>
<td>Kolom 1A</td><td>Kolom 2A</td><td>Kolom 3A</td>
</tr>
<tr>
<td>Kolom 1B</td><td>Kolom 2B</td><td>Kolom 3B</td>
</tr>
<tr>
<td>Kolom 1C</td><td>Kolom 2C</td><td>Kolom 3C</td>
</tr>
</table>
</body>
</html>

Dan sekarang tampilannya menjadi seperti ini :

Menggabung Kolom Sebaris