Merapikan Kalimat Dengan Text HTML

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.

Lanjutan Membuat List Dengan HTML

Membuat List HTML (Lanjutan) Kemarin tentunya Anda sudah membaca posting saya tentang Membuat List Dengan HTML. Kali ini saya akan melanjutkan keterangan saya tentang beberapa cara lain untuk menampilkan List HTML. Sebagaimana telah saya terangkan kemarin bahwa ada dua jenis List yang bisa kita buat dengan HTML. Yaitu Ordered List yang contohnya kemarin adalah: 1. 2. 3. 4. Gelas Piring Sendok 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> d. <li>Garpu</li> </ol> <ol type=A> <li>Gelas</li> Garpu a. b. c. Gelas Piring Sendok

A. Gelas B. Piring C. Sendok

<li>Piring</li> <li>Sendok</li> D. Garpu <li>Garpu</li> </ol> <ol type=i> <li>Gelas</li> <li>Piring</li> <li>Sendok</li> iv. <li>Garpu</li> </ol> <ol type=I> <li>Gelas</li> <li>Piring</li> <li>Sendok</li> IV. <li>Garpu</li> </ol> Garpu I. II. III. Gelas Piring Sendok Garpu i. ii. iii. Gelas Piring Sendok

Unordered List
<ul> <li>Gelas</li> <li>Piring</li> <li>Sendok</li> o <li>Garpu</li> </ul> Garpu o o o Gelas Piring Sendok

<ol type=disc> <li>Gelas</li> <li>Piring</li> <li>Sendok</li> <li>Garpu</li> </ol> <ol type=circle> <li>Gelas</li> <li>Piring</li> <li>Sendok</li> o <li>Garpu</li> </ol> <ol type=square> <li>Gelas</li> <li>Piring</li> <li>Sendok</li> <li>Garpu</li> </ol> Itulah tadi lanjutan dari List HTML yang telah saya posting kemarin. Mudah2an Contoh List HTML ini berguna bagi Anda Gelas Piring Sendok Garpu Garpu o o o Gelas Piring Sendok Gelas Piring Sendok Garpu

Membuat List atau Daftar dengan HTML

Membuat List HTML Seringkali kita melihat daftar yang misalnya seperti ini: 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. 2. 3. 4. 5. Pangeran Diponegoro Perang Padri Teuku Umar Wolter Monginsidi 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. 2. 3. 4. 5. Pangeran Diponegoro Perang Padri Teuku Umar Wolter Monginsidi 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 Pada Layar Monitor

Mengatur Letak Table Secara default memang table akan terletak dibagian kiri layar. Tapi kita bisa mengatur letaknya ditempat yang kita inginkan. Misalnya dibagian kiri,dibagian tengah atau dibagian kanan layar monitor. 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

Mengatur Letak Image Dalam Kolom

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

Memasang Image Pada Table

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

Memberi Warna Pada Kolom Belajar 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

Menggabung Kolom Bersusun Pada 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>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

Menggabungkan Kolom Sebaris Pada HTML Table

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

Menambah Kolom Menjadi Bersusun

Pada posting kali ini saya akan menunjukkan caranya menambah kolom dalam table. Pada posting2 yang lalu kita sudah menggunakan tiga buah kolom dalam satu baris. Kode kolomnya yang sebaris adalah seperti ini : <tr><td> Kolom 1 </td><td> Kolom 2 </td><td> Kolom 3 </td></tr>

Untuk diperhatikan adalah bahwa kalau kita membuat kolom dalam satu baris maka kita harus menaruh tag <tr> didepan tag <td> dan dibelakang tag </td> ditulis </tr> . Kalau kita akan menambah kolom supaya menjadi bersusun maka kita harus menulisnyanya sbb: <tr><td></td></tr> <tr><td></td></tr> Dan kalau kolom2 yang diatas berisi tiga buah kolom yang sebaris,maka kolom2 yang disusun dibawahnya juga harus berisi tiga buah kolom yang sebaris. Untuk membuat kolom2 yang diatasnya atau disampingnya dengan jumlah kolom yang berlainan akan saya terangkan kemudian secara bertahap dalam posting2 selanjutnya. Tapi sekarang ini ikuti saja cara saya membuat kolom2 yang bersusun seperti ini : Jumlah susunan kolomnya terserah, sesuaikan saja dengan kebutuhan anda. Saya memasang empat susun karena saya sesuaikan dengan yang saya perlukan. Jadi inilah kode kolom2 yang berjajar tiga dan bersusun empat <html> <head> <title> Belajar HTML Table</title> </head> <body> <table border=2 width=450> <tr> <td>Kolom 1</td><td>Kolom 2</td><td>Kolom 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 hasilnya menjadi seperti ini :

Anda lihat bahwa dari menambah kolom tadi kita sekarang sudah mempunyai kolom yang berjajar tiga dan bersusun empat seperti gambar diatas.

Cara Mengatur Lebar Table

Table bisa kita atur lebarnya.Untuk mengatur lebar table kita menggunakan width=Lebarnya bisa kita atur dengan pixel(px) atau dengan procent(%). Kalau menggunakan ukuran px kita hanya perlu memasukkan angkanya saja,misalnya width=800?. Tapi kalau memakai procent kita harus memasukkan tanda % seperti ini: width=80% Sebagai contoh misalnya kita ingin memakai ukuran 450px, maka sisipkan width=450 dalam tag <table> sehingga tag tersebut menjadi <table width=450> Ukuran lebarnya terserah menurut keperluan anda. Saya mengambil ukuran 450 sekedar supaya sesuai dengan lebar ruangan di blog ini saja. Untuk membuat website biasanya ukuran lebar yang dipakai adalah minimum kurang lebih 800px. ukuran lebar (width) bisa juga disisipkan pada tag <td> jika kita ingin membuat kolom dengan lebar tertentu. Sekarang kode HTML nya menjadi seperti dibawah ini: <html> <head> <title>Belajar HTML Table</title> </head> <body> <table border=2 width=450> <tr> <td>Kolom 1</td>

<td>Kolom 2</td> <td>Kolom 3</td> </tr> </table> </body> </html> Sekarang tablenya tampak seperti ini:

Nah, sekarang Anda sudah tahu caranya mengatur lebar table. Saya harap posting ini dapat berguna bagi Anda. Selamat mencoba.

Membuat Border Sebagai Batas Kolom

Kemarin kita sudah membuat 3 buah kolom yang berjajar tapi satu dengan lainnya tidak ada batasnya. Pada posting kali ini saya akan Membuat Border Sebagai Batas kolom tersebut. Batas antara kolom demi kolom itu namanya Border. Dan untuk membuat border sebagai batas kolom itu kita memakai tambahan atribut border=# yang ditambahkan pada tag <table> menjadi <table border=#>. Tanda # bisa diganti dengan angka berapa saja, bahkan angka 0 juga bisa dipakai. Semua angka ini menunjukkan lebar border yang ingin dibuat. Tapi kalau angka 0 yang dipakai, maka hasilnya seperti yang telah kita lakukan pada posting yang lalu, dimana pada <table> tidak diberi tambahan border=#, maka garis batasnya tidak akan muncul. Kita tambahkan dulu misalnya border=2, maka sekarang Kode HTML nya menjadi seperti ini: <html> <head> <title>Belajar HTML Table</title> </head> <body> <table border=2> <tr> <td>Kolom 1</td>

<td>Kolom 2</td> <td>Kolom 3</td> </tr> </table> </body> </html> Dan hasilnya yang tampak adalah seperti ini: Belajar HTML Table Kolom 1 Kolom 2 Kolom 3 Begitulah caranya Membuat Border Sebagai Batas Kolom

Membuat Kolom Dengan HTML Table

Sekarang kita mulai Membuat Kolom dengan HTML Table. Untuk membuat kolom diperlukan tag <table><tr><td></td></tr></table> Buka dulu file notepad latihan.table.html yang sudah dibuat kemarin. Cara membukanya: Klik tombol mouse sebelah kanan pada file latihan table tadi, lalu open with notepad. Setelah dibuka sisipkan kode <table><tr><td></td></tr></table> tadi diantara <body></body> Kode htmlnya menjadi sekarang menjadi: <html> <head> <title>Belajar HTML Table</title> </head> <body> <table> <tr> <td></td> </tr> </table> </body> </html>

Yang dinamakan kolom adalah ruang diantara <td> dan </td> Karena disini saya akan membuat kolom yang berjajar tiga, maka saya tambahkan lagi dua tag <td> </td> Kemudian tulis Kolom 1, Kolom 2 dan Kolom 3 diantara masing2 tag <td> </td> Sekarang kode html nya menjadi: <html> <head> <title>Belajar HTML Table</title> </head> <body> <table> <tr> <td>Kolom 1</td> <td>Kolom 2</td> <td>Kolom 3</td> </tr> </table> </body> </html> File ini di save dulu kemudian di klik pakai tombol kiri mouse 2 kali. Hasil yang tampak adalah seperti ini:

Kolom 1 Kolom 2 Kolom 3

Kolom2 ini belum kelihatan border(batas)nya. Untuk memberi border akan saya lanjutkan di posting berikutnya.

Membuat Kode Dasar HTML Table

Untuk Belajar HTML Table dan membuat website sendiri, maka kita harus membuat persiapan lebih dulu. Pertama kita buka notepad. Kemudian ketik di notepad ini kode html seperti dibawah ini: <table> <head> <title> </title> </head> <body> </body> </html>

Kemudian sisipkan kalimat Belajar HTML Table diantara <title> dan </title> sehingga kode html nya sekarang menjadi: <table> <head> <title>Belajar HTML Table</title> </head> <body> </body> </html> Kalimat Belajar HTML Table ini nantinya tidak akan tampak dihalaman website, tapi akan muncul di browser seperti contoh dibawah ini: Lihat Arah Panah

Membuat Kode Untuk Belajar HTML Table Notepad ini disave as dengan nama: latihan-table.html (nama boleh dipilih sendiri, tapi jangan sampai lupa ketik .html dibelakangnya) Nah, sekarang sudah tersedia sebuah template yang masih kosong dan belum ada tulisannya apa2. Inilah kode html sebagai dasar untuk membuat website dan Belajar HTML Table yang selanjutnya bisa diisi artikel, gambar dan lainnya.

Cara Mudah Belajar HTML Table

Sebetulnya sudah banyak yang menulis dan membahas tentang html table.Dan sekarang ini dengan semakin banyaknya tersedia website builder dan software semacam Dreamweaver dan Frontpage, mungkin tak banyak lagi yang tertarik untuk belajar html table. Tapi menurut pendapatku, mengenal HTML Table adalah lebih baik daripada tidak mengenalnya sama sekali karena bagaimanapun juga HTML adalah merupakan dasar dalam membuat website. Jadi aku rasa tidak ada salahnya kalau kita juga sedikit belajar mengenal html table. Dulu, ketika pertama kali aku mencoba membuat website sendiri dan Belajar HTML Table, rasanya bingung juga. Aku juga heran bagaimana kode huruf dan angka bisa menjadi gambar dan kotak-kotak. Lucu rasanya.! Tapi lama kelamaan dengan semakin banyak latihan dan kebetulan aku juga senang "kutak-kutik" maka semakin hari aku semakin kecanduan belajar html table.

Sekarang ini kutak-kutik html table termasuk menjadi salah satu hobby dan kegiatanku. Ada yang tertarik untuk ikut kutak-kutik belajar html table? Silahkan baca artikel2 yang aku tulis di situs ini. Nah, sekarang kita mulai dulu dengan menulis kode dasar html untuk membuat website Kode dasarnya adalah seperti dibawah ini: <html> <head> <title></title> </head> <body> </body> </html> Sangat sederhana, bukan? Ya, memang begitulah kode dasar yang harus kita kenal jika ingin Belajar HTML Table dan membuat website sendiri