Basic CSS Tutorial
Cellpadding and Cellspacing
In CSS, we don't have either of these specific options. We do have PADDING, which works INSIDE any box and BORDER-SPACING, which works inside a table. If we want to add some padding INSIDE something, it's quite simple. I don't like the way my h5 is right up against the left side of my browser, so I'm going to add some padding to the body section of my CSS file.
padding: 1em;
Save and refresh.
Now there's some blank space between my information and the left side of my page.
I can add this same property to the cell properties at the bottom of the CSS file.
td {
border: thin solid black;
padding: 1em;
}
Notice that the padding is added to all four sides of the cell, top, bottom, left and right. We'll discuss applying properties to one side of a box a little later.
Now we can add some space between the cells or merge them to a single thin line. I want a single line between my cells but I'll demonstrate the border spacing first. At the bottom of your CSS file, just above td, add
table {
border-spacing: 1em;
}
Save your CSS file.
Refresh your page in your browser.
Now add your border (copy and paste from the td) to the table.
Save your CSS file and refresh your browser.
I want a single line between the cells of my table so I'm going to REPLACE the border-spacing line with
border-collapse: collapse;
How it looks. A nice, simple, single border between my cells.
You can use either style with any value, it's YOUR page.
Previous Next