{"id":5755,"date":"2024-12-04T06:42:29","date_gmt":"2024-12-04T06:42:29","guid":{"rendered":"https:\/\/ubiq.co\/tech-blog\/?p=5755"},"modified":"2024-12-04T06:42:32","modified_gmt":"2024-12-04T06:42:32","slug":"how-to-set-cellpadding-and-cellspacing-in-css","status":"publish","type":"post","link":"https:\/\/ubiq.co\/tech-blog\/how-to-set-cellpadding-and-cellspacing-in-css\/","title":{"rendered":"How to Set Cellpadding and Cellspacing in CSS"},"content":{"rendered":"\n<p>Web developers heavily rely on HTML tables to display content in a lucid manner and organize their page layout. Often then need to add some padding within table cells so that their content doesn&#8217;t look crammed. They also need to add some spacing between table cells to make the table content look neat and tidy. Typically, they use the cellspacing and cellpadding HTML attributes that are available for each table. But they are not supported by HTML5 web browsers. In this article, we will learn how to set cellpadding and cellspacing using CSS and nothing else. This way you do not need to worry about modifying your web page&#8217;s HTML code, or using any kind of JavaScript library.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-set-cellpadding-and-cellspacing-in-css\/#What_is_Cellpadding\" >What is Cellpadding<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-set-cellpadding-and-cellspacing-in-css\/#What_is_Cellspacing\" >What is Cellspacing<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-set-cellpadding-and-cellspacing-in-css\/#How_to_Set_Cellpadding_and_Cellspacing_in_CSS\" >How to Set Cellpadding and Cellspacing in CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-set-cellpadding-and-cellspacing-in-css\/#1_Cellpadding_with_CSS\" >1. Cellpadding with CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-set-cellpadding-and-cellspacing-in-css\/#2_Cellspacing_with_CSS\" >2. Cellspacing with CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-set-cellpadding-and-cellspacing-in-css\/#3_Old_Fashioned_Solution\" >3. Old Fashioned Solution<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-set-cellpadding-and-cellspacing-in-css\/#Conclusion\" >Conclusion<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-set-cellpadding-and-cellspacing-in-css\/#FAQ\" >FAQ<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_is_Cellpadding\"><\/span>What is Cellpadding<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Cell padding is the amount of space present inside a table cell surrounding its content. It is the space between table cell content and its edges. It is used to make the table content easy on the eyes and improve readability. By default, it is set to 0. Here is an example of how it can be assigned as HTML attribute for table. Here we set it to 5px, that is 5px space in each table cell, in each of the 4 directions, between cell content and its borders.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;table cellspacing=\"5px\"><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_is_Cellspacing\"><\/span>What is Cellspacing<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Cell spacing is the amount of space between the cells of a table. It is used to organize the table content in a more aesthetic way. By default, it is set to 2px. Here is an example to set it to 5 pixels for each cell in a table.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;table cellpadding=\"5px\"><\/pre>\n\n\n\n<p>Please note, both cellpadding as well as cellspacing attributes are supported for table HTML tag only. They are applied to all cells in a table.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_Set_Cellpadding_and_Cellspacing_in_CSS\"><\/span>How to Set Cellpadding and Cellspacing in CSS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>The above mentioned HTML attributes are not supported by HTML5 web browsers. So you need to use CSS styling instead. Let us say you have the following HTML table.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;table id='my_table'><br>      &lt;tr><br>        &lt;th id='my_heading'>Heading 1&lt;\/th><br>        &lt;th>Heading 2&lt;\/th><br>      &lt;\/tr><br>      &lt;tr><br>        &lt;td id='my_cell'>Text 1&lt;\/td><br>        &lt;td>Text 2&lt;\/td><br>      &lt;\/tr><br>      &lt;tr><br>        &lt;td>Text 3&lt;\/td><br>        &lt;td>Text 4&lt;\/td><br>      &lt;\/tr><br>&lt;\/table><br><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Cellpadding_with_CSS\"><\/span>1. Cellpadding with CSS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>For applying cellpadding of 5px to your table cells, you can use the padding property supported by th and td attributes.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">th, td {<br>  padding:5px;<br> }<\/pre>\n\n\n\n<p>The above style will be applied to all table header and data cells. If you want to apply it to only one heading or one data cell, you can select them using their ID or another attribute and set padding property of only that cell.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">#my_heading {<br>  padding:5px;<br> }<br><br>#my_cell{<br>  padding:5px;<br>}<\/pre>\n\n\n\n<p>You can also use other ways to precisely apply cellpadding to only required cells. This is useful if most of the content in your table fit well and do not need that extra padding.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Cellspacing_with_CSS\"><\/span>2. Cellspacing with CSS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>In case of cell spacing, you can use border-spacing CSS property for your table, along with border-collapse property. Here is an example to set border-spacing property to 5px.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">table { <br>    border-spacing: 5px;<br>    border-collapse: separate;<br>}<\/pre>\n\n\n\n<p>The above code will set both horizontal as well as vertical spacing to 5px. If you want to set horizontal spacing to 7px and vertical spacing to 5px then you can specify border-spacing as shown below.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">table { <br>    border-spacing: 7px 5px;<br>    border-collapse: separate;<br>}<\/pre>\n\n\n\n<p>In fact, in most web browsers, if you have already set the border-spacing CSS property, then you do not need to set border-collapse property.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Old_Fashioned_Solution\"><\/span>3. Old Fashioned Solution<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>The old fashioned way of setting cellspacing and cellpadding is to assign these HTML attributes directly to the table.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;table cellspacing='3px' cellpadding='5px'><br>...<br>&lt;\/table><\/pre>\n\n\n\n<p>These attributes are applicable to all cells of the table and cannot be easily customized, unless you individually assign them to each required cell separately. This is very tedious.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>In this article, we have learnt how to set cellpadding and cellspacing using plain CSS. The advantage of this method is that since you are not using HTML attributes, you can easily modify the table&#8217;s styling by modifying its CSS. It is recommended that you use the above mentioned modern CSS properties to set cell padding and spacing, even if you already use HTML attributes for the same. This is because HTML cellpadding and cellspacing HTML attributes are not supported by HTML5 web browsers.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"FAQ\"><\/span>FAQ<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><strong>1. Do these solutions work on all web browsers?<\/strong><\/p>\n\n\n\n<p>Yes. These are cross-browser solutions supported by all HTML5 web browsers such as Chrome, Edge, Firefox and Opera.<\/p>\n\n\n\n<p><strong>2. Can you set cellpadding and cellspacing for just one cell?<\/strong><\/p>\n\n\n\n<p>Yes. In the CSS selector, specify the cell you want to apply formatting for. You can do this by selecting the specific cell using its ID or any other attribute with unique value. Once you identify the right CSS selector to pick the target cell, add border-spacing and padding CSS attributes for that cell.<\/p>\n\n\n\n<p>Also read:<\/p>\n\n\n\n<p><a href=\"https:\/\/ubiq.co\/tech-blog\/how-to-horizontally-center-div-in-css\/\">How to Horizontally Center Div in CSS<\/a><br><a href=\"https:\/\/ubiq.co\/tech-blog\/how-to-change-html-inputs-placeholder-color-with-css\/\">How to Change HTML Input&#8217;s Placeholder in CSS<\/a><br><a href=\"https:\/\/ubiq.co\/tech-blog\/how-to-detect-click-outside-element-in-javascript\/\">How to Detect Click Outside Element in JavaScript<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Often web developers need to add padding and spacing for table cells. Here is how to set cellpadding and cellspacing in CSS.<\/p>\n","protected":false},"author":1,"featured_media":5768,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[340],"tags":[343,344],"class_list":["post-5755","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-cellpadding","tag-cellspacing"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Set Cellpadding and Cellspacing in CSS - Ubiq BI<\/title>\n<meta name=\"description\" content=\"Often web developers need to add padding and spacing for table cells. Here is how to set cellpadding and cellspacing in CSS.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-set-cellpadding-and-cellspacing-in-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Set Cellpadding and Cellspacing in CSS - Ubiq BI\" \/>\n<meta property=\"og:description\" content=\"Often web developers need to add padding and spacing for table cells. Here is how to set cellpadding and cellspacing in CSS.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ubiq.co\/tech-blog\/how-to-set-cellpadding-and-cellspacing-in-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Ubiq BI\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ubiqbi\" \/>\n<meta property=\"article:published_time\" content=\"2024-12-04T06:42:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-12-04T06:42:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ubiq.co\/tech-blog\/wp-content\/uploads\/2024\/12\/set-cellpadding-cellspacing-css.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"273\" \/>\n\t<meta property=\"og:image:height\" content=\"154\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Sreeram Sreenivasan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@UbiqBI\" \/>\n<meta name=\"twitter:site\" content=\"@UbiqBI\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sreeram Sreenivasan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-set-cellpadding-and-cellspacing-in-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-set-cellpadding-and-cellspacing-in-css\\\/\"},\"author\":{\"name\":\"Sreeram Sreenivasan\",\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/#\\\/schema\\\/person\\\/db98d49a766a3a111d8510935ab90abc\"},\"headline\":\"How to Set Cellpadding and Cellspacing in CSS\",\"datePublished\":\"2024-12-04T06:42:29+00:00\",\"dateModified\":\"2024-12-04T06:42:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-set-cellpadding-and-cellspacing-in-css\\\/\"},\"wordCount\":775,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-set-cellpadding-and-cellspacing-in-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/ubiq.co\\\/tech-blog\\\/wp-content\\\/uploads\\\/2024\\\/12\\\/set-cellpadding-cellspacing-css.jpg?fit=273%2C154&ssl=1\",\"keywords\":[\"cellpadding\",\"cellspacing\"],\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-set-cellpadding-and-cellspacing-in-css\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-set-cellpadding-and-cellspacing-in-css\\\/\",\"url\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-set-cellpadding-and-cellspacing-in-css\\\/\",\"name\":\"How to Set Cellpadding and Cellspacing in CSS - Ubiq BI\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-set-cellpadding-and-cellspacing-in-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-set-cellpadding-and-cellspacing-in-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/ubiq.co\\\/tech-blog\\\/wp-content\\\/uploads\\\/2024\\\/12\\\/set-cellpadding-cellspacing-css.jpg?fit=273%2C154&ssl=1\",\"datePublished\":\"2024-12-04T06:42:29+00:00\",\"dateModified\":\"2024-12-04T06:42:32+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/#\\\/schema\\\/person\\\/db98d49a766a3a111d8510935ab90abc\"},\"description\":\"Often web developers need to add padding and spacing for table cells. Here is how to set cellpadding and cellspacing in CSS.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-set-cellpadding-and-cellspacing-in-css\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-set-cellpadding-and-cellspacing-in-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-set-cellpadding-and-cellspacing-in-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/ubiq.co\\\/tech-blog\\\/wp-content\\\/uploads\\\/2024\\\/12\\\/set-cellpadding-cellspacing-css.jpg?fit=273%2C154&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/ubiq.co\\\/tech-blog\\\/wp-content\\\/uploads\\\/2024\\\/12\\\/set-cellpadding-cellspacing-css.jpg?fit=273%2C154&ssl=1\",\"width\":273,\"height\":154,\"caption\":\"set cellpadding and cellspacing in css\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-set-cellpadding-and-cellspacing-in-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Set Cellpadding and Cellspacing in CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/#website\",\"url\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/\",\"name\":\"Ubiq BI\",\"description\":\"Build dashboards &amp; reports in minutes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/#\\\/schema\\\/person\\\/db98d49a766a3a111d8510935ab90abc\",\"name\":\"Sreeram Sreenivasan\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4b3127ed2d4bb8efb3fa0bbb52cf2efd4d0156c97fc05a503537c883e8279947?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4b3127ed2d4bb8efb3fa0bbb52cf2efd4d0156c97fc05a503537c883e8279947?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4b3127ed2d4bb8efb3fa0bbb52cf2efd4d0156c97fc05a503537c883e8279947?s=96&d=mm&r=g\",\"caption\":\"Sreeram Sreenivasan\"},\"description\":\"Sreeram Sreenivasan is the Founder of Ubiq. He has helped many Fortune 500 companies in the areas of BI &amp; software development.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/sreeram-sreenivasan\\\/\"],\"url\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/author\\\/wordpress\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Set Cellpadding and Cellspacing in CSS - Ubiq BI","description":"Often web developers need to add padding and spacing for table cells. Here is how to set cellpadding and cellspacing in CSS.","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:\/\/ubiq.co\/tech-blog\/how-to-set-cellpadding-and-cellspacing-in-css\/","og_locale":"en_US","og_type":"article","og_title":"How to Set Cellpadding and Cellspacing in CSS - Ubiq BI","og_description":"Often web developers need to add padding and spacing for table cells. Here is how to set cellpadding and cellspacing in CSS.","og_url":"https:\/\/ubiq.co\/tech-blog\/how-to-set-cellpadding-and-cellspacing-in-css\/","og_site_name":"Ubiq BI","article_publisher":"https:\/\/www.facebook.com\/ubiqbi","article_published_time":"2024-12-04T06:42:29+00:00","article_modified_time":"2024-12-04T06:42:32+00:00","og_image":[{"width":273,"height":154,"url":"https:\/\/ubiq.co\/tech-blog\/wp-content\/uploads\/2024\/12\/set-cellpadding-cellspacing-css.jpg","type":"image\/jpeg"}],"author":"Sreeram Sreenivasan","twitter_card":"summary_large_image","twitter_creator":"@UbiqBI","twitter_site":"@UbiqBI","twitter_misc":{"Written by":"Sreeram Sreenivasan","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ubiq.co\/tech-blog\/how-to-set-cellpadding-and-cellspacing-in-css\/#article","isPartOf":{"@id":"https:\/\/ubiq.co\/tech-blog\/how-to-set-cellpadding-and-cellspacing-in-css\/"},"author":{"name":"Sreeram Sreenivasan","@id":"https:\/\/ubiq.co\/tech-blog\/#\/schema\/person\/db98d49a766a3a111d8510935ab90abc"},"headline":"How to Set Cellpadding and Cellspacing in CSS","datePublished":"2024-12-04T06:42:29+00:00","dateModified":"2024-12-04T06:42:32+00:00","mainEntityOfPage":{"@id":"https:\/\/ubiq.co\/tech-blog\/how-to-set-cellpadding-and-cellspacing-in-css\/"},"wordCount":775,"commentCount":0,"image":{"@id":"https:\/\/ubiq.co\/tech-blog\/how-to-set-cellpadding-and-cellspacing-in-css\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/ubiq.co\/tech-blog\/wp-content\/uploads\/2024\/12\/set-cellpadding-cellspacing-css.jpg?fit=273%2C154&ssl=1","keywords":["cellpadding","cellspacing"],"articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ubiq.co\/tech-blog\/how-to-set-cellpadding-and-cellspacing-in-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ubiq.co\/tech-blog\/how-to-set-cellpadding-and-cellspacing-in-css\/","url":"https:\/\/ubiq.co\/tech-blog\/how-to-set-cellpadding-and-cellspacing-in-css\/","name":"How to Set Cellpadding and Cellspacing in CSS - Ubiq BI","isPartOf":{"@id":"https:\/\/ubiq.co\/tech-blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ubiq.co\/tech-blog\/how-to-set-cellpadding-and-cellspacing-in-css\/#primaryimage"},"image":{"@id":"https:\/\/ubiq.co\/tech-blog\/how-to-set-cellpadding-and-cellspacing-in-css\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/ubiq.co\/tech-blog\/wp-content\/uploads\/2024\/12\/set-cellpadding-cellspacing-css.jpg?fit=273%2C154&ssl=1","datePublished":"2024-12-04T06:42:29+00:00","dateModified":"2024-12-04T06:42:32+00:00","author":{"@id":"https:\/\/ubiq.co\/tech-blog\/#\/schema\/person\/db98d49a766a3a111d8510935ab90abc"},"description":"Often web developers need to add padding and spacing for table cells. Here is how to set cellpadding and cellspacing in CSS.","breadcrumb":{"@id":"https:\/\/ubiq.co\/tech-blog\/how-to-set-cellpadding-and-cellspacing-in-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ubiq.co\/tech-blog\/how-to-set-cellpadding-and-cellspacing-in-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ubiq.co\/tech-blog\/how-to-set-cellpadding-and-cellspacing-in-css\/#primaryimage","url":"https:\/\/i0.wp.com\/ubiq.co\/tech-blog\/wp-content\/uploads\/2024\/12\/set-cellpadding-cellspacing-css.jpg?fit=273%2C154&ssl=1","contentUrl":"https:\/\/i0.wp.com\/ubiq.co\/tech-blog\/wp-content\/uploads\/2024\/12\/set-cellpadding-cellspacing-css.jpg?fit=273%2C154&ssl=1","width":273,"height":154,"caption":"set cellpadding and cellspacing in css"},{"@type":"BreadcrumbList","@id":"https:\/\/ubiq.co\/tech-blog\/how-to-set-cellpadding-and-cellspacing-in-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ubiq.co\/tech-blog\/"},{"@type":"ListItem","position":2,"name":"How to Set Cellpadding and Cellspacing in CSS"}]},{"@type":"WebSite","@id":"https:\/\/ubiq.co\/tech-blog\/#website","url":"https:\/\/ubiq.co\/tech-blog\/","name":"Ubiq BI","description":"Build dashboards &amp; reports in minutes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ubiq.co\/tech-blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/ubiq.co\/tech-blog\/#\/schema\/person\/db98d49a766a3a111d8510935ab90abc","name":"Sreeram Sreenivasan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/4b3127ed2d4bb8efb3fa0bbb52cf2efd4d0156c97fc05a503537c883e8279947?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4b3127ed2d4bb8efb3fa0bbb52cf2efd4d0156c97fc05a503537c883e8279947?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4b3127ed2d4bb8efb3fa0bbb52cf2efd4d0156c97fc05a503537c883e8279947?s=96&d=mm&r=g","caption":"Sreeram Sreenivasan"},"description":"Sreeram Sreenivasan is the Founder of Ubiq. He has helped many Fortune 500 companies in the areas of BI &amp; software development.","sameAs":["https:\/\/www.linkedin.com\/in\/sreeram-sreenivasan\/"],"url":"https:\/\/ubiq.co\/tech-blog\/author\/wordpress\/"}]}},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/ubiq.co\/tech-blog\/wp-content\/uploads\/2024\/12\/set-cellpadding-cellspacing-css.jpg?fit=273%2C154&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/pbGGTT-1uP","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/posts\/5755","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/comments?post=5755"}],"version-history":[{"count":14,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/posts\/5755\/revisions"}],"predecessor-version":[{"id":5770,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/posts\/5755\/revisions\/5770"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/media\/5768"}],"wp:attachment":[{"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/media?parent=5755"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/categories?post=5755"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/tags?post=5755"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}