{"id":126,"date":"2019-07-24T07:10:32","date_gmt":"2019-07-24T07:10:32","guid":{"rendered":"https:\/\/www.webhozz.com\/code\/?p=126"},"modified":"2019-09-03T11:50:50","modified_gmt":"2019-09-03T11:50:50","slug":"css-table","status":"publish","type":"post","link":"https:\/\/www.webhozz.com\/code\/css-table\/","title":{"rendered":"CSS : Table"},"content":{"rendered":"\n<p>Tabel biasanya digunakan untuk menyajikan data tabular.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Styling Tabel dengan CSS<\/h4>\n\n\n\n<p>Saat kalian membuat tabel HTML tanpa style atau atribut apa\npun, browser akan menampilkannya tanpa border. Mendesain sebuah tabel dengan\nCSS dapat memperindah tampilannya secara drastis.<\/p>\n\n\n\n<p>Bagian berikut akan menunjukkan kepada kalian bagaimana mengontrol layout dan menampilkan elemen tabel menggunakan CSS untuk membuat tabel yang bagus.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Menambahkan Border ke Tabel<\/h4>\n\n\n\n<p>Properti border CSS adalah cara terbaik dalam memberikan border\nuntuk tabel.<\/p>\n\n\n\n<p>Contoh berikut untuk menetapkan black border untuk elemen &lt;table&gt;, &lt;th&gt;, dan &lt;td&gt;.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\ntable, th, td {\n    border: 1px solid black;\n}\n<\/pre><\/div>\n\n\n<h4 class=\"wp-block-heading\">Collapsing Tabel Border<\/h4>\n\n\n\n<p>Fungsi dari border-collapse adalah untuk membuat model border yang spesifik pada table.<\/p>\n\n\n\n<p>Biasanya jika kita ingin membuat border pada table kita tinggal beri properti border saja sudah cukup, tetapi ada satu properti yang memungkinkan memberi border pada table yang lebih spesifik lagi modelnya. Kalian bisa mengecilkan tabel border yang terpisah menjadi satu dengan menggunakan properti border-collapse pada elemen &lt;table&gt;:<\/p>\n\n\n\n<p>Aturan style dalam contoh berikut ini akan mengecilkan sel tabel border serta menerapkan black border satu piksel pada tabel dan elemen sel tabel tersebut. Berikut contohnya:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\ntable {\n    border-collapse: collapse;\n}\ntable, th, td {\n    border: 1px solid black;\n}\n<\/pre><\/div>\n\n\n<p>Kalian juga dapat menghapus ruang antara batas sel tabel dengan menetapkan nilai properti <a href=\"https:\/\/www.tutorialrepublic.com\/css-reference\/css-border-spacing-property.php\">border-spacing<\/a> CSS menjadi 0. Namun, itu hanya menghilangkan ruang tetapi tidak menggabungkan border seperti ketika kalian mengatur <code>border-collapse<\/code>&nbsp;ke&nbsp;<code>collapse<\/code>.<\/p>\n\n\n\n<p><strong><em>Catatan:<\/em><\/strong>  Jika &lt;! DOCTYPE&gt; tidak ditentukan dalam dokumen HTML, maka properti CSS border-collapse dapat menghasilkan hasil yang tidak sesuai harapan.  <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Menyesuaikan Spasi di dalam Tabel<\/h4>\n\n\n\n<p>Secara default, browser membuat sel tabel cukup besar untuk memuat data dalam sel. Untuk membuatnya menjadi lebih besar lagi kalian dapat menggunakan properti padding CSS, seperti berikut ini:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\nth, td {\n    padding: 15px;\n}\n<\/pre><\/div>\n\n\n<p>Kalian juga bisa menyesuaikan jarak antar border sel menggunakan\nproperti border-spacing CSS, jika border tabel kalian dipisahkan (default-nya).<\/p>\n\n\n\n<p>Aturan style berikut menerapkan jarak 10 piksel antara semua border dalam tabel:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\ntable {\n    border-spacing: 10px;\n}\n<\/pre><\/div>\n\n\n<h4 class=\"wp-block-heading\">Menangani Empty Cell<\/h4>\n\n\n\n<p>Properti empty-cells&nbsp;menentukan apakah perbatasan harus ditampilkan jika sel tidak memiliki data (kosong).<\/p>\n\n\n\n<p>Properti ini dapat menggunakan salah satu dari tiga nilai:  <code>show<\/code>,&nbsp;<code>hide<\/code>&nbsp;or&nbsp;<code><a href=\"https:\/\/www.tutorialrepublic.com\/definitions.php#inherit\">inherit<\/a><\/code>. <\/p>\n\n\n\n<p>Aturan style berikut menyembunyikan sel kosong di elemen tabel.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\ntable {\n    border-collapse: separate;\n    empty-cells: hide;\n}\n<\/pre><\/div>","protected":false},"excerpt":{"rendered":"<p>Tabel biasanya digunakan untuk menyajikan data tabular. Styling Tabel dengan CSS Saat kalian membuat tabel HTML tanpa style atau atribut apa pun, browser akan menampilkannya<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-126","post","type-post","status-publish","format-standard","hentry","category-css"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Belajar CSS : Table - WebHozz Code<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webhozz.com\/code\/css-table\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Belajar CSS : Table - WebHozz Code\" \/>\n<meta property=\"og:description\" content=\"Tabel biasanya digunakan untuk menyajikan data tabular. Styling Tabel dengan CSS Saat kalian membuat tabel HTML tanpa style atau atribut apa pun, browser akan menampilkannya\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webhozz.com\/code\/css-table\/\" \/>\n<meta property=\"og:site_name\" content=\"WebHozz Code\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-24T07:10:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-09-03T11:50:50+00:00\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/css-table\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/css-table\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#\\\/schema\\\/person\\\/3b2b79dc317236b0dde4b1fda37263e1\"},\"headline\":\"CSS : Table\",\"datePublished\":\"2019-07-24T07:10:32+00:00\",\"dateModified\":\"2019-09-03T11:50:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/css-table\\\/\"},\"wordCount\":336,\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/css-table\\\/\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/css-table\\\/\",\"name\":\"Belajar CSS : Table - WebHozz Code\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#website\"},\"datePublished\":\"2019-07-24T07:10:32+00:00\",\"dateModified\":\"2019-09-03T11:50:50+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#\\\/schema\\\/person\\\/3b2b79dc317236b0dde4b1fda37263e1\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/css-table\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.webhozz.com\\\/code\\\/css-table\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/css-table\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS : Table\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#website\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/\",\"name\":\"WebHozz Code\",\"description\":\"Tutorial Web &amp; Pemrograman Indonesia\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#\\\/schema\\\/person\\\/3b2b79dc317236b0dde4b1fda37263e1\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"url\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/author\\\/dody\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Belajar CSS : Table - WebHozz Code","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webhozz.com\/code\/css-table\/","og_locale":"en_US","og_type":"article","og_title":"Belajar CSS : Table - WebHozz Code","og_description":"Tabel biasanya digunakan untuk menyajikan data tabular. Styling Tabel dengan CSS Saat kalian membuat tabel HTML tanpa style atau atribut apa pun, browser akan menampilkannya","og_url":"https:\/\/www.webhozz.com\/code\/css-table\/","og_site_name":"WebHozz Code","article_published_time":"2019-07-24T07:10:32+00:00","article_modified_time":"2019-09-03T11:50:50+00:00","author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webhozz.com\/code\/css-table\/#article","isPartOf":{"@id":"https:\/\/www.webhozz.com\/code\/css-table\/"},"author":{"name":"admin","@id":"https:\/\/www.webhozz.com\/code\/#\/schema\/person\/3b2b79dc317236b0dde4b1fda37263e1"},"headline":"CSS : Table","datePublished":"2019-07-24T07:10:32+00:00","dateModified":"2019-09-03T11:50:50+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webhozz.com\/code\/css-table\/"},"wordCount":336,"articleSection":["CSS"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.webhozz.com\/code\/css-table\/","url":"https:\/\/www.webhozz.com\/code\/css-table\/","name":"Belajar CSS : Table - WebHozz Code","isPartOf":{"@id":"https:\/\/www.webhozz.com\/code\/#website"},"datePublished":"2019-07-24T07:10:32+00:00","dateModified":"2019-09-03T11:50:50+00:00","author":{"@id":"https:\/\/www.webhozz.com\/code\/#\/schema\/person\/3b2b79dc317236b0dde4b1fda37263e1"},"breadcrumb":{"@id":"https:\/\/www.webhozz.com\/code\/css-table\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webhozz.com\/code\/css-table\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.webhozz.com\/code\/css-table\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webhozz.com\/code\/"},{"@type":"ListItem","position":2,"name":"CSS : Table"}]},{"@type":"WebSite","@id":"https:\/\/www.webhozz.com\/code\/#website","url":"https:\/\/www.webhozz.com\/code\/","name":"WebHozz Code","description":"Tutorial Web &amp; Pemrograman Indonesia","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webhozz.com\/code\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.webhozz.com\/code\/#\/schema\/person\/3b2b79dc317236b0dde4b1fda37263e1","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g","caption":"admin"},"url":"https:\/\/www.webhozz.com\/code\/author\/dody\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/posts\/126","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/comments?post=126"}],"version-history":[{"count":4,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/posts\/126\/revisions"}],"predecessor-version":[{"id":380,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/posts\/126\/revisions\/380"}],"wp:attachment":[{"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/media?parent=126"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/categories?post=126"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/tags?post=126"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}