Cara Membuat Tabel di HTML

PDF download Unduh PDF
Disusun bersama Christopher Batchelor

PDF download Unduh PDF

Artikel wikiHow ini mengajarkan cara membuat tabel informasi dasar memakai HTML, serta cara menambahkan berbagai unsur misalnya border (garis batas) pada tabel .

Bagian 1
Bagian 1 dari 2:

Membuat Tabel

PDF download Unduh PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/5a\/Create-a-Table-in-HTML-Step-1.jpg\/v4-460px-Create-a-Table-in-HTML-Step-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/5a\/Create-a-Table-in-HTML-Step-1.jpg\/v4-728px-Create-a-Table-in-HTML-Step-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Biasanya Anda akan memakai program Notepad pada Windows atau TextEdit pada Mac. Berikut cara menemukan program ini:
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/12\/Create-a-Table-in-HTML-Step-2.jpg\/v4-460px-Create-a-Table-in-HTML-Step-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/12\/Create-a-Table-in-HTML-Step-2.jpg\/v4-728px-Create-a-Table-in-HTML-Step-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Label <table> menandakan awal tabel, dan menekan ↵ Enter akan membuat editor teks memulai garis baru.
    • Saat memakai HTML, Anda selalu harus menekan ↵ Enter setelah membuat baris untuk beralih ke baris berikutnya.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/8c\/Create-a-Table-in-HTML-Step-3.jpg\/v4-460px-Create-a-Table-in-HTML-Step-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/8c\/Create-a-Table-in-HTML-Step-3.jpg\/v4-728px-Create-a-Table-in-HTML-Step-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Perintah ini menandakan Anda akan membuat elemen khusus pada tabel.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/42\/Create-a-Table-in-HTML-Step-4.jpg\/v4-460px-Create-a-Table-in-HTML-Step-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/42\/Create-a-Table-in-HTML-Step-4.jpg\/v4-728px-Create-a-Table-in-HTML-Step-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Tikkan <th> untuk menandakan kolom, tikkan label untuk kolom, tikkan </th> untuk menutup kolom, lalu tekan ↵ Enter .
    • Sebagai contoh, untuk membuat kolom berlabel "Jumlah Anjing", tikkan <th>Jumlah Anjing</th> ke editor teks.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/88\/Create-a-Table-in-HTML-Step-5.jpg\/v4-460px-Create-a-Table-in-HTML-Step-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/88\/Create-a-Table-in-HTML-Step-5.jpg\/v4-728px-Create-a-Table-in-HTML-Step-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Bergantung pada banyaknya kolom yang perlu dimiliki tabel, langkahnya akan bervariasi. Setelah Anda menambahkan semua kolom yang ingin digunakan, lanjutkan ke langkah berikutnya.
    • Kolom dbuat dari kiri ke kanan.
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/6a\/Create-a-Table-in-HTML-Step-6.jpg\/v4-460px-Create-a-Table-in-HTML-Step-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/6a\/Create-a-Table-in-HTML-Step-6.jpg\/v4-728px-Create-a-Table-in-HTML-Step-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Perintah ini menandakan semua tabel kolom sudah tercipta dan menutup bagian kode tabel tersebut.
  7. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d8\/Create-a-Table-in-HTML-Step-7.jpg\/v4-460px-Create-a-Table-in-HTML-Step-7.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d8\/Create-a-Table-in-HTML-Step-7.jpg\/v4-728px-Create-a-Table-in-HTML-Step-7.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Sekarang Anda akan menambahkan baris ke tabel.
  8. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/45\/Create-a-Table-in-HTML-Step-8.jpg\/v4-460px-Create-a-Table-in-HTML-Step-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/45\/Create-a-Table-in-HTML-Step-8.jpg\/v4-728px-Create-a-Table-in-HTML-Step-8.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Tikkan <td> untuk menandakan potongan informasi di bawah kolom pertama, tikkan </td> demi menutup sel, dan tekan ↵ Enter .
    • Sebagai contoh: untuk menciptakan sel bernomor "23", tikkan <td>23</td> pada editor teks.
  9. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/08\/Create-a-Table-in-HTML-Step-9.jpg\/v4-460px-Create-a-Table-in-HTML-Step-9.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/08\/Create-a-Table-in-HTML-Step-9.jpg\/v4-728px-Create-a-Table-in-HTML-Step-9.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Jumlah sel dalam baris harus berkorelasi dengan jumlah kolom; sebagai contoh, jika Anda memiliki tiga kolom, sebaiknya buat tiga sel dalam satu baris. Setelah Anda membuat seluruh baris, silakan melanjutkan.
  10. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1f\/Create-a-Table-in-HTML-Step-10.jpg\/v4-460px-Create-a-Table-in-HTML-Step-10.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1f\/Create-a-Table-in-HTML-Step-10.jpg\/v4-728px-Create-a-Table-in-HTML-Step-10.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Tikkan </tr> dan tekan ↵ Enter untuk menutup baris. Pada titik ini, Anda bisa membuka baris lain dengan mengetik <tr> dan menekan ↵ Enter , menambahkan sel individu, dan kemudian menutup baris.
  11. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1b\/Create-a-Table-in-HTML-Step-11.jpg\/v4-460px-Create-a-Table-in-HTML-Step-11.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1b\/Create-a-Table-in-HTML-Step-11.jpg\/v4-728px-Create-a-Table-in-HTML-Step-11.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Di bawah baris akhir tabel, tikkan </table> . Langkah ini menandakan akhir dari tabel.
  12. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/4a\/Create-a-Table-in-HTML-Step-12.jpg\/v4-460px-Create-a-Table-in-HTML-Step-12.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/4a\/Create-a-Table-in-HTML-Step-12.jpg\/v4-728px-Create-a-Table-in-HTML-Step-12.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Tabel seharusnya tampak seperti ini: [1]
    • <table>
    • <tr>
    • <th>Hari</th>
    • <th>Bulan</th>
    • <th>Tahun</th>
    • </tr>
    • <tr>
    • <td>4</td>
    • <td>Maret</td>
    • <td>1990</td>
    • </tr>
    • <tr>
    • <td>27</td>
    • <td>Juli</td>
    • <td>1993</td>
    • </tr>
    • </table>
  13. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/5f\/Create-a-Table-in-HTML-Step-13.jpg\/v4-460px-Create-a-Table-in-HTML-Step-13.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/5f\/Create-a-Table-in-HTML-Step-13.jpg\/v4-728px-Create-a-Table-in-HTML-Step-13.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Tekan Ctrl + S (Windows) atau ⌘ Command + S (Mac) untuk menyimpan dokumen, kemudian nama dokumen untuk dokumen dan klik Save ketika diminta.
    Iklan
Bagian 2
Bagian 2 dari 2:

Menambahkan Pengubah Tabel

PDF download Unduh PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/4f\/Create-a-Table-in-HTML-Step-14.jpg\/v4-460px-Create-a-Table-in-HTML-Step-14.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/4f\/Create-a-Table-in-HTML-Step-14.jpg\/v4-728px-Create-a-Table-in-HTML-Step-14.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Ganti label <table> di bagian atas lembar dengan <table , lalu tikkan style="width:100%"> ke dalam label. Pastikan Anda membubuhkan spasi antara " table " dan " style ".
    • Hasil akhirnya akan tampak seperti ini: <table style="width:100%">
    • Anda bisa bereksperimen dengan persentasenya. Sebagai contoh, tikkan 50 alih-alih 100 untuk membuat tabel berlebar separuh.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/65\/Create-a-Table-in-HTML-Step-15.jpg\/v4-460px-Create-a-Table-in-HTML-Step-15.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/65\/Create-a-Table-in-HTML-Step-15.jpg\/v4-728px-Create-a-Table-in-HTML-Step-15.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Bubuhkan spasi di tabel. Buat spasi pada akhir bagian paling atas dokumen di atas label <table> , kemudian lakukan langkah-langkah berikut:
    • Tikkan <style> dan tekan ↵ Enter .
    • Tikkan table, th, td { dan tekan ↵ Enter .
    • Tikkan border: 1px solid black; dan tekan ↵ Enter .
    • Tikkan border-collapse: collapse; dan tekan ↵ Enter . Lewatkan baris ini jika Anda border memiiki dua garis alih-alih satu.
    • Tikkan } dan tekan ↵ Enter .
    • Tikkan </style> dan tekan ↵ Enter .
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/fe\/Create-a-Table-in-HTML-Step-16.jpg\/v4-460px-Create-a-Table-in-HTML-Step-16.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/fe\/Create-a-Table-in-HTML-Step-16.jpg\/v4-728px-Create-a-Table-in-HTML-Step-16.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Buat spasi persis di bawah label <table> , kemudian lakukan langkah-langkah berikut:
    • Tikkan <caption>
    • Tikkan teks yang ingin digunakan (misalnya Ulanh Tahun )
    • Type in </caption> dan tekan ↵ Enter .
      • Hasil akhir akan tampak seperti ini: <caption>Ulang Tahun</caption>
    Iklan

Tips

  • Sebaiknya Anda mengindenkan bagian kode yang berhubungan sehingga bisa direferensikan kemudian dengan mudah. Sebagai contoh, Anda bisa mengindenkan seluruh bagian sel.
  • Untuk mencetaktebalkan teks, Anda bisa membubuhkan label <b></b> di sekeliling teks yang ingin diolah. Sebagai contoh, untuk membuat Jumlah Tahun menjadi Jumlah Tahun , tikkan <b>Jumlah Tahun</b> dalam editor teks.
Iklan

Peringatan

  • Selalu ingat untuk menutup perintah.
Iklan

wikiHow Terkait

Cara
Memperbesar Volume Komputer
Cara
Mengatur Komputer untuk Mengakses LAN
Cara
Membuka Berkas JPEG
Cara
Mematikan Komputer Secara Otomatis pada Waktu Tertentu
Cara
Menghubungkan Perangkat Audio ke Komputer
Cara
Menghubungkan Printer ke Komputer Anda
Cara
Memperbaiki Laptop yang Tidak Mengisi Daya
Cara
Mengatur Kecerahan Layar di Komputer Windows 7
Cara
Membuat Simbol Derajat
Cara
Menghubungkan Laptop ke Proyektor
Cara
Menghubungkan Headset ke PC
Cara
Mengetahui Kata Sandi Akun Milik Orang Lain
Cara
Mengetikkan Simbol pada Laptop
Cara
Menonaktifkan Tombol Function
Iklan

Referensi

  1. ↑ https://www.w3schools.com/html/html_tables.asp

Tentang wikiHow ini

Bahasa lain
Halaman ini telah diakses sebanyak 4.780 kali.

Apakah artikel ini membantu Anda?

Iklan