Bugl — code interview practice that feels like a game

Loading lesson path

Flash cards

Review the key moves

1/4

Core idea

What is the main idea behind HTML Table Padding & Spacing?

Lesson checks

Short Mimo-style checks built from this lesson's code, terms, and sequence.

1Quick choice

Which statement best captures the main point of this lesson?

2Fill blank

Complete the missing token from the example code.

___: 15px;

3Order

Put the learning moves in the order that makes the concept easiest to apply.

HTML Table - Cell Spacing

HTML Table - Cell Padding

HTML Table Padding & Spacing

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

hello	hello	hello
hello	hello	hello
hello	hello	hello

hello	hello	hello
hello	hello	hello
hello	hello	hello

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:

th, td
{
 padding: 15px;
}

To add padding only above the content, use the padding-top property.

Add padding to the other sides with the padding-bottom , padding-left , and padding-right properties:

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

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:

table
{
 border-spacing:
 30px;
}