{"id":9537,"date":"2021-01-21T14:51:08","date_gmt":"2021-01-21T19:51:08","guid":{"rendered":"http:\/\/local.brightwhiz\/?p=9537"},"modified":"2021-12-04T05:37:51","modified_gmt":"2021-12-04T05:37:51","slug":"set-cellspacing-cellpadding-html-tables-css","status":"publish","type":"post","link":"http:\/\/local.brightwhiz\/set-cellspacing-cellpadding-html-tables-css\/","title":{"rendered":"How to Properly Set Cellspacing and Cellpadding for HTML Tables in CSS"},"content":{"rendered":"\n<p>Here will show you the correct way to set cellspacing and cellpadding in HTML tables using just <a href=\"http:\/\/local.brightwhiz\/tag\/css\">CSS<\/a> rules.<\/p>\n\n\n\n<p>It is more common than you might imagine finding web designers setting cellspacing and cellpadding to <a href=\"http:\/\/local.brightwhiz\/tag\/html\">HTML<\/a> tables using attributes as shown below:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-markup\">&lt;table cellspacing=&quot;10&quot; cellpadding=&quot;10&quot;&gt;&lt;\/table&gt;<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p>It is not the best practice to use the above method as it is not easy to maintain for the designer or the team, also these attributes have been deprecated for a while now.<\/p>\n\n\n\n<p>The good news is that with CSS there is a much more elegant and friendly way to set cellspacing and cellpadding in your HTML tables.<\/p>\n\n\n\n<p>To control Cellspacing with CSS, you can apply the <strong>border-spacing<\/strong> CSS property to your table. Here we add the optional <strong>border-collapse<\/strong> CSS property to specify that the cells should have separate borders.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-css\">table { \n    border-spacing: 10px;\n    border-collapse: separate;\n}<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p>As for Cellpadding, you can simply use padding on the table cells as shown below.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-css\">td { \n    padding: 10px;\n}<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p>One of the advantages when using CSS to set the cellspacing and cellpadding is that in both cases you can control the spacing of the top, right, bottom, and left sides independent of each other.<\/p>\n\n\n\n<p>In the case of <strong>border-spacing<\/strong>, the spacing works in pairs, either horizontally or vertically. The following sets the horizontal space (the space between cells in adjacent columns) to 20px and the vertical space (the space between cells in adjacent rows) to 10px.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-css\">table { \n    border-spacing: 20px 10px;\n    border-collapse: separate;\n}<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p>Ref: [<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/border-spacing\" target=\"_blank\" rel=\"noreferrer noopener\">1<\/a>], [<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/border-collapse\" target=\"_blank\" rel=\"noreferrer noopener\">2<\/a>]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Here will show you the correct way to set cellspacing and cellpadding in HTML tables using just CSS rules. It is more common than you might imagine finding web designers&#8230;<\/p>\n","protected":false},"author":1,"featured_media":9538,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,23,27,16,17],"tags":[170,303,600,635,637],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How do I Properly Set Cellspacing or Cellpadding in HTML Tables in CSS?<\/title>\n<meta name=\"description\" content=\"Here will show you the correct way to set cellspacing and cellpadding in HTML tables using just CSS properties\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/local.brightwhiz\/set-cellspacing-cellpadding-html-tables-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How do I Properly Set Cellspacing or Cellpadding in HTML Tables in CSS?\" \/>\n<meta property=\"og:description\" content=\"Here will show you the correct way to set cellspacing and cellpadding in HTML tables using just CSS properties\" \/>\n<meta property=\"og:url\" content=\"http:\/\/local.brightwhiz\/set-cellspacing-cellpadding-html-tables-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Brightwhiz.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/brightwhiz\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-01-21T19:51:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-12-04T05:37:51+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/01\/set-cellspacing-html-table-css.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Michael Bright\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@brightwhizmag\" \/>\n<meta name=\"twitter:site\" content=\"@brightwhizmag\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Michael Bright\" \/>\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\":\"http:\/\/local.brightwhiz\/set-cellspacing-cellpadding-html-tables-css\/#article\",\"isPartOf\":{\"@id\":\"http:\/\/local.brightwhiz\/set-cellspacing-cellpadding-html-tables-css\/\"},\"author\":{\"name\":\"Michael Bright\",\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32\"},\"headline\":\"How to Properly Set Cellspacing and Cellpadding for HTML Tables in CSS\",\"datePublished\":\"2021-01-21T19:51:08+00:00\",\"dateModified\":\"2021-12-04T05:37:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"http:\/\/local.brightwhiz\/set-cellspacing-cellpadding-html-tables-css\/\"},\"wordCount\":238,\"publisher\":{\"@id\":\"http:\/\/local.brightwhiz\/#organization\"},\"image\":{\"@id\":\"http:\/\/local.brightwhiz\/set-cellspacing-cellpadding-html-tables-css\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/01\/set-cellspacing-html-table-css.jpg\",\"keywords\":[\"CSS\",\"HTML\",\"Ui\/Ux\",\"Web\",\"Web Design\"],\"articleSection\":[\"Articles\",\"Guides\",\"Programming\",\"Technology\",\"Tips\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/local.brightwhiz\/set-cellspacing-cellpadding-html-tables-css\/\",\"url\":\"http:\/\/local.brightwhiz\/set-cellspacing-cellpadding-html-tables-css\/\",\"name\":\"How do I Properly Set Cellspacing or Cellpadding in HTML Tables in CSS?\",\"isPartOf\":{\"@id\":\"http:\/\/local.brightwhiz\/#website\"},\"primaryImageOfPage\":{\"@id\":\"http:\/\/local.brightwhiz\/set-cellspacing-cellpadding-html-tables-css\/#primaryimage\"},\"image\":{\"@id\":\"http:\/\/local.brightwhiz\/set-cellspacing-cellpadding-html-tables-css\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/01\/set-cellspacing-html-table-css.jpg\",\"datePublished\":\"2021-01-21T19:51:08+00:00\",\"dateModified\":\"2021-12-04T05:37:51+00:00\",\"description\":\"Here will show you the correct way to set cellspacing and cellpadding in HTML tables using just CSS properties\",\"breadcrumb\":{\"@id\":\"http:\/\/local.brightwhiz\/set-cellspacing-cellpadding-html-tables-css\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/local.brightwhiz\/set-cellspacing-cellpadding-html-tables-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/local.brightwhiz\/set-cellspacing-cellpadding-html-tables-css\/#primaryimage\",\"url\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/01\/set-cellspacing-html-table-css.jpg\",\"contentUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/01\/set-cellspacing-html-table-css.jpg\",\"width\":1200,\"height\":630,\"caption\":\"Set Cellspacing and Cellpadding\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/local.brightwhiz\/set-cellspacing-cellpadding-html-tables-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/local.brightwhiz\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Properly Set Cellspacing and Cellpadding for HTML Tables in CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/local.brightwhiz\/#website\",\"url\":\"http:\/\/local.brightwhiz\/\",\"name\":\"Brightwhiz.com\",\"description\":\"Best Tech guides, Tutorials, and News\",\"publisher\":{\"@id\":\"http:\/\/local.brightwhiz\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/local.brightwhiz\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"http:\/\/local.brightwhiz\/#organization\",\"name\":\"Brightwhiz\",\"url\":\"http:\/\/local.brightwhiz\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/11\/brightwhiz-com-logo-orange.png\",\"contentUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/11\/brightwhiz-com-logo-orange.png\",\"width\":706,\"height\":135,\"caption\":\"Brightwhiz\"},\"image\":{\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/brightwhiz\/\",\"https:\/\/twitter.com\/brightwhizmag\",\"https:\/\/instagram.com\/bright_whiz\/\",\"https:\/\/www.pinterest.com\/sobbayi\/\",\"https:\/\/www.youtube.com\/channel\/UC6sCdP_d_RiTIM7ErFT-PSQ\"]},{\"@type\":\"Person\",\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32\",\"name\":\"Michael Bright\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/person\/image\/\",\"url\":\"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g\",\"contentUrl\":\"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g\",\"caption\":\"Michael Bright\"},\"sameAs\":[\"https:\/\/sobbayi.com\"],\"url\":\"http:\/\/local.brightwhiz\/author\/sobbayiadmin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How do I Properly Set Cellspacing or Cellpadding in HTML Tables in CSS?","description":"Here will show you the correct way to set cellspacing and cellpadding in HTML tables using just CSS properties","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":"http:\/\/local.brightwhiz\/set-cellspacing-cellpadding-html-tables-css\/","og_locale":"en_US","og_type":"article","og_title":"How do I Properly Set Cellspacing or Cellpadding in HTML Tables in CSS?","og_description":"Here will show you the correct way to set cellspacing and cellpadding in HTML tables using just CSS properties","og_url":"http:\/\/local.brightwhiz\/set-cellspacing-cellpadding-html-tables-css\/","og_site_name":"Brightwhiz.com","article_publisher":"https:\/\/www.facebook.com\/brightwhiz\/","article_published_time":"2021-01-21T19:51:08+00:00","article_modified_time":"2021-12-04T05:37:51+00:00","og_image":[{"width":1200,"height":630,"url":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/01\/set-cellspacing-html-table-css.jpg","type":"image\/jpeg"}],"author":"Michael Bright","twitter_card":"summary_large_image","twitter_creator":"@brightwhizmag","twitter_site":"@brightwhizmag","twitter_misc":{"Written by":"Michael Bright","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/local.brightwhiz\/set-cellspacing-cellpadding-html-tables-css\/#article","isPartOf":{"@id":"http:\/\/local.brightwhiz\/set-cellspacing-cellpadding-html-tables-css\/"},"author":{"name":"Michael Bright","@id":"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32"},"headline":"How to Properly Set Cellspacing and Cellpadding for HTML Tables in CSS","datePublished":"2021-01-21T19:51:08+00:00","dateModified":"2021-12-04T05:37:51+00:00","mainEntityOfPage":{"@id":"http:\/\/local.brightwhiz\/set-cellspacing-cellpadding-html-tables-css\/"},"wordCount":238,"publisher":{"@id":"http:\/\/local.brightwhiz\/#organization"},"image":{"@id":"http:\/\/local.brightwhiz\/set-cellspacing-cellpadding-html-tables-css\/#primaryimage"},"thumbnailUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/01\/set-cellspacing-html-table-css.jpg","keywords":["CSS","HTML","Ui\/Ux","Web","Web Design"],"articleSection":["Articles","Guides","Programming","Technology","Tips"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"http:\/\/local.brightwhiz\/set-cellspacing-cellpadding-html-tables-css\/","url":"http:\/\/local.brightwhiz\/set-cellspacing-cellpadding-html-tables-css\/","name":"How do I Properly Set Cellspacing or Cellpadding in HTML Tables in CSS?","isPartOf":{"@id":"http:\/\/local.brightwhiz\/#website"},"primaryImageOfPage":{"@id":"http:\/\/local.brightwhiz\/set-cellspacing-cellpadding-html-tables-css\/#primaryimage"},"image":{"@id":"http:\/\/local.brightwhiz\/set-cellspacing-cellpadding-html-tables-css\/#primaryimage"},"thumbnailUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/01\/set-cellspacing-html-table-css.jpg","datePublished":"2021-01-21T19:51:08+00:00","dateModified":"2021-12-04T05:37:51+00:00","description":"Here will show you the correct way to set cellspacing and cellpadding in HTML tables using just CSS properties","breadcrumb":{"@id":"http:\/\/local.brightwhiz\/set-cellspacing-cellpadding-html-tables-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/local.brightwhiz\/set-cellspacing-cellpadding-html-tables-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/local.brightwhiz\/set-cellspacing-cellpadding-html-tables-css\/#primaryimage","url":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/01\/set-cellspacing-html-table-css.jpg","contentUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/01\/set-cellspacing-html-table-css.jpg","width":1200,"height":630,"caption":"Set Cellspacing and Cellpadding"},{"@type":"BreadcrumbList","@id":"http:\/\/local.brightwhiz\/set-cellspacing-cellpadding-html-tables-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/local.brightwhiz\/"},{"@type":"ListItem","position":2,"name":"How to Properly Set Cellspacing and Cellpadding for HTML Tables in CSS"}]},{"@type":"WebSite","@id":"http:\/\/local.brightwhiz\/#website","url":"http:\/\/local.brightwhiz\/","name":"Brightwhiz.com","description":"Best Tech guides, Tutorials, and News","publisher":{"@id":"http:\/\/local.brightwhiz\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/local.brightwhiz\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/local.brightwhiz\/#organization","name":"Brightwhiz","url":"http:\/\/local.brightwhiz\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/local.brightwhiz\/#\/schema\/logo\/image\/","url":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/11\/brightwhiz-com-logo-orange.png","contentUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/11\/brightwhiz-com-logo-orange.png","width":706,"height":135,"caption":"Brightwhiz"},"image":{"@id":"http:\/\/local.brightwhiz\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/brightwhiz\/","https:\/\/twitter.com\/brightwhizmag","https:\/\/instagram.com\/bright_whiz\/","https:\/\/www.pinterest.com\/sobbayi\/","https:\/\/www.youtube.com\/channel\/UC6sCdP_d_RiTIM7ErFT-PSQ"]},{"@type":"Person","@id":"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32","name":"Michael Bright","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/local.brightwhiz\/#\/schema\/person\/image\/","url":"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g","contentUrl":"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g","caption":"Michael Bright"},"sameAs":["https:\/\/sobbayi.com"],"url":"http:\/\/local.brightwhiz\/author\/sobbayiadmin\/"}]}},"_links":{"self":[{"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/posts\/9537"}],"collection":[{"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/comments?post=9537"}],"version-history":[{"count":0,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/posts\/9537\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/media\/9538"}],"wp:attachment":[{"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/media?parent=9537"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/categories?post=9537"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/tags?post=9537"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}