strange margin around HTML tables

Had been playing around with CSS a lot lately just to practice conforming to the WC3 best practices. Especially for the past few projects I have done, I try very much to use 100% CSS for layouts. And only define HTML tags in a top down fashion to markup the content. I think i’ve improved very much since the first time I’ve done this.

One of the things that frustrates me is that there are a lot of obscured CSS properties and strange behaviors in different browsers. One such element is the table. For all the times I used a table with CSS, a strange margin will always appear around the table even though margins and borders are set to 0px. Just keep in mind that tables have an extra border-collapse property and setting it to “collapse” will give you more intuitive results.