Space between two rows in a table using CSS

Last Updated : 16 Sep, 2024

The space between two rows in a table can be done using CSS border-spacing and border-collapse properties.

The border-spacing property is used to set the spaces between cells of a table and border-collapse property is used to specify whether the border of the table is collapsed or not.

The border-spacing attribute can only be used if border-collapse attribute is set to separate.

Example: This example shows the use of the CSS border-collapse property.

html

<!DOCTYPE html>
<html>

<head>
    <style>
        table {
            border-collapse: collapse;
        }

        th {
            background-color: green;
            Color: white;
        }

        th,
        td {
            width: 150px;
            text-align: center;
            border: 1px solid black;
            padding: 5px
        }

        .geeks {
            border-right: hidden;
        }

        .gfg {
            border-collapse: separate;
            border-spacing: 0 15px;
        }

        h1 {
            color: green;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>Row spacing in a table</h2>
    <table>
        <tr>
            <th>Employee ID</th>
            <th>Name</th>
            <th>Gender</th>
            <th>Age</th>
        </tr>
    </table>
    <table class="gfg">
        <tr>
            <td class="geeks">10001</td>
            <td>Thomas</td>
            <td>M</td>
            <td>32</td>
        </tr>
        <tr>
            <td class="geeks">10002</td>
            <td>Sally</td>
            <td>F</td>
            <td>28</td>
        </tr>
        <tr>
            <td class="geeks">10003</td>
            <td>Anthony</td>
            <td>M</td>
            <td>24</td>
        </tr>
    </table>

</body>

</html>

Output: row spacing in table

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps. You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.

A

abhishek vanjani

Improve

Article Tags :

Similar Reads

How to change color of PNG image using CSS?

Given an image and the task is to change the image color using CSS. Use filter function to change the png image color. Filter property is mainly used to set the visual effect to the image. There are many property value exist to the filter function. filter: none|blur()|brightness()|contrast()|drop-sh

What is the best way to include CSS file? Why use @import?

CSS property can be include in the HTML page in a number of different ways. HTML documents are formatted according to the information in the style sheet which is to be included.There are many ways to include CSS file which are listed below: External style sheet (Using HTML <link> Tag): Externa

How to style icon color, size, and shadow by using CSS ?

Styling an icon's color, size, and shadow in CSS involves setting the color property for the icon's color, adjusting its size with font-size or width/height, and applying box-shadow or text-shadow for visual depth effects.When using Font Awesome, adding icons is simple and requires no downloads or i

How to set multiple background images using CSS?

The multiple background images for an element can be put in the HTML page using CSS. Use CSS background property to add multiple background images for an element in any pattern and use other CSS property to set the height and width of the images. The used background property are listed below: backgr

CSS Preprocessor SASS

Sass (Syntactically Awesome Style Sheets) is a CSS preprocessor that enhances standard CSS by introducing features like variables, nesting, imports, mixins, and inheritance, all while maintaining compatibility with all CSS versions.Key Features of Sass:Variables: Store reusable values such as colors

CSS Website Layout

CSS website layout divides a webpage into multiple sections like header, navigation bar, content area, and footer, making it easier to organize content and build the site.1. Header SectionThe header is the top section of a webpage, typically containing the website's name or logo.html<html>

How to make div not larger than its contents using CSS?

There are three ways to achieve this problem: By default case Using inline-block property Using fit-content property in width and height Default Case: In HTML div is by default fit to content inside it. The example goes like this: Example 1: html <!DOCTYPE html> <html lang = "en"

Building Tooltip using CSS

A Tooltip provides users with additional information about an element when the mouse pointer hovers over it. For example, when a user hovers over a button labeled "GeeksForGeeks," additional information such as "A Computer Science Portal" can appear as a tooltip.Tooltip PositionsTooltips can be posi

How to Set Background Color Opacity without Affecting Text in CSS?

Here are two approaches to set a background color with opacity in CSS without affecting the text.1. Using RGBA color valuesTo set the opacity only to the background color and not the text inside it we can use RGBA color values instead of the opacity property. Because using the opacity property can c

Transition shorthand with multiple properties in CSS?

The transition shorthand in CSS allows specifying multiple properties for smooth transitions between different states or values. The transition property in CSS is used to create transitions in an element, enabling changes to occur smoothly over a specified duration. This article demonstrates how to