{"id":49,"date":"2019-07-15T11:38:22","date_gmt":"2019-07-15T11:38:22","guid":{"rendered":"https:\/\/www.webhozz.com\/code\/?p=49"},"modified":"2019-09-03T11:55:05","modified_gmt":"2019-09-03T11:55:05","slug":"tabel-html","status":"publish","type":"post","link":"https:\/\/www.webhozz.com\/code\/tabel-html\/","title":{"rendered":"HTML : Tabel"},"content":{"rendered":"\n

Membuat Tabel HTML <\/h4>\n\n\n\n

Tabel dalam HTML ditulis dengan tag <table>.<\/p>\n\n\n\n

Tabel dibagi menjadi baris dengan tag <tr>, yang merupakan singkatan dari baris tabel (Table Row), dan setiap baris dibagi menjadi data sel dengan tag <td>, yang merupakan singkatan dari tabel data (Table Data).<\/p>\n\n\n\n

Tag <td> dapat berisi teks, tautan, gambar, daftar, formulir, tabel lainnya, dll. Berikut contohnya:<\/p>\n\n\n

\n<table border="1">\n    <thead>\n        <tr>\n            <th>No.<\/th>\n            <th>Name<\/th>\n            <th>Email<\/th>\n        <\/tr>\n    <\/thead>\n    <tbody>\n        <tr>\n            <td>1<\/td>\n            <td>John Carter<\/td>\n            <td>johncarter@mail.com<\/td>\n        <\/tr>\n        <tr>\n            <td>2<\/td>\n            <td>Peter Parker<\/td>\n            <td>peterparker@mail.com<\/td>\n        <\/tr>\n        <tr>\n            <td>3<\/td>\n            <td>John Rambo<\/td>\n            <td>johnrambo@mail.com<\/td>\n        <\/tr>\n    <\/tbody>\n<\/table>\n<\/pre><\/div>\n\n\n
Catatan:<\/em><\/strong> Peramban style bawaan browser akan menampilkan teks dalam elemen <th> dengan karakter tebal (bold) dan posisinya di tengah. Tapi, kalian bisa mengganti style sheet default browser dengan menggunakan CSS.<\/p>\n\n\n\n
Tabel Cellpadding dan Cellspacing<\/h4>\n\n\n\n
Atribut cellpadding dan cellspacing digunakan untuk\nmenyesuaikan ruang kosong di dalam tabel.<\/p>\n\n\n\n
  • Cellpadding menyesuaikan ruang kosong antara batas sel tabel dan kontennya.<\/li>
  • Cellspacing menyesuaikan ruang kosong antara sel-sel tabel.<\/li><\/ul>\n\n\n\n
    Berikut contohnya:<\/p>\n\n\n
    \n<table border="1" cellpadding="10" cellspacing="5">\n    <thead>\n        <tr>\n            <th>No.<\/th>\n            <th>Name<\/th>\n            <th>Email<\/th>\n        <\/tr>\n    <\/thead>\n    <tbody>\n        <tr>\n            <td>1<\/td>\n            <td>John Carter<\/td>\n            <td>johncarter@mail.com<\/td>\n        <\/tr>\n        <tr>\n            <td>2<\/td>\n            <td>Peter Parker<\/td>\n            <td>peterparker@mail.com<\/td>\n        <\/tr>\n        <tr>\n            <td>3<\/td>\n            <td>John Rambo<\/td>\n            <td>johnrambo@mail.com<\/td>\n        <\/tr>\n    <\/tbody>\n<\/table>\n<\/pre><\/div>\n\n\n
    Spanning Lebih dari Satu Baris dan Kolom<\/h2>\n\n\n\n
    Spanning memungkinkan kalian untuk memperluas kolom dan\nbaris di beberapa kolom dan baris lainnya.<\/p>\n\n\n\n
    Biasanya, ketika kita membuat sel tabel, kita tidak bisa melewati batas bawah atau atas sel tabel lainnya. Tapi, kalian bisa menggunakan atribut colspan untuk melebarkan beberapa kolom kesamping dan atribut rowspan untuk menggabungkan beberapa baris kebawah dalam sebuah tabel. Berikut contohnya:<\/p>\n\n\n
    \n<table border="1">\n    <tr>\n        <th rowspan="4">Users Info<\/th>\n    <\/tr>\n    <tr>\n        <td>1<\/td>\n        <td>John Carter<\/td>\n        <td>johncarter@mail.com<\/td>\n    <\/tr>\n    <tr>\n        <td>2<\/td>\n        <td>Peter Parker<\/td>\n        <td>peterparker@mail.com<\/td>\n    <\/tr>\n    <tr>\n        <td>3<\/td>\n        <td>John Rambo<\/td>\n        <td>johnrambo@mail.com<\/td>\n    <\/tr>\n<\/table>\n<\/pre><\/div>","protected":false},"excerpt":{"rendered":"
    Membuat Tabel HTML Tabel dalam HTML ditulis dengan tag <table>. Tabel dibagi menjadi baris dengan tag <tr>, yang merupakan singkatan dari baris tabel (Table Row),<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-49","post","type-post","status-publish","format-standard","hentry","category-html"],"yoast_head":"\nBelajar HTML : Tabel - 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\/tabel-html\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Belajar HTML : Tabel - WebHozz Code\" \/>\n<meta property=\"og:description\" content=\"Membuat Tabel HTML Tabel dalam HTML ditulis dengan tag <table>. Tabel dibagi menjadi baris dengan tag <tr>, yang merupakan singkatan dari baris tabel (Table Row),\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webhozz.com\/code\/tabel-html\/\" \/>\n<meta property=\"og:site_name\" content=\"WebHozz Code\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-15T11:38:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-09-03T11:55:05+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\\\/tabel-html\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/tabel-html\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#\\\/schema\\\/person\\\/3b2b79dc317236b0dde4b1fda37263e1\"},\"headline\":\"HTML : Tabel\",\"datePublished\":\"2019-07-15T11:38:22+00:00\",\"dateModified\":\"2019-09-03T11:55:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/tabel-html\\\/\"},\"wordCount\":196,\"articleSection\":[\"HTML\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/tabel-html\\\/\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/tabel-html\\\/\",\"name\":\"Belajar HTML : Tabel - WebHozz Code\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#website\"},\"datePublished\":\"2019-07-15T11:38:22+00:00\",\"dateModified\":\"2019-09-03T11:55:05+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#\\\/schema\\\/person\\\/3b2b79dc317236b0dde4b1fda37263e1\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/tabel-html\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.webhozz.com\\\/code\\\/tabel-html\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/tabel-html\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML : Tabel\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#website\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/\",\"name\":\"WebHozz Code\",\"description\":\"Tutorial Web & 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 HTML : Tabel - 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\/tabel-html\/","og_locale":"en_US","og_type":"article","og_title":"Belajar HTML : Tabel - WebHozz Code","og_description":"Membuat Tabel HTML Tabel dalam HTML ditulis dengan tag <table>. Tabel dibagi menjadi baris dengan tag <tr>, yang merupakan singkatan dari baris tabel (Table Row),","og_url":"https:\/\/www.webhozz.com\/code\/tabel-html\/","og_site_name":"WebHozz Code","article_published_time":"2019-07-15T11:38:22+00:00","article_modified_time":"2019-09-03T11:55:05+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\/tabel-html\/#article","isPartOf":{"@id":"https:\/\/www.webhozz.com\/code\/tabel-html\/"},"author":{"name":"admin","@id":"https:\/\/www.webhozz.com\/code\/#\/schema\/person\/3b2b79dc317236b0dde4b1fda37263e1"},"headline":"HTML : Tabel","datePublished":"2019-07-15T11:38:22+00:00","dateModified":"2019-09-03T11:55:05+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webhozz.com\/code\/tabel-html\/"},"wordCount":196,"articleSection":["HTML"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.webhozz.com\/code\/tabel-html\/","url":"https:\/\/www.webhozz.com\/code\/tabel-html\/","name":"Belajar HTML : Tabel - WebHozz Code","isPartOf":{"@id":"https:\/\/www.webhozz.com\/code\/#website"},"datePublished":"2019-07-15T11:38:22+00:00","dateModified":"2019-09-03T11:55:05+00:00","author":{"@id":"https:\/\/www.webhozz.com\/code\/#\/schema\/person\/3b2b79dc317236b0dde4b1fda37263e1"},"breadcrumb":{"@id":"https:\/\/www.webhozz.com\/code\/tabel-html\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webhozz.com\/code\/tabel-html\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.webhozz.com\/code\/tabel-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webhozz.com\/code\/"},{"@type":"ListItem","position":2,"name":"HTML : Tabel"}]},{"@type":"WebSite","@id":"https:\/\/www.webhozz.com\/code\/#website","url":"https:\/\/www.webhozz.com\/code\/","name":"WebHozz Code","description":"Tutorial Web & 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\/49","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=49"}],"version-history":[{"count":3,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/posts\/49\/revisions"}],"predecessor-version":[{"id":394,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/posts\/49\/revisions\/394"}],"wp:attachment":[{"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/media?parent=49"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/categories?post=49"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/tags?post=49"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}