Jump to content

div not centering a table?

Cipater

By Cipater
in CSS

 Share

Recommended Posts

Cipater Newbie

Cipater

Posted
Posted

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>

Link to comment
Share on other sites
aspnetguy Sacred Member

aspnetguy

Posted
Posted

well the editor was making your code more standards friendly. buy setting maring:auto it will center and element if that element has a fixed width.

<div style="100%;text-align:center"><table width="400">...</table></div>

The above code should also center the table. Be sure you use a DOCTYPE.

Link to comment
Share on other sites
Cipater Newbie

Cipater

Posted
  • Author
Posted
...by setting margin:auto it will center an element if that element has a fixed width...
<div style="100%;text-align:center"><table width="400">...</table></div>

The above code should also center the table. Be sure you use a DOCTYPE.

Thank you for your reply! :)Just to clarify: my assumption that an element's default/undeclared margin-left and margin-right values are auto was incorrect? That leads me to a couple more questions:1) What are the default values for margin-left and margin-right when I leave them undeclared in the style definition of the table?2) Regardless of the margin-left and margin-right values, why is the <div style:"text-align: center;"> ignored in the original code I wrote?Is something in the table settings taking precedence over this div declaration?3) In the alternate div style you included, is the 100%; shorthand for width: 100%;? (Obviously I'm new to CSS/styles :) ).I tried adding the 100%; to my div both ways, and couldn't get this code to work.However there could be a couple reasons for this...I continued using <table style:"width: 400px;"> instead of <table width="400"> andI'm not familiar with how to use DOCTYPE (I've always left this to the HTML editor in the past).I continued using the same DOCTYPE that is in the original code.Hopefully I'm communicating my questions clearly.Thank you in advance for any answers you can give me - I know I should probably just settle for a solution but I'd like to know the reasons why the solution(s) works and why the faulty code is faulty...EDIT: Just so you know the details of this particular code, I will not have access to anything other than the code between the <body> tags of this page - I am editing the code for my listing template for selling items on eBay.
Link to comment
Share on other sites
pulpfiction Dedicated Member

pulpfiction

Posted
Posted

1. Default values for margin-left and margin-right will be zero, if not mentioned.2. The size of DIV [without width=100%] will be of exactly same as the size of the table, [div width grows with the size of table] so when they both are of the same size, even when you would use text-align:center it will not show any effect.Once you give "width:100%" for div, size of the div will be equal to size of page and the table can be centered.3. This will give some idea about doctype http://www.w3schools.com/xhtml/xhtml_dtd.asp<table style:"width: 400px;"> OR <table width="400"> both are same. I dont think width aattribute is Deprecated.

Link to comment
Share on other sites
Cipater Newbie

Cipater

Posted
  • Author
Posted
1. Default values for margin-left and margin-right will be zero, if not mentioned.2. The size of DIV [without width=100%] will be of exactly same as the size of the table, [div width grows with the size of table] so when they both are of the same size, even when you would use text-align:center it will not show any effect.Once you give "width:100%" for div, size of the div will be equal to size of page and the table can be centered.3. This will give some idea about doctype http://www.w3schools.com/xhtml/xhtml_dtd.asp<table style:"width: 400px;"> OR <table width="400"> both are same. I dont think width aattribute is Deprecated.

That went a LONG way towards helping me figure this out - thanks for going in depth on the reasons why the code was being interpreted in this way. I haven't looked into the DOCTYPE stuff yet, but will soon. As far as this particular problem is concerned, the DOCTYPE declaration is a bit moot as I will not have access to anything outside of the <body> tags.For some reason, my sleep-deprived mind didn't consider the possibility that the margin-left/right attributes could have a default of 0 rather than auto LOL. A lot of how the browers are interpreting that code makes sense since that little mini-epiphany! :) For whatever reason, <div style="width: 100%; text-align: center;"> on it's own did not center the table - again this may have to do with the DOCTYPE declaration that is being set by the HTML editor, I dunno.Because of this I went with the editor's solution of simply setting the margin-left/right attribute to auto and doing away with the <div> altogether.This worked fine when viewed in Firefox, but IE6 refused to center the table with this code alone (another mini-mystery I guess).By using BOTH solutions, the table is now being centered in both browsers, and I don't have the courage to attempt viewing it in Opera right now LOL :) .Thanks for all the help - now if I can just figure out the best way to format my font size I'll be more or less happy - I may have another question or two about opinions on that in another thread :)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...