{"id":4017,"date":"2017-03-26T09:32:47","date_gmt":"2017-03-26T09:32:47","guid":{"rendered":"http:\/\/www.webhozz.com\/blog\/?p=4017"},"modified":"2019-06-25T14:18:01","modified_gmt":"2019-06-25T14:18:01","slug":"membuat-tabel-interaktif-sederhana-menggunakan-css","status":"publish","type":"post","link":"https:\/\/www.webhozz.com\/blog\/membuat-tabel-interaktif-sederhana-menggunakan-css\/","title":{"rendered":"Membuat Tabel Interaktif Sederhana Menggunakan CSS"},"content":{"rendered":"

Assalamualaikum Wr. Wb.<\/p>\n

Kembali bersama Webhozz Blog<\/a>. Alhamdulillah pada postingan ini, saya ingin membagikan ilmu lagi. Oke langsung saja, pada pertemuan kali ini kita akan membuat desain tabel yang menarik. Karena mungkin bisa saja kita bosan dengan tampilan tabel default bawaan html. Jadi untuk menambah keindahannya kita menggunakan CSS.<\/p>\n

\"\"<\/a><\/p>\n

<\/p>\n

Pertama buat file baru, bebas mau kasih nama apa untuk filenya. Kemudian buat struktur HTML seperti di bawah ini. Kita tambahkan tag <title><\/title> dengan kata \u201cTabel CSS\u201d. Maka akan seperti ini.<\/p>\n

\"\"<\/a><\/p>\n

Kedua, Buat struktur tabel pada tag <body><\/body> seperti ini.<\/p>\n

 <\/p>\n

\"\"<\/a><\/p>\n

Jadi, hasilnya akan tampak seperti ini pada umumnya.<\/p>\n

\"\"<\/a><\/p>\n

Oke, kode HTMLnya sudah kita buat. Selanjutnya adalah membuat file CSSnya.<\/p>\n

 <\/p>\n

Ketiga, kita buat script cssnya dan sisipkan pada tag <head><\/head>. Berikut adalah kodenya.<\/p>\n

\"\"<\/a><\/p>\n

Berikut ini adalah source code lengkapnya.<\/p>\n

\n

<!DOCTYPE html><html><\/p>\n

<head><\/p>\n

<title>Tabel CSS<\/title><\/p>\n

 <\/p>\n

<style type=”text\/css”><\/p>\n

table<\/p>\n

{<\/p>\n

border:1px solid black;<\/p>\n

font-family: arial;<\/p>\n

font-size: 20px;<\/p>\n

}<\/p>\n

 <\/p>\n

th<\/p>\n

{<\/p>\n

background-color: #00FF66;<\/p>\n

}<\/p>\n

 <\/p>\n

tr:hover<\/p>\n

{<\/p>\n

background-color: yellow;<\/p>\n

}<\/p>\n

 <\/p>\n

<\/style><\/p>\n

 <\/p>\n

<\/head><\/p>\n

<body><\/p>\n

 <\/p>\n

<table align=”center” border=”1″><\/p>\n

<tr><\/p>\n

<th align=”center”>No.<\/th> <th>Nama<\/th> <th>Alamat<\/th> <th>Pekerjaan<\/th><\/p>\n

<\/tr><\/p>\n

 <\/p>\n

<tr><\/p>\n

<td align=”center”>1<\/td><\/p>\n

<td>Danny Julian Pratama<\/td><\/p>\n

<td>Jln. Sukanegla, Cicaheum<\/td><\/p>\n

<td>Trainer<\/td><\/p>\n

<\/tr><\/p>\n

 <\/p>\n

<tr><\/p>\n

<td align=”center”>2<\/td><\/p>\n

<td>Fahra Natasya<\/td><\/p>\n

<td>Jln. Raya Kopo, Suka Asih<\/td><\/p>\n

<td>Youtuber<\/td><\/p>\n

<\/tr><\/p>\n

 <\/p>\n

<tr><\/p>\n

<td align=”center”>3<\/td><\/p>\n

<td>Iko Uwais<\/td><\/p>\n

<td>Jln. Sukanegla, Cicaheum<\/td><\/p>\n

<td>Aktor Laga<\/td><\/p>\n

<\/tr><\/p>\n

<\/table><\/p>\n

 <\/p>\n

<\/body><\/p>\n

<\/html><\/p>\n

 <\/p>\n<\/div>\n

Setelah itu, saat dijalankan pada browser akan terlihat seperti ini di saat normal.<\/p>\n

\"\"<\/a><\/p>\n

Akan tetapi jika kita arahkan mouse pada salah satu baris, maka baris tersebut akan berubah warna. Begitu pula dengan dengan baris yang lainnya.<\/p>\n

 <\/p>\n

\"\"<\/a><\/p>\n

Dan begitulah akhirnya, tabel css kita yang atraktif sudah jadi. Dengan koding sederhana ini, silahkan kembangkan sesuai kreatifitasmu masing-masing.<\/p>\n

Alhamdulillah, demikianlah tutorial pada postingan kali ini. Silahkan mencoba dimanapun dan kapanpun ada berada. Maaf jika ada kesalahan pada tutorial ini. Insya Allah akan posting tutorial lagi. Demikian dari saya, Walaikumsalam Wr. Wb.<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

Assalamualaikum Wr. Wb. Kembali bersama Webhozz Blog. Alhamdulillah pada postingan ini, saya ingin membagikan ilmu lagi. Oke langsung saja, pada pertemuan kali ini kita akan<\/p>\n","protected":false},"author":16,"featured_media":4024,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[275,114,1467,1465,12,9,139,199,2,1466,1452,10],"class_list":["post-4017","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-belajar-web-design","tag-belajar-web-desain","tag-css","tag-css-keren","tag-dasar-css","tag-desain-website","tag-belajar-html","tag-html-css","tag-html5","tag-kursus-web-design","tag-tabel-interaktif","tag-tutorial-css-dasar","tag-web-design"],"yoast_head":"\nMembuat Tabel Interaktif Sederhana Menggunakan CSS - WebHozz Blog<\/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\/blog\/membuat-tabel-interaktif-sederhana-menggunakan-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Membuat Tabel Interaktif Sederhana Menggunakan CSS - WebHozz Blog\" \/>\n<meta property=\"og:description\" content=\"Assalamualaikum Wr. Wb. Kembali bersama Webhozz Blog. Alhamdulillah pada postingan ini, saya ingin membagikan ilmu lagi. Oke langsung saja, pada pertemuan kali ini kita akan\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webhozz.com\/blog\/membuat-tabel-interaktif-sederhana-menggunakan-css\/\" \/>\n<meta property=\"og:site_name\" content=\"WebHozz Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-03-26T09:32:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-06-25T14:18:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2017\/03\/tamnel.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"300\" \/>\n\t<meta property=\"og:image:height\" content=\"300\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"\" \/>\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\\\/blog\\\/membuat-tabel-interaktif-sederhana-menggunakan-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-tabel-interaktif-sederhana-menggunakan-css\\\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Membuat Tabel Interaktif Sederhana Menggunakan CSS\",\"datePublished\":\"2017-03-26T09:32:47+00:00\",\"dateModified\":\"2019-06-25T14:18:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-tabel-interaktif-sederhana-menggunakan-css\\\/\"},\"wordCount\":475,\"publisher\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-tabel-interaktif-sederhana-menggunakan-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/03\\\/tamnel.jpg\",\"keywords\":[\"belajar web desain\",\"css\",\"CSS Keren\",\"Dasar CSS\",\"desain website\",\"HTML\",\"html css\",\"html5\",\"kursus web design\",\"Tabel Interaktif\",\"Tutorial CSS Dasar\",\"web design\"],\"articleSection\":[\"Belajar Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-tabel-interaktif-sederhana-menggunakan-css\\\/\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-tabel-interaktif-sederhana-menggunakan-css\\\/\",\"name\":\"Membuat Tabel Interaktif Sederhana Menggunakan CSS - WebHozz Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-tabel-interaktif-sederhana-menggunakan-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-tabel-interaktif-sederhana-menggunakan-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/03\\\/tamnel.jpg\",\"datePublished\":\"2017-03-26T09:32:47+00:00\",\"dateModified\":\"2019-06-25T14:18:01+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-tabel-interaktif-sederhana-menggunakan-css\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-tabel-interaktif-sederhana-menggunakan-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-tabel-interaktif-sederhana-menggunakan-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/03\\\/tamnel.jpg\",\"contentUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/03\\\/tamnel.jpg\",\"width\":300,\"height\":300},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-tabel-interaktif-sederhana-menggunakan-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Membuat Tabel Interaktif Sederhana Menggunakan CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/\",\"name\":\"WebHozz Blog\",\"description\":\"Kursus Web & Android di Jakarta Bandung\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#organization\",\"name\":\"WebHozz\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/04\\\/logo-persegi.jpg\",\"contentUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/04\\\/logo-persegi.jpg\",\"width\":442,\"height\":442,\"caption\":\"WebHozz\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/author\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Membuat Tabel Interaktif Sederhana Menggunakan CSS - WebHozz Blog","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\/blog\/membuat-tabel-interaktif-sederhana-menggunakan-css\/","og_locale":"en_US","og_type":"article","og_title":"Membuat Tabel Interaktif Sederhana Menggunakan CSS - WebHozz Blog","og_description":"Assalamualaikum Wr. Wb. Kembali bersama Webhozz Blog. Alhamdulillah pada postingan ini, saya ingin membagikan ilmu lagi. Oke langsung saja, pada pertemuan kali ini kita akan","og_url":"https:\/\/www.webhozz.com\/blog\/membuat-tabel-interaktif-sederhana-menggunakan-css\/","og_site_name":"WebHozz Blog","article_published_time":"2017-03-26T09:32:47+00:00","article_modified_time":"2019-06-25T14:18:01+00:00","og_image":[{"width":300,"height":300,"url":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2017\/03\/tamnel.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Written by":"","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webhozz.com\/blog\/membuat-tabel-interaktif-sederhana-menggunakan-css\/#article","isPartOf":{"@id":"https:\/\/www.webhozz.com\/blog\/membuat-tabel-interaktif-sederhana-menggunakan-css\/"},"author":{"name":"","@id":""},"headline":"Membuat Tabel Interaktif Sederhana Menggunakan CSS","datePublished":"2017-03-26T09:32:47+00:00","dateModified":"2019-06-25T14:18:01+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webhozz.com\/blog\/membuat-tabel-interaktif-sederhana-menggunakan-css\/"},"wordCount":475,"publisher":{"@id":"https:\/\/www.webhozz.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.webhozz.com\/blog\/membuat-tabel-interaktif-sederhana-menggunakan-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2017\/03\/tamnel.jpg","keywords":["belajar web desain","css","CSS Keren","Dasar CSS","desain website","HTML","html css","html5","kursus web design","Tabel Interaktif","Tutorial CSS Dasar","web design"],"articleSection":["Belajar Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.webhozz.com\/blog\/membuat-tabel-interaktif-sederhana-menggunakan-css\/","url":"https:\/\/www.webhozz.com\/blog\/membuat-tabel-interaktif-sederhana-menggunakan-css\/","name":"Membuat Tabel Interaktif Sederhana Menggunakan CSS - WebHozz Blog","isPartOf":{"@id":"https:\/\/www.webhozz.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webhozz.com\/blog\/membuat-tabel-interaktif-sederhana-menggunakan-css\/#primaryimage"},"image":{"@id":"https:\/\/www.webhozz.com\/blog\/membuat-tabel-interaktif-sederhana-menggunakan-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2017\/03\/tamnel.jpg","datePublished":"2017-03-26T09:32:47+00:00","dateModified":"2019-06-25T14:18:01+00:00","breadcrumb":{"@id":"https:\/\/www.webhozz.com\/blog\/membuat-tabel-interaktif-sederhana-menggunakan-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webhozz.com\/blog\/membuat-tabel-interaktif-sederhana-menggunakan-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webhozz.com\/blog\/membuat-tabel-interaktif-sederhana-menggunakan-css\/#primaryimage","url":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2017\/03\/tamnel.jpg","contentUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2017\/03\/tamnel.jpg","width":300,"height":300},{"@type":"BreadcrumbList","@id":"https:\/\/www.webhozz.com\/blog\/membuat-tabel-interaktif-sederhana-menggunakan-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webhozz.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Membuat Tabel Interaktif Sederhana Menggunakan CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.webhozz.com\/blog\/#website","url":"https:\/\/www.webhozz.com\/blog\/","name":"WebHozz Blog","description":"Kursus Web & Android di Jakarta Bandung","publisher":{"@id":"https:\/\/www.webhozz.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webhozz.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webhozz.com\/blog\/#organization","name":"WebHozz","url":"https:\/\/www.webhozz.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2018\/04\/logo-persegi.jpg","contentUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2018\/04\/logo-persegi.jpg","width":442,"height":442,"caption":"WebHozz"},"image":{"@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"","url":"https:\/\/www.webhozz.com\/blog\/author\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/4017","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/comments?post=4017"}],"version-history":[{"count":1,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/4017\/revisions"}],"predecessor-version":[{"id":4025,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/4017\/revisions\/4025"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/media\/4024"}],"wp:attachment":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/media?parent=4017"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/categories?post=4017"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/tags?post=4017"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}