Check out a free preview of the full CSS In-Depth, v2 course:
The "Table Borders & Spacing" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

The CSS properties are impacting the borders, padding, and spacing within and between table cells. Cell spacing can be collapsed to style the rows of tables.

Get Unlimited Access Now

Transcript from the "Table Borders & Spacing" Lesson

[00:00:02]
>> Estelle: Borders and spacing.
>> Estelle: So let me just go back here in borders so you can see what a border does. If I do a border.
>> Estelle: 1px solid that adds it to the table.
>> Estelle: If I do th I get it on the t headers and if I do td it goes everywhere.

[00:00:30] You'll notice that there's a bit of spacing between all of those, right, so if I wanna add a border in my CSS I add it to all of them.
>> Estelle: Okay, I can control what happens. There was that border spacing between the td's, I can either say separate it, which is the default value, which is what happened or I can collapse it.

[00:01:02]
>> Estelle: That's border-collapse. Then I have border-spacing, which is if you did not collapse the borders, right, if they're separate how much space between each one of those borders. You can have one to two lengths.
>> Estelle: If you have only one length it will be both vertical and horizontal spacing.

[00:01:22] If you have two lengths in the value, it will be horizontal and then vertical. Notice, with this it's not in the typical order of top, right bottom, left.
>> Estelle: It's actually left, right and then top, bottom so that's a little bit confusing. And border-spacing has absolutely no impact if you've collapsed the borders.

[00:01:45] You won't have space between the borders if you collapse the borders. The empty space is part of the table not the column, tbody, trow, or tcell. So it will actually show up as here, if I go back here. Let me just go on to the next slide instead.

[00:02:05] So if you color all the tr's you'll have the color only in the table cells and not in that empty spacing. So we've added the one pixel of border already. And then we have border-spacing of ten pixels left and right and five pixels top and bottom, right. But note you don't see any spacing and that's because we have border-collapse.

[00:02:35] If we get rid of border-collapse or set it to it's default of separate there we have it, right. Now if I do tr background color green notice that it's just the cells that are background color not the entire table. So that's the interesting thing to note, that sometimes you want to use padding instead of spacing because you don't want this to happen.

[00:03:13]
>> Estelle: If I actually put it on the table you'll see that the whole thing is green. And when I told you we were going to make ugly websites.
>> Estelle: Congratulations, we succeeded. Okay, so that is table spacing and border-collapse. Do you want to see the difference let me get rid of the color green.

[00:03:35]
>> Estelle: Let me make it pink so it's less hideous.
>> Estelle: And go back to tr. Okay, and it's equally hideous. So here because we don't have border-collapse, if I got rid of border-collapse, the whole thing would be pink. Cuz there wouldn't be that spacing anymore and what I would do instead is do th and td.

[00:04:02]
>> Estelle: Padding. And then I would do five pixels, ten pixels to have the same effect.
>> Estelle: Rght, except for now I don't have that extra white in between. Does that make sense to people?