css table collapse


I was running
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
table, td, th
border:1px solid black;

<p><b>Note:</b> If a !DOCTYPE is not specified, the border-collapse property can produce unexpected results.</p>

Open in new window

I have not understood

>>the border-collapse property sets whether the table borders are collapsed into a single border or separated:

please advise
Who is Participating?
qwerty021600Connect With a Mentor Commented:
border-collapse property collapsed table borders into a single border
lexlythiusConnect With a Mentor Commented:
collapsing means that TD's borders get mixed together with no spacing.

In the attached image, the second table is identical to the first one, only its borders are collapsed:

scrathcyboyConnect With a Mentor Commented:
You use border collapse when you want a thin line between table cells.  The other way to do this is

TABLE  { border: 1px solid green }
The other way to do this is

TABLE  { border: 1px solid green }

That is not correct.

If you only put that style, TABLE will have a 1px outer border, but cells will have none.

If you also set the style for TDs, inner borders will be drawn, but for each cell separately (and possibly with padding between them).
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.