BELAJAR HTML DASAR CARA MEMBUAT TABEL

Ukuran: px

Mulai penontonan dengan halaman:

Download "BELAJAR HTML DASAR CARA MEMBUAT TABEL"

Sonny Hartanto
6 tahun lalu
Tontonan:

1 BELAJAR HTML DASAR CARA MEMBUAT TABEL Sandira Kurniawan Abstrak Hypertext Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintahperintah HTML. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar internet yang didefinisikan dan dikendalikan penggunaannya oleh word wide web consortium (W3C). Kata Kunci: HTML, Web, Internet

2 Pendahuluan Markup language atau yang kini dikenal sebagai html awalnya diciptakan oleh suatu perusahaan penjual perangkat keras dan lunak yakni IBM atau International Bussiness Machines. Sekitar tahun 1980, IBM menciptakan sebuah bahasa yang menggabungkan tag atau simbol dengan teks dalam sebuah dokumen. Bahasa yang diciptakan oleh IBM tersebut dikenal dengan sebutan markup language atau Generalized markup language (GML). Selanjutnya ditahun 1986, ISO atau International Standart Organization mengeluarkan pernyataan bahwa GML yang kemudian diubah istilahnya menjadi SGML (Standart Generalized Markup Language) ditetapkan sebagai standar dalam membuat berbagai dokumen yang bisa membantu dalam bisnis maupun pekerjaan lainnya. Di tahun 1989, Tim Berners Lee dari organisasi European Organization for Nuclear Research (CERN) mencetuskan ide untuk mencptakan suatu skrip bahasa pemrograman pada suatu dokumen yang kemudian dikenal sebagai html. Html sendiri adalah bagian dari sgml dan Tim Berners Lee diketaui sebagai orang yang menciptakan html. Saat ini penggunaan dan pengembangan html diatur oleh World Wide Web Consortium (W3C) dan versi terakhir dari html yang sekarang digunakan adalah html5 dimana jenis html ini memiliki fitur yang lebih baik dari versi html sebelumnya. Fungsi utama html yang diketahui adalah untuk membuat suatu halaman website yang bisa dibaca dan dipahami oleh pengguna dengan lebih mudah. Seluruh laman website yang ada dalam internet dibuat dengan html dan tidak ada pengecualian. Selain itu html juga berfungsi sebagai penanda teks pada suatu halaman, html ditulis pada suatu halaman dokumen dengan tag atau symbol tertentu dimana symbol dan tag tersebut akan menandain teks menjadi tebal,miring,bergaris tebal dan lain sebagainya, misal jika kita ingin membuat teks menjai teks miring atau italic dalam halaman html dituliskan kode <i>, <b> untuk teks tebal dan <u> untuk bergaris bawah Html juga dapat menampilkan tabel, gambar, video, dan lainnya. Biasanya dalam website atau blog kita tidak bisa langsung meletakkan tabel, gambar maupun video oleh sebab itu komponen tersebut diletakkan pada web dengan menggunakan bahasa html. Pembahasan

3 Beberapa informasi pada website sering ditampilkan dalam bentuk tabel. Tabel adalah sebuah data tabular dalam bentuk grid yang terdiri atas kolom, baris dan sel yang merupakan pertemuan antara kolom dan baris. Penggunaan tabel tentunya menjadikan informasi lebih ringkas dan padat serta membuat orang mudah membaca dan mengerti informasi yang terkandung didalamnya. Selain itu, tampilan data yang diambil dari database pun akan lebih mudah dibaca dan nyaman dilihat jika menggunakan tabel. Melihat kegunaan dari tabel tersebut, tentunya Anda juga harus mempelajari bagaimana cara membuat tabel di HTML. Oleh karena itu, pada pembahasan kali ini, saya akan membahas materi cara membuat tabel di HTML. Anda dapat membuat tabel di dokumen HTML menggunakan tag khusus yang sudah disediakan oleh HTML yaitu dimulai dengan pasangan tag <table>. </table>. Penggunaan tabel pada dokumen HTML tidak tepat Anda gunakan untuk mendesain tata letak elemen elemen dalam sebuah tabel dengan kata lain tidak boleh digunakan untuk layout halaman. Dahulu mungkin sering digunakan untuk mendesain tampilan website, tapi saat ini fungsinya digantikan oleh CSS yang jauh lebih baik dalam hal membuat tampilan website. Adapun tag tag umum yang disediakan HTML untuk membuat sebuah tabel antara lain : Tag table tr th Fungsi digunakan untuk mendefinisikan sebuah tabel dimana sebuah tabel di HTML. merupakan kepanjangan dari table row yang digunakan untuk mendefinisikan baris baris pada suatu tabel. merupakan kepanjangan dari table header yang digunakan untuk mendefinisikan judul pada sel dalam tabel yang berada di bagian paling atas atau paling kiri tabel. Tabel header berada di bagian atas adalah judul kolom tabel, sedangkan tabel header yang terletak di bagian kiri adalah judul baris tabel. td merupakan kepanjangan dari table data yang digunakan untuk mendefinisikan isi tiap sel dalam tabel. Sebuah tabel di HTML dimulai dengan penggunaan tag <tabel> dan diakhiri dengan tag </tabel>. Diantara pasangan tag <tabel> </tabel>, ditulis tag untuk membuat baris pada tabel.

4 Selanjutnya, di masing masing pasangan tag., ditulis di dalamnya kolom kolom menggunakan tag <th> untuk membuat header (induk sel) ataupun tag <td> untuk membuat isi di setiap sel dalam tabel. Berikut contoh kode sederhana membuat tabel di HTML: <!DOCTYPE html> <html> <head> <title>penggunaan Tabel di HTML</title> </head> <body> <table> <th>nama</th> <th>jurusan</th> <th>kelas</th> <td>muhammad Ridho</td> <td>tkj</td> <td>12</td> <td>meilisa Niatur Rahmah</td> <td>mm</td> <td>11</td> <td>johanes Eko Prasetyo</td> <td>rpl</td> <td>10</td> </table> </body> </html> Jika dijalankan di browser, tampilannya seperti ini:

Mungkin Anda bertanya-tanya kenapa tabelnya tidak memiliki garis tepi seperti yang terdapat pada tabel exel. Hal itu dikarenakan tabel tersebut tidak memiliki border (garis tepi/ bingkai).

5 Mungkin Anda bertanya-tanya kenapa tabelnya tidak memiliki garis tepi seperti yang terdapat pada tabel exel. Hal itu dikarenakan tabel tersebut tidak memiliki border (garis tepi/ bingkai). Anda bisa menggunakan atribut border untuk memberi tabel tersebut garis tepi, contoh kode HTMLnya seperti ini: : <!DOCTYPE html> <html> <head> <title>penggunaan Tabel di HTML</title> </head> <body> <table border="1"> <th>nama</th> <th>jurusan</th> <th>kelas</th> <td>muhammad Ridho</td> <td>tkj</td> <td>12</td> <td>meilisa Niatur Rahmah</td>

6 <td>mm</td> <td>11</td> <td>johanes Eko Prasetyo</td> <td>rpl</td> <td>10</td> </table> - </body> </html> Hasilnya di browser seperti ini: Pada gambar diatas, saya memberikan atribut border dengan nilai 1, sehingga tabel tersebut memiliki garis tepi sebesar 1 pixel. Jika tidak ditulis maka tabel tidak memiliki garis tepi. Satu hal lagi yang sering menjadi pertanyaan yaitu mengenai perbedaan antara tag <th> dan tag <td>. Dari penjelasan diatas juga dijelaskan bahwa tag <th> digunakan untuk mendefinisikan judul (cell induk) untuk setiap kolom atau baris yang biasanya ditandai dengan huruf yang dicetak tebal dan berada di tengah seperti teks Nama, Jurusan, dan Kelas. Sedangkan tag <td> hanya mendefinisikan data pada setiap sel tabel yang ditandai dengan bentuk huruf yang normal dan default nya ditulis rata kiri Penutup

Dengan mempelajari cara membuat tabel ini kita kita menjadi lebih mudah untuk membuat berbagai bentuk table seperti membuat form pada website belanja online dan kita juga menjadi lebih tahu tag tag

7 Dengan mempelajari cara membuat tabel ini kita kita menjadi lebih mudah untuk membuat berbagai bentuk table seperti membuat form pada website belanja online dan kita juga menjadi lebih tahu tag tag apa saja yang biasa dipakai untuk membuat sebuah website, sekian artikel pembuatan table ini dan semoga bermanfaat Referensi petanikode.com/html-tabel/ nesabamedia.com/pengertian-dan-fungsi-html/ edyutomo.com/cara-membuat-tabel-dengan-kode-html/ duniailkom.com/belajar-html-cara-membuat-tabel-di-html-tag-table/ bertzzie.com/knowledge/desain-web-dasar/table.html Biografi Nama : Sandira Kurniawan Kelahiran : 1 maret 1994 hobi saya traveling dan saat ini saya bekerja di pt. Bando Indonesia sekaligus menjadi mahasiswa di salah satu perguruan tinggi ditangerang dengan mengambil jurusan system informasi manajemen

dokumen-dokumen yang mirip

PEMROGRAMAN BERBASIS WEB. Part 1,2 HTML. By Rolly Yesputra Sekolah Tinggi Manajemen Informatika dan Komputer Royal Kisaran, 2018

PEMROGRAMAN BERBASIS WEB. Part 1,2 HTML. By Rolly Yesputra Sekolah Tinggi Manajemen Informatika dan Komputer Royal Kisaran, 2018 PEMROGRAMAN BERBASIS WEB Part 1,2 HTML By Rolly Yesputra Sekolah Tinggi Manajemen Informatika dan Komputer Royal Kisaran, 2018 Referensi HTML5, JavaScript, and jquery 24-Hour Trainer, Copyright 2015 by