{"id":5175,"date":"2019-11-15T11:47:22","date_gmt":"2019-11-15T06:17:22","guid":{"rendered":"https:\/\/pheonixsolutions.com\/blog\/?p=5175"},"modified":"2026-11-08T15:57:56","modified_gmt":"2026-11-08T10:27:56","slug":"space-between-rows-in-a-table-using-css-property","status":"publish","type":"post","link":"https:\/\/pheonixsolutions.com\/blog\/space-between-rows-in-a-table-using-css-property\/","title":{"rendered":"How to Add Space Between Rows in a Table Using CSS"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><strong>Post Date:<\/strong> November 15, 2019<br><strong>Last Updated:<\/strong> November 8, 2026<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Adding space between rows in an HTML table helps improve readability and makes tabular data easier to understand. CSS provides the <code>border-collapse<\/code> and <code>border-spacing<\/code> properties to control the spacing between table cells.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this article, we will learn how to add space between rows in a table using CSS with a simple HTML example.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS Properties Used to Add Space Between Table Rows<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Two important CSS properties are used to control the spacing between table cells.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. border-collapse<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The <code>border-collapse<\/code> property specifies whether table cell borders should be combined into a single border or kept separate.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It supports two commonly used values:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>collapse<\/code>: Adjacent cell borders are combined into a single border.<\/li>\n\n\n\n<li><code>separate<\/code>: Each cell maintains its own border, allowing spacing between cells.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Syntax:<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">table {\n    border-collapse: separate;\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">2. border-spacing<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The <code>border-spacing<\/code> property specifies the distance between the borders of adjacent table cells.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It accepts one or two values:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>One value: Sets both horizontal and vertical spacing.<\/li>\n\n\n\n<li>Two values: The first value sets horizontal spacing, and the second sets vertical spacing.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Syntax:<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">table {\n    border-spacing: 25px 15px;\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Here:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>25px<\/code> represents the horizontal spacing between cells.<\/li>\n\n\n\n<li><code>15px<\/code> represents the vertical spacing between cells.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Note:<\/strong> The <code>border-spacing<\/code> property works when <code>border-collapse<\/code> is set to <code>separate<\/code>. It does not work with <code>border-collapse: collapse<\/code>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Example: How to Add Space Between Rows in a Table Using CSS<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s create an HTML table containing student details and apply CSS properties to add space between the rows and columns.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">HTML and CSS Code<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!DOCTYPE html>\n&lt;html>\n&lt;head>\n    &lt;title>Space Between Table Rows&lt;\/title>\n\n    &lt;style>\n        table {\n            width: 60%;\n            border: 1px solid black;\n            border-collapse: separate;\n            border-spacing: 25px 15px;\n        }\n\n        th, td {\n            width: 150px;\n            text-align: center;\n            border: 1px solid black;\n            padding: 10px;\n        }\n\n        th {\n            background-color: #f2f2f2;\n        }\n    &lt;\/style>\n&lt;\/head>\n\n&lt;body>\n\n    &lt;center>\n        &lt;h2>Student Details&lt;\/h2>\n\n        &lt;table>\n            &lt;tr>\n                &lt;th>ID&lt;\/th>\n                &lt;th>Name&lt;\/th>\n                &lt;th>Age&lt;\/th>\n            &lt;\/tr>\n\n            &lt;tr>\n                &lt;td>301&lt;\/td>\n                &lt;td>AAA&lt;\/td>\n                &lt;td>20&lt;\/td>\n            &lt;\/tr>\n\n            &lt;tr>\n                &lt;td>302&lt;\/td>\n                &lt;td>BBB&lt;\/td>\n                &lt;td>24&lt;\/td>\n            &lt;\/tr>\n\n            &lt;tr>\n                &lt;td>303&lt;\/td>\n                &lt;td>CCC&lt;\/td>\n                &lt;td>21&lt;\/td>\n            &lt;\/tr>\n        &lt;\/table>\n    &lt;\/center>\n\n&lt;\/body>\n&lt;\/html><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Explanation<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s understand the important CSS properties used in this example:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>1. <\/strong><code><strong>border-collapse: separate;<\/strong><\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This keeps the borders of individual table cells separate instead of combining them.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>2. <\/strong><code><strong>border-spacing: 25px 15px;<\/strong><\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This creates 25 pixels of horizontal spacing and 15 pixels of vertical spacing between adjacent table cells.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>3. <\/strong><code><strong>padding: 10px;<\/strong><\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This adds space inside each table cell, between the content and its border.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>4. <\/strong><code><strong>text-align: center;<\/strong><\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This aligns the text in the center of each table cell.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Output<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/11\/image-16.png\"><img fetchpriority=\"high\" decoding=\"async\" width=\"661\" height=\"447\" src=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/11\/image-16.png\" alt=\"\" class=\"wp-image-13042\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/11\/image-16.png 661w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/11\/image-16-300x203.png 300w\" sizes=\"(max-width: 661px) 100vw, 661px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">How to Add Only Vertical Space Between Table Rows<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If you want to add space only between table rows without horizontal spacing, use a single zero horizontal spacing value and specify the vertical spacing.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">table {\n    border-collapse: separate;\n    border-spacing: 0 15px;\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Here, <code>0<\/code> removes horizontal spacing, while <code>15px<\/code> adds vertical spacing between cells in adjacent rows.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Difference Between border-spacing and padding<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Both properties add space to a table, but they work differently.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><th>CSS Property<\/th><th>Purpose<\/th><\/tr><tr><td><code>border-spacing<\/code><\/td><td>Adds space between adjacent table cells<\/td><\/tr><tr><td><code>padding<\/code><\/td><td>Adds space inside a table cell<\/td><\/tr><tr><td><code>border-collapse<\/code><\/td><td>Controls whether adjacent cell borders are combined or separated<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Use <code>border-spacing<\/code> when you need gaps between table cells. Use <code>padding<\/code> when you need more space around the content inside each cell.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Adding space between rows in a table using CSS is simple with the <code>border-collapse<\/code> and <code>border-spacing<\/code> properties.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Set <code>border-collapse: separate<\/code> to keep cell borders independent, and use <code>border-spacing<\/code> to control the horizontal and vertical gaps between cells.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">These properties help improve table readability and create cleaner HTML table layouts.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Frequently Asked Questions (FAQs)<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1. How can I add space between rows in an HTML table using CSS?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Set <code>border-collapse: separate<\/code> and use the <code>border-spacing<\/code> property to control the distance between adjacent table cells.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">table {\n    border-collapse: separate;\n    border-spacing: 0 15px;\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">2. What is the purpose of the border-spacing property in CSS?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The <code>border-spacing<\/code> property controls the horizontal and vertical distance between adjacent table cells.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Does border-spacing work with border-collapse: collapse?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">No. The <code>border-spacing<\/code> property only works when <code>border-collapse<\/code> is set to <code>separate<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4. What is the difference between border-spacing and padding?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><code>border-spacing<\/code> creates gaps between table cells, whereas <code>padding<\/code> creates space inside individual cells between the content and the cell border.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">5. Can I add only vertical spacing between table rows?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Yes. Use <code>border-spacing: 0 15px<\/code> along with <code>border-collapse: separate<\/code> to remove horizontal spacing and add vertical spacing.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Related Articles<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/pheonixsolutions.com\/blog\/dynamic-drop-down-list-using-html-php-mysql\/\">Dynamic Dependent drop down list using html,php,mysql<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Official Documentation<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/border-spacing\" target=\"_blank\" rel=\"noopener\">MDN \u2013 CSS border-spacing<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/border-collapse\" target=\"_blank\" rel=\"noopener\">MDN \u2013 CSS border-collapse<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/table\" target=\"_blank\" rel=\"noopener\">MDN \u2013 HTML Table Element<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Talk to Our Experts<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Looking for reliable web development and frontend development solutions?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/pheonixsolutions.com\/web-development\/\"><strong>Pheonix Solutions<\/strong><\/a> provides web development, application development, cloud solutions, and DevOps services to help businesses build efficient and scalable digital solutions.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Our experts can help you develop responsive websites, improve user experiences, and implement modern frontend technologies.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/pheonixsolutions.com\/contact\"><strong>Contact our experts<\/strong><\/a> to discuss your project requirements.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Thank you for choosing Pheonix Solutions!<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Post Date: November 15, 2019Last Updated: November 8, 2026 Introduction Adding space between rows in an HTML table helps improve [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":13043,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_hide_featured_image":false,"_jetpack_featured_image_duplicate_dismissed":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1022],"tags":[723,724,495,726],"class_list":["post-5175","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-architecture","tag-border-collapse","tag-border-spacing","tag-html","tag-table-space","psol-cat-web-architecture"],"jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/phn2x7-1lt","jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/11\/CSS-Table-Row-Spacing-Tutorial.png","_links":{"self":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/5175","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=5175"}],"version-history":[{"count":4,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/5175\/revisions"}],"predecessor-version":[{"id":13047,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/5175\/revisions\/13047"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/media\/13043"}],"wp:attachment":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=5175"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=5175"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=5175"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}