Jump to content

<table align="center"> by css

midnite

By midnite
in CSS

Recommended Posts

midnite Member

midnite

Posted
Posted

in w3schools, i found this: align="left|center|right" - Aligns the table. Deprecated. Use styles instead.Of course i want to use CSS, but CSS seems always not cooperate with me :)

<table border="1" align="center"><tr><td>this can</td></tr></table><table border="1" style="text-align: center;"><tr><td>this cannot</td></tr></table><div style="text-align: center; border: 1px solid red;"><table border="1"><tr><td>this cannot too :(</td></tr></table></div>

Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted 
<div style="text-align: center; border: 1px solid red;">   <table border="1" style="margin: 0 auto">	  <tr>		 <td>this DOES</td>	  </tr>   </table></div>

Of course, you'll want those style declarations in a style sheet.

Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

Are you trying to make the table centered on the page or to center the text in the table?Try this, it centers text in the table cell:

<table style="border: 1px solid black">  <tr>	<td style="text-align: center">	  Some text	</td>  </tr></table>

To center the table on the page, give it a static width and give the margin "0 auto".

Link to comment
Share on other sites
midnite Member

midnite

Posted
  • Author
Posted

Deirdre's Dad, thanks for the trick "margin: 0 auto;" :) i found "margin: auto;" works also. What is that "zero" for?Thanks Ingolme. i want to make the table centered on the page :)

Link to comment
Share on other sites
midnite Member

midnite

Posted
  • Author
Posted

oh in fact only 

<table style="margin: auto">

will works. Not necessary to have 

<div style="text-align: center;">

Is it true in your browsers? :)

Link to comment
Share on other sites
Synook w3schools Guru

Synook

Posted
Posted

Some browsers mess up if you don't put the zero, as they can't render "auto" for top and bottom margins.

Link to comment
Share on other sites
190319m9 Newbie

190319m9

Posted
Posted

Well the problem is that you wish to centre align the table but in styles you are declaring text-alignment, except first example of your problem. In second and third example you can use 

align="center"

attribute for table tags.

Link to comment
Share on other sites
rzea Member

rzea

Posted
Posted

For margin:0; to actually 'visually' work you need to assign a width: to the element.If you use margin:0; and assign a width to it, it will work in IE6... it will work in ALL browsers.

Link to comment
Share on other sites
MarcCools Newbie

MarcCools

Posted
Posted

Hi,I want a page that is centerd. So I center the <div id="container"> in the CSS.This is my code:

<body id="top"><div id="container"><!-- *** Header of the page *** --><div id="header"></div><!-- *** Menu *** --><div id="menu_wrapper_outside"><div id="menu_wrapper_inside"><div id="menu"><a class="mainmenu" href="page.php?pagename=welkom">Welkom</a><a class="mainmenu" href="page.php?pagename=contact">Contactgegevens</a><a class="mainmenu" href="page.php?pagename=route">Routebeschrijving</a>...</div></div></div>...</div></body></html>

This is a part of the CSS:

html, body {	margin : 0 auto;	/*	padding : 0; 	height : 100%; 	width : 100%;	align : center;	*/}body {	font-family : verdana, arial, Georgia, "Times New Roman", Times, serif;	font-size : 1em;	font-weight : normal;	line-height : 1.5em;	color : #0000AA;	background-image : url(background.jpg);	background-repeat : repeat;}#container {	margin : 0 auto;	width : 786px;	/*	margin-bottom : 25px;  	padding : 5px;	*/	background-color : #EEFFCC;	opacity : 0.8;	filter : alpha(opacity=80);}

But the page is shown on the left side and not centerd.How do I correct it and why?Thanks.Marc

Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

I don't know why that's happening, but you have two useless things in your document that you could do without:1. <body id="top">The body tag doesn't need an ID. There's only one, you can reference it in CSS by its tag name, and in JAvascript by document.body or document.getElementsByTagName("body")[0]2. html, body { margin : 0 auto; /* ... */}This probably is the root of your problem. The <html> and <body> elements are the document itself, you can give it margin: 0;, but margin: 0 auto; could hav strange effects on it.

Link to comment
Share on other sites
MarcCools Newbie

MarcCools

Posted
Posted
I don't know why that's happening, but you have two useless things in your document that you could do without:1. <body id="top">The body tag doesn't need an ID. There's only one, you can reference it in CSS by its tag name, and in JAvascript by document.body or document.getElementsByTagName("body")[0]
True. The top is used for going to the top of the page.
2. html, body { margin : 0 auto; /* ... */}This probably is the root of your problem. The <html> and <body> elements are the document itself, you can give it margin: 0;, but margin: 0 auto; could hav strange effects on it.
This was my latest attempt. Also tried between the /* */ and with just 0 and so on. Also at the div-container level I tried a lot of stuff.I known. Some one has to be the stupid one. Never thought it would be me. :)
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...