This question is probably going to have some insanely simple answer, but here goes...CSS is very new to me, and I'm trying to update some of my old HTML with CSS / styles. I'm using the NVU editor to save time with some of the basics, but for the most part I'm editing this code by hand.The problem I'm having is really getting to me...I'm trying to center a table. That's it. It is 400 pixels wide and I just want it centered. By using the "align" button within the GUI of the editor, the table does, indeed, become centered. But when I look at the code, the editor has solved the problem by slipping "margin-left: auto; margin-right: auto" into the style of the table.I decided I wanted to make the code more logical (to me anyway) by removing the margin settings and enclosing the table in <div style="text-align: center"></div> tags instead. However, the table is not centering on the page...?My question is twofold:1) Why does the first (editor-created) solution work? I am making the assumption that if the margin-left and margin-right definitions are omitted, the default is 'auto,' anyway, so I don't even see why this is centering the table...2) Why does my own solution (encasing the table in a div) not work? I'm totally baffled.Here's the code - and keep in mind there are still other unrelated issues with this page, but none that have to do with the centered table question (afaik at least):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title>template</title></head><body><!-- ~~~~~~~~~~~~~~~~~~ --><!-- BEGIN LISTING CODE --><!-- ~~~~~~~~~~~~~~~~~~ --><div style="text-align: center;"><table style="background-color: rgb(204, 204, 255); width: 100%; height: 133px; text-align: left;" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="width: 200px;"></td> <td style="white-space: nowrap; text-align: center;"> <span style="font-family: Arial Black; font-size: xx-large;">ALONEIN THE DARK 1 & 2</span> <span style="font-family: Arial; font-size: x-large;"><br>the Official Strategy Guide from Prima Games </span></td> <td style="width: 200px;"><a href="http://stores.ebay.com/Rainy-Day-Market"><img style="border: 0px solid; width: 200px; height: 133px;" alt="click to browse the Rainy Day Market!" src="http://i51.photobucket.com/albums/f359/cipater/eBay%20Photos/Listing%20Graphics/In-ListingGenericAd3200x133.jpg"></a></td> </tr> </tbody></table></div><br><div style="text-align: center;"><img style="width: 400px; height: 400px;" alt="Alone in the Dark 1 & 2 Strategy Guide" src="http://i51.photobucket.com/albums/f359/cipater/eBay%20Photos/Strategy%20Guides/AloneintheDarkGuide.jpg"><br></div><br> <!-- HERE IS WHERE THE TABLE IN QUESTION WILL NOT CENTER --><div style="text-align: center;"><table style="border: 2px solid rgb(204, 204, 255); background-color: rgb(255, 255, 255); width: 400px;" border="0" cellpadding="2" cellspacing="0"> <tbody> <tr> <td style="border-bottom: 1px solid rgb(255, 255, 255); background-color: rgb(204, 204, 255); width: 130px;"> <span style="font-family: Arial; font-weight: bold; font-size: small;">Platform(s)</span> </td> <td></td> </tr> <tr> <td style="background-color: rgb(204, 204, 255); width: 130px;"> <span style="font-family: Arial; font-weight: bold; font-size: small;">ESRBRating</span></td> <td></td> </tr> <tr> <td style="width: 130px; background-color: rgb(204, 204, 255);"><span style="font-family: Arial; font-weight: bold; font-size: small;">Length</span></td> <td></td> </tr> <tr> <td style="background-color: rgb(204, 204, 255); width: 130px;"><span style="font-family: Arial; font-weight: bold; font-size: small;">Condition</span></td> <td></td> </tr> <tr> <td style="background-color: rgb(204, 204, 255); width: 130px;"><span style="font-family: Arial; font-weight: bold; font-size: small;">Notes</span></td> <td></td> </tr> </tbody></table></div><br><br><!-- ~~~~~~~~~~~~~~~~ --><!-- END LISTING CODE --><!-- ~~~~~~~~~~~~~~~~ --></body></html>