I found a very strange margin behaviour for table when it's inside LI element. Inside LI the TABLE has additional margin at the top which cannot be cancelled by using "margin" or "padding" CSS styles. The only way to cancel this -- is to set "display: block" for LI (by default it's "display: list-item"). Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>Strange table margin behaviour</title>
</head>
<body>
<ul>
<li style="border: 1px solid #009; margin: 0; padding: 0;"><table style="border: 1px solid #ccc; margin: 0; padding: 0;"><tr><td>test</td></tr></table></li>
<li style="border: 1px solid #009; margin: 0; padding: 0;"><table style="border: 1px solid #ccc; margin: 0; padding: 0;"><tr><td>test</td></tr></table></li>
<li style="border: 1px solid #009; margin: 0; padding: 0;"><table style="border: 1px solid #ccc; margin: 0; padding: 0;"><tr><td>test</td></tr></table></li>
</ul>
</body>
</html>
This renders in Google Chrome as:
screenshot #1
I expect:
screenshot #2
I really not understand why this margin happens? LI itself does not have any paddings, TABLE does not have any margins, but together...
UPD. This margin appears only in Google Chrome (24.0.1312.68). In Mozilla Firefox (18.0.2) there is no margin, and page looks as expected (screenshot #2).
While I think a better implementation would be to use floating divs inside the li tags to house your form, the solution to the spacing issue you are seeing with your HTML setup is to add a display: inline-table style to the table tags. (Code copied below; note that I moved the CSS to the header instead of it being inline in the tags.)
Just a note about this: the inline-table attribute is not supported at all in IE 7 and below, and you do need to be mindful of the doctype in IE 8. This should work fine in FF, Chrome, and IE 9.
See: http://www.w3schools.com/cssref/pr_class_display.asp
<!DOCTYPE html>
<html>
<head>
<title>Strange table margin behaviour</title>
<style type="text/css">
li { border: 1px solid #000099; margin: 0; padding: 0; }
table { border: 1px solid #ccc; display: inline-table; margin: 0; padding: 0; }
</style>
</head>
<body>
<ul>
<li><table><tr><td>test</td></tr></table></li>
<li><table><tr><td>test</td></tr></table></li>
<li><table><tr><td>test</td></tr></table></li>
</ul>
</body>
</html>
That rendering looks correct to me. If you're referring to the large space on the left-hand side, that is part of the UL.
as pixel mentioned, the rendering looks fine. What is the additional margin you're referring to?
A somewhat cleaner approach would be to omit the list tags and just position the table elements by themselves. Or wrap them in a div for more flexibility. I created a jsFiddle as an example.. http://jsfiddle.net/Lz9fu/2/
<div id="table_c">
<table><tr><td>test</td></tr></table>
<table><tr><td>test</td></tr></table>
<table><tr><td>test</td></tr></table>
</div>
