dew's website: Table pada HTML

Cara membuat table pada HTML

Hai hai jumpa lagi di postingan Dewi yang tentunya kece badai dan bikin kawan pembaca semua nggak bosen buat kita sama-sama belajar mengenai HTML. Di postingan kali ini kita bakal mempelajari cara membuat table dalam HTML. Tentunya kali ini kita nggak perlu lagi dong ngebahas dari awal apa itu yang namanya HTML, soalnya sudah kita bahas di postingan sebelumnya. Oh ya guys, sebelum kita bahas cara membuat HTML alangkah lebih baiknya kita pahami terlebih dahulu berbagai jenis mark up yang akan kita gunakan dalam pembuatan HTML seperti gambar berikut ini. Cekidot!

Nah gambar diatas adalah contoh table yang mesti kita tiru. Gampang kan? Gampang dong, hehehe :D Jadi dari hasil analisis gambar yang rada burem tersebut berhubung motonya pake HP, dapat kita simpulkan bahwa:

- Pertama, kita harus bikin 7 baris dan 4 kolom.
- Selain itu pada baris pertama dan kedua,tepatnya pada kolom pertama yang berbunyi “NO” dan “Nama Mahasiswa” harus kita berikan tambahan perintah ROWSPAN. Apa sih rowspan itu? Eits, tunggu dulu. Bakal kita bahas setelah yang mau lewat berikut ini, hehe.
- Ketiga pada keterangan “Nilai Tugas” kita tambahkan perintah COLSPAN. Inget loh ya, colspan, bukan conterpain (apasih Dew-_-).
- Nah yang terakhir enak tuh, kita tinggal bikin perintah buat bikin table seperti biasa.
- Oh iya jangan lupa, dalam script jangan sekali-sekali typo buat nulis table menjadi tabel. Karena kode pemrograman yang kita pakai itu bahasa Inggris :’) sedih ya, hari gini masih dijajah aja.

OKE LANJUUUUTTTTTT

Jadi mark up adalah informasi tambahan yang ditempatkan pada sebuah text untuk menjelaskan bagaimana teks tersebut diinpretasikan. Perbedaan mark up pembuka dan penutup itu terdapat pada symbol blackslash(/).

Sebagai contoh : <p> Dewi Anggraini</p> mark up yang di dalam kurung siku tersebut merupakan “p” yaitu singkatan dari “paragraph” digunakan sebagai markah pembuka.

Nah, kalau tag/mark up/markah yang akan kita gunakan seperti script di bawah ini itu ada:

Cara membuat tabel

Yang utama ada tag table → <table> adalah untuk membuat table.

<tr> atau table rows adalah untuk membuat baris pada table.

<td> atau disebut table data adalah untuk membuat kolom pada table.

Nah kolom-kolom hasil dari tr dan td ini disebut dengan table cell yaitu sebagai lokasi dimana kita memasukkan data-data yang akan di tampilkan.

Mengatur lebar dan tinggi tabel.

Kita bisa menggunakan atribut width. Untuk lebar dan tinggi dari table kita gunakan atribut style dengan properti width dan height. (lihat script nomor 9 kita beri lebar 45%)

Menggabungkan kolom pada tabel

Terdapat dua buah atribut yang dapat kita gunakan untuk menggabungkan kolom dan baris layaknya merge cell pada Microsoft Word. Table Cell atau baris dan kolom dari tabel tersebut dapat kita gabungkan sesuai kebutuhan bentuk tabel yang diinginkan. Untuk menggabungkan kolom dalam tabel digunakan atribut colspan. Sedangkan untuk menggabungkan baris dalam tabel digunakan atribut rowspan. (perhatikan abjad ‘a’ pada script)

Mengatur jarak kolom pada table

Nah untuk mengatur posisi cell dalam tabel digunakan atribut cellpadding dan cellspacing. Cellpadding adalah untuk pengaturan sisi dari bagian dalam cell. Sedangkan Cellspacing adalah pengaturan sisi dari bagian luar cell. (perhatikan tambahan markah pada script no.9)

Oke cukup sekian pengenalan tag nya. Sekarang silahkan pahami script table di bawah. Untuk memahami pembagian kolom, saya membedakannya dengan mewarnai font perkolom agar dapat memudahkkan. Selamat mempelajari!!!

1.      <!DOCTYPE html>
2.      <html>
3.      <style>
table {
font-family: verdana;
line-height: 20px;
}
4.      </style>
5.      <head>
<title>Table</title>
6.      </head>
7.      <body>
8.      <p><font size="5" face="arial"><b>Data Nilai Mahasiswa</font></b></p>
9.      <table style="width:45%" border="1" cellpadding="3" cellspacing="0">

a. <tr>

<td rowspan="2" style="width:29%"><b>Nama Mahasiswa</b></td>

<td colspan="2" align="center"><b>Nilai Tugas</b></td>

</tr>

b. <tr>

</tr>

c. <tr>

<td>Bonaventura</td>

</tr>

d. <tr>

<td> Romagnoli</td>

</tr>

e. <tr>

<td>Bartolaci</td>

</tr>

f. <tr>

<td>Antoneli</td>

</tr>

g. <tr>

</tr>

</table>

1 </body>

1 </html>

Dan terakhir, output dari script di atas adalah sebagai berikut

JENG JENGGG!!!

SELAMAT MENCOBAAAAA :)))

dew's website

Rabu, 23 Maret 2016

Table pada HTML

Cara membuat table pada HTML

Tidak ada komentar:

Posting Komentar