{"id":1714,"date":"2023-01-14T04:27:40","date_gmt":"2023-01-14T04:27:40","guid":{"rendered":"https:\/\/imilkom.usu.ac.id\/?p=1714"},"modified":"2023-01-14T04:29:09","modified_gmt":"2023-01-14T04:29:09","slug":"imilkom-belajar-6-membuat-tabel-pada-html","status":"publish","type":"post","link":"https:\/\/imilkom.usu.ac.id\/?p=1714","title":{"rendered":"IMILKOM BELAJAR \u2013 #6 MEMBUAT TABEL PADA HTML"},"content":{"rendered":"\n<p>Halo gengs wherever you are , and whenever you are. Kembali bersama saia di IMILKOM Belajar. Nah setelah kita kemarin bahas HTML dan bahas sedikit nih tentang CSS. Nah sekarang kita akan belajar gimana sih cara membuat tabel di HTML. Tau ga sih pembuatan tabel itu sangat penting lo IMILKOM-ers. Karena tabel merupakan salah satu bentuk penyajian data dan informasi yang paling umum digunakan. Tabel dalam HTML digunakan untuk menyajikan data dalam bentuk baris dan kolom. Dalam tutorial ini, kita akan belajar cara membuat tabel dalam HTML dan menambahkan beberapa fitur seperti judul tabel, baris dan kolom, dan bahkan memberikan gaya CSS.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"500\" src=\"https:\/\/imilkom.usu.ac.id\/wp-content\/uploads\/2023\/01\/gambaeyyy.jpg\" alt=\"\" class=\"wp-image-1725\" srcset=\"https:\/\/imilkom.usu.ac.id\/wp-content\/uploads\/2023\/01\/gambaeyyy.jpg 750w, https:\/\/imilkom.usu.ac.id\/wp-content\/uploads\/2023\/01\/gambaeyyy-300x200.jpg 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>Yuk lah ah langsung bahas step by step bagaimana cara membuat tabel dalam HTML. Check it out.<\/p>\n\n\n\n<p>Langkah 1: Membuat struktur tabel untuk membuat tabel dalam HTML<\/p>\n\n\n\n<p>Dalam membuat tabel dalam HTML kita harusmenggunakan tag &lt;table&gt;. Tag ini akan menandakan awal dari tabel yang akan kita buat. Selanjutnya, kita dapat menambahkan baris dan kolom dengan menggunakan tag &lt;tr&gt; dan &lt;td&gt; (untuk baris dan kolom masing-masing).<\/p>\n\n\n\n<p>Contoh :<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"636\" height=\"350\" src=\"https:\/\/imilkom.usu.ac.id\/wp-content\/uploads\/2023\/01\/image-1.png\" alt=\"\" class=\"wp-image-1716\" srcset=\"https:\/\/imilkom.usu.ac.id\/wp-content\/uploads\/2023\/01\/image-1.png 636w, https:\/\/imilkom.usu.ac.id\/wp-content\/uploads\/2023\/01\/image-1-300x165.png 300w\" sizes=\"(max-width: 636px) 100vw, 636px\" \/><\/figure>\n\n\n\n<p>Langkah 2: Menambahkan Judul Tabel <\/p>\n\n\n\n<p>Kalau tabel perlu judul kan guys, tabel juga perlu kejelasan tidak seperti statusmu. Untuk menambahkan judul tabel,kita dapat menggunakan tag &lt;caption&gt;. Tag ini harus ditambahkan setelah tag &lt;table&gt; dan sebelum tag &lt;tr&gt;.<\/p>\n\n\n\n<p>Contoh:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"453\" height=\"336\" src=\"https:\/\/imilkom.usu.ac.id\/wp-content\/uploads\/2023\/01\/image-2.png\" alt=\"\" class=\"wp-image-1717\" srcset=\"https:\/\/imilkom.usu.ac.id\/wp-content\/uploads\/2023\/01\/image-2.png 453w, https:\/\/imilkom.usu.ac.id\/wp-content\/uploads\/2023\/01\/image-2-300x223.png 300w\" sizes=\"(max-width: 453px) 100vw, 453px\" \/><\/figure><\/div>\n\n\n\n<p>Langkah 3: Menambahkan Gaya CSS<\/p>\n\n\n\n<p>&nbsp;Untuk memberikan gaya dan style pada tabel,kita dapat menambahkan atribut &#8220;class&#8221; atau &#8220;id&#8221; pada tag&lt;table&gt;. Kemudian, kita dapat menambahkan gaya pada CSS dengan menyebut class atau id tersebut.<\/p>\n\n\n\n<p>Contoh :<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"436\" height=\"303\" src=\"https:\/\/imilkom.usu.ac.id\/wp-content\/uploads\/2023\/01\/image-4.png\" alt=\"\" class=\"wp-image-1719\" srcset=\"https:\/\/imilkom.usu.ac.id\/wp-content\/uploads\/2023\/01\/image-4.png 436w, https:\/\/imilkom.usu.ac.id\/wp-content\/uploads\/2023\/01\/image-4-300x208.png 300w\" sizes=\"(max-width: 436px) 100vw, 436px\" \/><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"436\" height=\"186\" src=\"https:\/\/imilkom.usu.ac.id\/wp-content\/uploads\/2023\/01\/image-5.png\" alt=\"\" class=\"wp-image-1720\" srcset=\"https:\/\/imilkom.usu.ac.id\/wp-content\/uploads\/2023\/01\/image-5.png 436w, https:\/\/imilkom.usu.ac.id\/wp-content\/uploads\/2023\/01\/image-5-300x128.png 300w\" sizes=\"(max-width: 436px) 100vw, 436px\" \/><\/figure><\/div>\n\n\n\n<p>Congratulation, kalian udah berhasil membuat tabel dalam HTML. Chukae. Gimana mudah kan??? Tinggal sat set sat set Udah, tinggal ikutin aja tutorial ini. Nah sekian dulu ya guys buat IMILKOM Belajar minggu ini. See you next week guys. Dan selamat mencoba<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Halo gengs wherever you are , and whenever you are. Kembali bersama saia di IMILKOM Belajar. Nah setelah kita kemarin bahas HTML dan bahas sedikit nih tentang CSS. Nah sekarang&hellip;<\/p>\n","protected":false},"author":2,"featured_media":1721,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[15,3],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/imilkom.usu.ac.id\/index.php?rest_route=\/wp\/v2\/posts\/1714"}],"collection":[{"href":"https:\/\/imilkom.usu.ac.id\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/imilkom.usu.ac.id\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/imilkom.usu.ac.id\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/imilkom.usu.ac.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1714"}],"version-history":[{"count":2,"href":"https:\/\/imilkom.usu.ac.id\/index.php?rest_route=\/wp\/v2\/posts\/1714\/revisions"}],"predecessor-version":[{"id":1726,"href":"https:\/\/imilkom.usu.ac.id\/index.php?rest_route=\/wp\/v2\/posts\/1714\/revisions\/1726"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/imilkom.usu.ac.id\/index.php?rest_route=\/wp\/v2\/media\/1721"}],"wp:attachment":[{"href":"https:\/\/imilkom.usu.ac.id\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1714"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/imilkom.usu.ac.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1714"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/imilkom.usu.ac.id\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1714"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}