html table padding & spacing

HTML Tutorials

HTML Introduction HTML Headings HTML Paragraphs HTML Formatting HTML Links

HTML Images

HTML Tables

HTML Lists

HTML Block & Inline HTML Classes HTML Id HTML Iframes HTML JavScript HTML File Paths HTML Head HTML Layout HTML Responsive

HTML Table Padding & Spacing

Previous Next

HTML tables can adjust the padding inside the cells, and also the space between the cells.

Padding
hello	hello	hello
hello	hello	hello
hello	hello	hello

Spacing
world	world	world
world	world	world
world	world	world

HTML Table - Cell Padding

Cell padding is the space between the cell edges and the cell content.
By default the padding is set to 0.
To add padding on table cells, use the CSS padding property:

Example:

th, td {
padding: 15px;
}

Try it Yourself

To add padding only above the content, use the padding-top property.
And the others sides with the padding-bottom, padding-left, and padding-right properties:

Example:

th, td {
    padding-top: 10px;
     padding-bottom: 20px;
    padding-left: 30px;
    padding-right: 40px;
}

Try it Yourself

HTML Table - Cell Spacing

Cell spacing is the space between each cell.
By default the space is set to 2 pixels.
To change the space between table cells, use the CSS border-spacing property on the table element:

Example:

table {
border-spacing: 30px;
}

Try it Yourself

Previous Next

Report error:

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail: shaurya.y321@gmail.com

Forum | About

LearnToCode is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using LearnToCode, you agree to have read and accepted our terms of use, cookie and privacy policy.