Table alignment in html?

Question

I am building this website at:

http://hireemily.com/ladidolls/shop.html

The products are not lining up in the tables. Can you view the source and tell me why?

Here is the code for the table:

Book Baby Addie

7" Doll with clothes

$11.00

Baby Book Bailey

7" Doll with Clothes

$11.00

Baby Book Camille

7" Doll with Clothes

$11.00

Book Baby Clothes

Just For Girls

$4.25

Answer 1

Validation states that you have 20 errors. Correction of these errors might correct your problem. Just looking at your code, you have a closing table tag following the code for Quiet Books. Then immediately follow is a tag, then a opening table tag.



Css styling of the table could make this a great deal simpler and easier to read. I suggest that since you have some styling also style the table and eliminate all the formatting from within the table. Since you have more than one table, this could require two ID's, one for each table.



I used Opera to view. Then the problem was apparent. BTW, after the html is corrected, also validate the CSS to see if there are errors.

Answer 2

Tables aren't made for resting to the right and left of one another. The way you can do it is by creating a third table (lets call it table C) with 1 row and 2 columns. Set table C's width to 100%. Place table A in the left column of table C and place table B in the right column of table C. Set the border of table C to 0, so it's invisible to the visitor. It will appear as though table A and B are next to one another.

Answer 3

Try this below mention code:

Book Baby Addie



7" Doll with clothes



$11.00

Baby Book Bailey



7" Doll with Clothes



$11.00

Baby Book Camille



7" Doll with Clothes



$11.00

Book Baby Clothes



Just For Girls



$4.25

Answer 4

I will test this on Firefox tonight and let you know what I find - you should also consider testing it with Opera, for maximum compatibility



Checked at 17:58GMT - using MSIE7, Firefox and Opera - alignment looks fine. If you zoom out in Firefox, not all the text changes size, that's all I could spot. HTH.



Try the free go on Netmechanic, and see what HTML errors it now flags up (link below)

Answer 5

http://validator.w3.org/check?uri=http%3A%2F%2Fhireemily.com%2Fladidolls%2Fshop.html&charset=%28detect%20automatically%29&doctype=Inline&group=0 lists some of the errors in the page