Cara Membuat Tabel di HTML

Unduh PDF

Unduh PDF

Dalam Artikel Ini:

Membuat Tabel

Menambahkan Pengubah Tabel

Tip dan Peringatan

Artikel Terkait

Referensi

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

Langkah

Bagian 1

Bagian 1 dari 2:

Membuat Tabel

Unduh PDF

1. 
   1
   Buka program pengeditan teks. Biasanya Anda akan memakai program Notepad pada Windows atau TextEdit pada Mac. Berikut cara menemukan program ini:

   • Windows – Buka Start
     
     , tikkan notepad pada Start, dan klik Notepad di bagian atas jendela.
   • Mac – Buka Spotlight
     
     , tikkan textedit, dan klik TextEdit di bawah kolom pencarian Spotlight.
2. 
   2
   Tikkan <table> dan tekan ↵ Enter. 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. 
   3
   Tikkan <tr> dan tekan ↵ Enter. Perintah ini menandakan Anda akan membuat elemen khusus pada tabel.
4. 
   4
   Tambahkan kolom ke tabel. 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. 
   5
   Tambahkan kolom. 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. 
   6
   Tikkan </tr> dan tekan ↵ Enter. Perintah ini menandakan semua tabel kolom sudah tercipta dan menutup bagian kode tabel tersebut.
7. 
   7
   Tikkan <tr> sekali lagi, dan tekan ↵ Enter. Sekarang Anda akan menambahkan baris ke tabel.
8. 
   8
   Tambahkan sel ke tabel. 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. 
   9
   Tambahkan lebih banyak sel pada tabel. 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. 
    10
    Tutup baris saat ini. 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. 
    11
    Tutup tabel. Di bawah baris akhir tabel, tikkan </table>. Langkah ini menandakan akhir dari tabel.
12. 
    12
    Ulas kembali tabel ini. Tabel seharusnya tampak seperti ini:

    • <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. 
    13
    Simpan hasil kerja. 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

Unduh PDF

1. 
   1
   Lebarkan tabel. 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. 
   2
   Buat border untuk tabel. 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. 
   3
   Tambahkan label untuk tabel. 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