Tabel data mencantumkan berbagai informasi dalam kolom dan baris agar mudah dibaca. Data biasanya sebagian numerik dengan label teks. Contohnya adalah tabel data yang menunjukkan berapa banyak kalori yang dimakan seseorang setiap hari. Pembuatan tabel data secara online dapat dilakukan dengan HTML atau bahasa browser CSS yang lebih kompleks. Tabel terakhir terlihat seperti tabel data yang dibuat di spreadsheet atau di atas kertas. Satu-satunya perbedaan adalah pengkodean latar belakang, yang tidak terlihat kecuali melihat kode sumbernya. Pengkodean dapat dibuat dengan editor HTML, teks, atau cara lain. Ada banyak situs daring yang menawarkan kemampuan untuk memasukkan data, menetapkan beberapa atribut, dan membuat semua kode tabel untuk Anda. Tabel data online biasanya digunakan sebagai bagian dari halaman Web. Tabel data sering digunakan untuk membuat daftar item dengan kategori, seperti item untuk dijual. Beberapa halaman Web menggunakannya untuk menampilkan statistik untuk informasi. Meskipun tabel data dapat digunakan offline untuk pencetakan atau laporan, biasanya lebih baik menggunakan perangkat lunak spreadsheet, seperti Microsoft Office Excel, yang menawarkan lebih banyak fitur untuk bekerja dengan data. Panduan ini menunjukkan cara membuat tabel data HTML dengan Notepad .
Buka editor HTML atau hanya dokumen teks Notepad biasa untuk memasukkan kode HTML. Notepad berfungsi dengan baik jika Anda terbiasa dengan pengkodean HTML. Editor HTML membuat tugas berulang lebih cepat, tetapi beberapa, seperti Frontpage, menambahkan pengkodean tambahan yang tidak perlu yang dapat memperlambat halaman Web. Hal terbaik untuk dilakukan adalah kode dengan editor HTML terlebih dahulu, lalu kembali dan edit kode dengan tangan untuk membersihkannya.
Tentukan atribut tabel untuk batas, lebar, warna latar belakang, dan warna font. Anda perlu memperhitungkan tata letak halaman Web, lebar, warna, dan atribut lainnya agar tabel mudah dibaca. Anda juga perlu memutuskan berapa banyak baris dan kolom yang dibutuhkan untuk data. Mulailah mendefinisikan atribut tabel. (Contoh kami menunjukkan jumlah kalori yang dimakan saat makan siang dan makan malam pada setiap hari kerja. Kami memerlukan tiga kolom (Hari, Makan Siang, dan Makan Malam) dan tujuh baris (dua untuk label dan satu untuk setiap hari kerja).
Tambahkan batas di sekeliling tabel dan sel data. Perbatasan memisahkan data ke dalam sel agar mudah dilihat. Itu diukur dalam piksel dan dapat diberi nilai 0 untuk tidak menggunakannya. Perbatasan satu atau dua piksel umumnya baik-baik saja. Tag untuk perbatasan adalah
bgcolor=border=”CHOSEN_BORDER_WIDTH”
Warna tepi dapat diubah dengan tag
bordercolor=”CHOSEN_COLOR”
yang memanfaatkan istilah warna dasar, seperti kode warna heksadesimal merah atau hitam atau enam digit. Heksadesimal menawarkan lebih banyak warna. Contoh kita menggunakan border=”2″ dan bordercolor=”black”.
Tentukan lebar seluruh tabel. Itu diukur dalam piksel atau persen dari ukuran layar. Piksel bersifat pasti dan persentase memungkinkan tabel menyesuaikan dengan ukuran layar yang berbeda. Cobalah untuk menilai lebar berdasarkan lebar data di seluruh baris. Jika nanti ternyata meja terlalu tipis atau lebar, bisa diubah. Contoh kita menggunakan width=”175″.
Atur warna latar belakang sel data. Ini berbeda dari warna latar belakang halaman, yang dapat memberikan kontras yang baik. Tagnya adalah
bgcolor=”CHOSEN_COLOR”
seperti warna border. Contoh kita menggunakan bgcolor=”white”.
Atur warna font teks dalam sel. Pastikan warnanya kontras dengan latar belakang, sehingga mudah dibaca. Terang pada gelap atau gelap pada terang selalu bekerja paling baik. Tagnya adalah
font=”CHOSEN_COLOR”
Contoh kita adalah font=”black”, yang sangat kontras dengan latar belakang putih.
Tulis tag tabel lengkap di antara panah kiri dan kanan dengan spasi di antara atribut tag dan diawali dengan tag tabel di depan. Urutan tag tidak masalah, asalkan “meja” ada di depan.
<meja border=” 2″ width=”175″ bgcolor=”putih” bordercolor=”hitam” font=”hitam”>
Tentukan lebar kolom. Lebar setiap kolom tergantung pada lebar seluruh tabel. Ambil lebar tabel dan bagi dengan jumlah sel untuk mendapatkan kolom berukuran sama. Jika perlu, sesuaikan lebar kolom, tetapi totalnya tidak boleh melebihi lebar tabel. Ketika satu lebar sel berubah, sel lainnya perlu disesuaikan dengan total lebar tabel. (Contoh kita memiliki lebar 175 dan tiga kolom per baris, jadi pembagian rata sekitar 59. Pembagian sebenarnya adalah 70, 60, 40.)
Mulailah menambahkan data Anda. Pertama, buat baris baru dan tambahkan baris tabel dengan kode <tr>. Selanjutnya, tambahkan tag data tabel
<td width=”CELL_DATA_IN_PIXELS”>
Masukkan data Anda untuk sel; menggunakan kode ini untuk mewakili sel kosong:
&nbsp;
Tutup sel dengan tag </td>. Tag bordercolor digunakan untuk menentukan warna batas sel, jika diinginkan. Jika dibiarkan, warna batas tabel default akan digunakan. Kode sel pertama contoh kita adalah:
<td width=”75″>&nbsp;</td>
Ulangi pembuatan sel data tabel, masing-masing pada baris baru, hingga semua sel dalam baris selesai. Kemudian akhiri baris dengan tag </tr>. Mulailah baris berikutnya dengan proses yang sama, dimulai dengan tag <tr> lagi.
Tutup kode tabel dengan tag with </table>. Kode tabel terakhir kita, jika diakhiri setelah dua baris data, ada di bawah.
<meja border=”2″ width=”175″ bgcolor=”putih” bordercolor=”hitam” font=”hitam”>
<tr>
<td width=”75″>&nbsp;</td>
<td width=”60″>KALORI</td>
<td width=”40″>&nbsp;</td>
</tr>
<tr>
<td width=”75″>Hari</td>
<td width=”60″>Makan siang</td>
<td width=”40″>Makan malam</td>
</tr>
<tr>
<td width=”75″>Senin</td>
<td width=”60″>450</td>
<td width=”40″>800</td>
</tr>
<td width=”75″>Selasa</td>
<td width=”60″>600</td>
<td width=”40″>720</td>
</tr>
</tabel>
-
- Editor HTML atau Notepad
- Data
John Gugi
