Tutorial HTML
Membuat Tabel pada Halaman HTML
Tabel seperti yang kalian tahu terdiri dari kolom dan baris. Pada tabel
data-data dimasukkan dalam kombinasi antara kolom dan baris tertentu.
Beberapa baris dan kolom dari tabel bisa digabungkan untuk membuat
tampilan yang sesuai dengan kebutuhan data kita. Pada html semua itu
dapat dilakukan, namun tentunya kita harus mengetahui terlebih dahulu
bahan-bahan apa saja yang diperlukan untuk meracik sebuah tabel. Untuk
meracik sebuah tabel kita akan membutuhkan bahan-bahan sebagai berikut,
<table>, <tr>, dan <td>.
Untuk membuat sebuah tabel maka susun bahan-bahan tersebut menjadi seperti ini,
Susunan seperti kode diatas akan membuat sebuah tabel sederhana yang
berukuran 2 X 2, yaitu 2 kolom dan 2 baris. Sekarang perhatikan karena
konsep dari tabel ini cukup sulit namun akan menjadi mudah apabila
kalian memperhatikan penjelasan berikut.
Tabel dari html adalah berdasarkan kepada baris atau row. Anggap kamu ingin memasukkan data pada baris pertama kolom pertama maka pertama kali yang kalian harus lakukan adalah membuat sebuah baris lalu setelah itu membuat kolom, baru setelahnya memasukkan data. Apabila kalian ingin memasukkan data pada kolom kedua baris pertama maka kalian harus membuat sebuah baris, kemudian buat kolom pertama, setelah itu buat kolom kedua, baru isi datanya. Jadi intinya baris dulu baru kolom.
<tr> digunakan untuk membuat suatu baris baru. Sedangkan <td> digunakan untuk membuat kolom/data. Supaya gampang mengingatnya, ingat saja huruf belakangnya, tr --> r = row, td --> d = data.
- <table>
- <tr>
- <td>baris 1, kolom 1</td>
- <td>baris 1, kolom 2</td>
- </tr>
- <tr>
- <td>baris 2, kolom 1</td>
- <td>baris 2, kolom 2</td>
- </tr>
- </table>
Tabel dari html adalah berdasarkan kepada baris atau row. Anggap kamu ingin memasukkan data pada baris pertama kolom pertama maka pertama kali yang kalian harus lakukan adalah membuat sebuah baris lalu setelah itu membuat kolom, baru setelahnya memasukkan data. Apabila kalian ingin memasukkan data pada kolom kedua baris pertama maka kalian harus membuat sebuah baris, kemudian buat kolom pertama, setelah itu buat kolom kedua, baru isi datanya. Jadi intinya baris dulu baru kolom.
<tr> digunakan untuk membuat suatu baris baru. Sedangkan <td> digunakan untuk membuat kolom/data. Supaya gampang mengingatnya, ingat saja huruf belakangnya, tr --> r = row, td --> d = data.
Setelah mengetahui dasarnya, maka selanjutnya kita akan belajar untuk
menyatukan 2 kolom pada sebuah tabel. Lihat contohnya dibawah ini, kita
akan membuat sebuah tabel dimana terdapat 2 kolom yang digabungkan.
Lihat, pada baris pertama, kolom pertama dan kedua digabung sehingga isi
dari kolom tersebut bisa sepanjang 2 kolom. Biasanya penggabungan kolom
seperti contoh diatas digunakan untuk membuat judul dari tabel.
Lalu sekarang bagaimana cara membuatnya agar bisa digabungkan ? Asal kita mengetahui bahan tambahannya hal itu mudah sekali untuk dilakukan. Bahan tambahan tersebut berupa atribut dari <td> yang bernama colspan. Lihat di bawah ini untuk cara penggunaannya.
Perhatikan bagian "Ini adalah kolom yang digabungkan", sebelumnya
terlihat perintah <td colspan="2"> bukan ? Ini adalah contoh
penggunaan colspan. Colspan memerintahkan agar beberapa kolom
digabungkan tergantung dari nilai yang dituliskan. Pada contoh diatas
nilai tersebut adalah "2" sehingga 2 kolom digabungkan menjadi satu dan
hasilnya dapat kalian lihat seperti contoh tabel diatas.
1 | |
2 | 3 |
4 | 5 |
Lalu sekarang bagaimana cara membuatnya agar bisa digabungkan ? Asal kita mengetahui bahan tambahannya hal itu mudah sekali untuk dilakukan. Bahan tambahan tersebut berupa atribut dari <td> yang bernama colspan. Lihat di bawah ini untuk cara penggunaannya.
- <table>
- <tr>
- <td colspan="2">Ini adalah kolom yang digabungkan</td>
- </tr>
- <tr>
- <td>baris 2, kolom 1</td>
- <td>baris 2, kolom 2</td>
- </tr>
- <tr>
- <td>baris 3, kolom 1</td>
- <td>baris 3, kolom 2</td>
- </tr>
- </table>
Contoh diatas adalah untuk menggabungkan kolom secara horisontal, namun
bagaimana cara menggabungkan kolom secara vertikal? Berikut ini kita
akan belajar untuk menggabungkan kolom 2 secara vertikal. Lihat tabel
dibawah ini.
Perhatikan tabel diatas, kolom 2 dan kolom 4 digabung sehingga kolom 4
nya hilang. Untuk membuat tabel seperti diatas atribut tambahan yang
diperlukan adalah rowspan. Mudah bukan mengingatnya? jika masih dalam
satu baris kita menggunakan colspan sedangkan apabila pidah baris kita menggunakan rowspan. Dibawah ini adalah perintah yang digunakan untuk membuat tabel seperti diatas.
Kalian dapat mencobanya di papan tulis yang disediakan di bagian bawah halaman ini.
1 | |
2 | 3 |
5 |
- <table>
- <tr>
- <td colspan="2">Ini adalah kolom yang digabungkan</td>
- </tr>
- <tr>
- <td rowspan="2">baris 2, kolom 1</td>
- <td>baris 2, kolom 2</td>
- </tr>
- <tr>
- <td>baris 3, kolom 2</td>
- </tr>
- </table>
Ada atribut-atribut lain yang berhubungan dengan tabel seperti border,
align, cellpadding, dan sebagainya yang dapat kalian pelajari lebih
lanjut di bagian penjelasan tag HTML.
sumber : disini
sumber : disini
tugasnya sudah saya periksa.... jangan lupa daftarkan blog kamu di follower blog kakak dan masukkan daftar link blog kakak di blog kamu...
ReplyDelete