<html>
<body style='text-align:[COLOR="Red"]center[/COLOR]'>
<table>
<tr>
<td>[B]hello[/B]</td>
</tr>
</table>
</body>
</html>
With the code above, hello is in the center with IE7, but it is on the left side with google chrome and fireFox.
How can I make the table which has “hello” in the center with google chrome and fireFox?
I suggest to you that you use Divs.http://www.blakeanthony.net/Center.html
My Example is 100% Valid.
But if you want to use tables go right ahead
table {
text-align:center;
margin-left:auto;
margin-right:auto;
}
Target your table. 
<style>
table {
text-align:center;
margin-left:auto;
margin-right:auto;
}
</style>
</head>
<body [COLOR="Magenta"]style='text-align:center'[/COLOR]>
<table>
<tr>
<td style='width:250px;[COLOR="Blue"]text-align:left;[/COLOR]
[COLOR="Magenta"]background-color:pink'[/COLOR]>
<table>
<tr>
<td [COLOR="Blue"]style='background-color:blue'[/COLOR]>blue</td>
</tr>
</table>
</td>
</tr>
</table>
</body></html>
pink background table is in the center. and I like to put the blue background table on the left inside of the pink table.
But the blue table is still in the center inside of the pink table
although I wrote text-align:left;
How can I make it the pink background table in the center and the blue background table on the left side of the pink background table?
joon:
You’re going the wrong way.
The reason IE7 was centering your table (which is a block element) with the body’s “text-align: center” is because you are in Quirks Mode-- where IE7 is acting like IE5 (what your grandma used to use back in the 90’s). To correct this, you’ll need a Doctype on your page.
Then setting a width on your table and using margin: 0 auto in the css will center your table (any block can be centered with this technique).
Now you are nesting tables-- a Bad Thing, generally. But ok. Let’s look.
But the blue table is still in the center inside of the pink table
although I wrote text-align:left;
Text-align… aligns inlines such as text. Why would you try to align a block like a table with text align? Text align aligns text. Besides, in your CSS (in your style tag) you’ve said, ALL tables, center:
table {
text-align: center;
margin: 0 auto;
}
This means all tables, not just the first one.
Tables have slightly different rules than other blocks, but removing all the “text-aligns” you have in your html, you could center the pink table on the page and let the blue table stay to the left (which is a default usually).
Give the pink table an id.
<table id=“pink”>
In your CSS, you can set a width on the pink table and center it with margin: 0 auto; the 0 means no top or bottom margin, and auto refers to the sides.
#pink {
width: 700px;
margin: 0 auto;
}
But none of this will work in IE if you let it stay stupid. Use a doctype, and use it properly.
text-align: center; should not be used with body really. IE7 seem to show horizontal scrollbar but center the content.
best approach is using a div container to center the contents.
Content {
margin-left:auto;
margin-right:auto;
}
<div id=“content”>
//------------CONTENT
</div>
It’s used to center pages in ie5.x as they don’t understand auto margins.
My brain is in the same level with ie5. I don’t understand auto margins.
<html>
<head>
<style>
#center {
margin: 0 auto;
}
</style>
</head>
<body>
<table cellpadding='0' cellspacing='0' border='0' [COLOR="Red"]id='center'[/COLOR]>
<tr>
<td colspan='3' style='height:1px;background-color:black'></td>
</tr>
<tr>
<td style='width:1px;background-color:black'></td>
<td style='width:100px;height:50px;background-color:pink'></td>
<td style='width:1px;background-color:black'></td>
</tr>
<tr>
<td colspan='3' style='height:1px;background-color:black'></td>
</tr>
</table>
</body>
</html>
Why is the table not centered?
How can I make the table be centered?
I thought we just explained this lol
Your table is centred in all browsers except IE because you don’t have a doctype. Without a doctype IE reverts to quirks mode and behaves more like ie5 and doesn’t understand auto margins.
You must always have a valid doctype.
Here is the page centred in every browser including ie5 -8.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
text-align:center
}
#center {
margin: 0 auto;
text-align:left;
}
</style>
</head>
<body>
<table cellpadding='0' cellspacing='0' border='0' id='center'>
<tr>
<td colspan='3' style='height:1px;background-color:black'></td>
</tr>
<tr>
<td style='width:1px;background-color:black'></td>
<td style='width:100px;height:50px;background-color:pink'></td>
<td style='width:1px;background-color:black'></td>
</tr>
<tr>
<td colspan='3' style='height:1px;background-color:black'></td>
</tr>
</table>
</body>
</html>
Doctypes are a very important role in Webdevelopment.You must learn them if you ever want your HTML pages to work right.
Heres some Resources.
http://htmlhelp.com/tools/validator/doctype.html
http://www.alistapart.com/stories/doctype/
http://www.learnwebdesignonline.com/tutorials/html/about-doctypes-quirks-mode
http://reference.sitepoint.com/css/doctypesniffing
<style type="text/css">
#center {
margin: 0 auto;
}
</style>
</head>
<body>
<table cellpadding='0' cellspacing='0' border='0'[COLOR="Red"] id='center'[/COLOR]>
<tr>
<td colspan='3' style='height:1px;background-color:black'></td>
</tr>
<tr>
<td style='width:1px;background-color:black'></td>
<td style='width:100px;height:50px;
background-color:[b][COLOR="Red"]yellow[/COLOR][/b];text-align:[COLOR="Red"]right[/COLOR]'>
[COLOR="DarkRed"]
<table cellpadding='0' cellspacing='0' border='0'>
<tr>
<td style='background-color:[[/COLOR]b][COLOR="red"]pink[/COLOR][/b]'>
put this pink table on the right side of the yellow table
[COLOR="DarkRed"] </td>
</tr>
</table>[/COLOR]
</td>
<td style='width:1px;background-color:black'></td>
</tr>
<tr>
<td colspan='3' style='height:1px;background-color:black'></td>
</tr>
</table>
</body>
</html>
How can I put the pink table on the right side of the yellow table in google chrome?
(docType is ommited for short.)
Hi,
The question doesn’t make a lot of sense as the pink table is inside the yellow cell that contains it.Do you have other content in that yellow cell apart from the table? You could float the table to the right assuming there’s room inside the cell which would mean the inner table would need a smaller width than the cell otherwise it will just be 100% width.
Why don’t you use 2 cells with different colours?
I can’t really work out what you want for the above so you may need to go into more detail as to what you are trying to do exactly:)
I can use multiple cells and multiple rows. Actually I am a table guy(?).
But sometimes I need table which is on the right side of another table.
How can I float the table to the right inside another table cell?
(I am sorry for my English is not good.)
Just add a class to to the table and float it.
e.g.
table.inner {float:right;width:50px}
The table must come before any other content in that same cell.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#center {
margin: 0 auto;
}
[COLOR="Red"]table.inner {float:right:width:50px}[/COLOR]
</style>
</head>
<body>
<table cellpadding='0' cellspacing='0' border='0' id='center'>
<tr>
<td colspan='3' style='height:1px;background-color:black'></td>
</tr>
<tr>
<td style='width:1px;background-color:black'></td>
<td style='width:500px;height:50px;
background-color:yellow;text-align:right'>
<table cellpadding='0' cellspacing='0' border='0' [COLOR="red"]class='inner'[/COLOR]>
<tr>
<td style='background-color:[b]pink[/b]'>
put this pink table<br>
on the right side<br>
of the yellow table
</td>
</tr>
</table>
</td>
<td style='width:1px;background-color:black'></td>
</tr>
<tr>
<td colspan='3' style='height:1px;background-color:black'></td>
</tr>
</table>
</body>
</html>
The code above doens’t work. How do I fix it?
I had a typo in the css
It should be like this:
table.inner {
[B]float:right;width:50px[/B]
}
I got it. Thank you very much.