BoardMod Mirror - Simple HTML question!

jfk New Member Offline I love YaBB 1G - SP1.2! Posts: 44 Joined: Oct 14^th, 2007	Simple HTML question! Jan 26^th, 2009 at 6:37pm	Print Post
	Ok, I'm sure this is simple for you guys, but with my knowleadge of HTML, CSS, etc everything is quite hard! I'm building a simple web page and all I want to do is vertically center a table on a page! I know that <center> will center the whole table horizontally, and I know its align="center" for centering horizontally in a cell, likewise valign="middle" for vertically centering, but how do I center the whole table on a page for different size screens? I've done a 'google' and found CSS for centering blocks but that doesn't seem to work on a table. I've also read about negative percentages ( ) whatever they are! So far I haven't found out how to do it, but it musty be possible. Mustn't it? Any clues to help me along gratefully received! John

	My YaBB forum can be found at www.Rabbiters.co.uk
	IP Logged

deti

Full Member

Offline

YaBB is the best!!!

Posts: 101
Location: Prien am Chiemsee
Joined: Mar 13^th, 2008

Re: Simple HTML question!
Reply #1 - Jan 26^th, 2009 at 7:03pm

Print Post

Not as simple as you think!

Probably I would let a JavaScript calculate the height of the window and the height of the table. Then I would let it calculate the amount of pixels the table must begin from the top of the window to be in the middle and then I would set this value into the style attribute of the table.

That's all Wink

Was immer Du tun kannst oder erträumst tun zu können, beginne es. Kühnheit besitzt Genie, Macht und magische Kraft. Beginne es jetzt.		Whatever you can do or dream you can, begin it. Boldness has genius, power and magic in it. Begin it now.
	Johann Wolfgang Goethe

IP Logged

Carsten God Member Offline ...to much YaMS Posts: 3281 Location: Langå Joined: Aug 2^nd, 2002 Gender:	Re: Simple HTML question! Reply #2 - Jan 26^th, 2009 at 10:36pm	Print Post
	Something simple like this should do the trick Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Center table</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> </head> <body> <table width="80%" align="center" border="1" id="mytable" style="position: absolute; top: 0; left: 0;"> <tr><td>Cell a1</td><td>Cell a2</td><td>Cell a3</td></tr> <tr><td>Cell b1</td><td>Cell b2</td><td>Cell b3</td></tr> <tr><td>Cell c1</td><td>Cell c2</td><td>Cell c3</td></tr> <tr><td>Cell d1</td><td>Cell d2</td><td>Cell d3</td></tr> </table> <script language="JavaScript1.2" type="text/javascript"> <!-- if (!document.all) { var myheight = window.innerHeight; var mywidth = window.innerWidth; } else { var myheight = document.documentElement.clientHeight; var mywidth = document.documentElement.clientWidth; } var mytableheight = document.getElementById('mytable').offsetHeight; var mytablewidth = document.getElementById('mytable').offsetWidth; document.getElementById('mytable').style.top = parseInt((myheight - mytableheight) / 2) + 'px'; document.getElementById('mytable').style.left = parseInt((mywidth - mytablewidth) / 2) + 'px'; --> </script> </body> </html>
	« Last Edit: Jan 28^th, 2009 at 3:16pm by Carsten »
	If you knock your head against a brick wall and hear a hollow sound, it's not necessarily coming from the wall.
	IP Logged

deti

Full Member

Offline

YaBB is the best!!!

Posts: 101
Location: Prien am Chiemsee
Joined: Mar 13^th, 2008

Re: Simple HTML question!
Reply #3 - Jan 26^th, 2009 at 10:45pm

Print Post

You are really good and quick in JS Carsten!!!

Smiley

Was immer Du tun kannst oder erträumst tun zu können, beginne es. Kühnheit besitzt Genie, Macht und magische Kraft. Beginne es jetzt.		Whatever you can do or dream you can, begin it. Boldness has genius, power and magic in it. Begin it now.
	Johann Wolfgang Goethe

IP Logged

jfk New Member Offline I love YaBB 1G - SP1.2! Posts: 44 Joined: Oct 14^th, 2007	Re: Simple HTML question! Reply #4 - Jan 27^th, 2009 at 10:06pm	Print Post
	Deti, I haven't a clue what you are on about Carsten, thanks for that, have copied and pasted and it works fine (as I would expect ) but a quick question! I'd found another solution using the div command as below Code <table width="100%" id="table1" style="border-collapse: collapse" height="100%"> <tr> <td><div align="center"> <table width="850" id="table2" style="border-collapse: collapse" > <tr><td>blah blah </td></tr> </table> </div> </td> </tr> </table> I'm only using the page as a simple index to a gallery so there's not masses of information being loaded. My question is what would be the preferred option? Thanks again to both of you for the help. John

	My YaBB forum can be found at www.Rabbiters.co.uk
	IP Logged

Carsten God Member Offline ...to much YaMS Posts: 3281 Location: Langå Joined: Aug 2^nd, 2002 Gender:	Re: Simple HTML question! Reply #5 - Jan 28^th, 2009 at 3:21pm	Print Post
	jfk wrote on Jan 27^th, 2009 at 10:06pm: My question is what would be the preferred option? If you care about valid code you should use the javascript solution. There's actually no such attribute as 'height="100%"' for tables. I've changed the code example in my previous reply to make it "testable".

	If you knock your head against a brick wall and hear a hollow sound, it's not necessarily coming from the wall.
	IP Logged

jfk New Member Offline I love YaBB 1G - SP1.2! Posts: 44 Joined: Oct 14^th, 2007	Re: Simple HTML question! Reply #6 - Jan 28^th, 2009 at 8:02pm	Print Post
	Hi Carsten I don't know what you've done but the result now gives a table off up to the left of the page so that exactly half (horizontally and vertically) is shown John

	My YaBB forum can be found at www.Rabbiters.co.uk
	IP Logged

Carsten God Member Offline ...to much YaMS Posts: 3281 Location: Langå Joined: Aug 2^nd, 2002 Gender:	Re: Simple HTML question! Reply #7 - Jan 28^th, 2009 at 9:24pm	Print Post
	hehe - my best guess is that you did not copy/paste all of the new code?? Pay special attension on the doc type and html declaration at the top of the code and: Code var myheight = document.body.clientHeight; var mywidth = document.body.clientWidth; has been changed to: Code var myheight = document.documentElement.clientHeight; var mywidth = document.documentElement.clientWidth; to make it xhtml compliant.

	If you knock your head against a brick wall and hear a hollow sound, it's not necessarily coming from the wall.
	IP Logged

jfk New Member Offline I love YaBB 1G - SP1.2! Posts: 44 Joined: Oct 14^th, 2007	Re: Simple HTML question! Reply #8 - Jan 28^th, 2009 at 11:03pm	Print Post
	Ahh, I missed the top bit!!! I told you I wasn't very good at this, give me ferrets anyday Thanks again. John

	My YaBB forum can be found at www.Rabbiters.co.uk
	IP Logged

Dave Rapp Junior Member Offline Have a great day!!! Posts: 89 Location: Cameron County Joined: Aug 30^th, 2002 Gender:	Re: Simple HTML question! Reply #9 - Mar 13^th, 2009 at 12:37am	Print Post
	How about a simple align="center" attribute added to the table tag. <table align="center"> I use it all the time-plain simple and it works.

	If you choose not to decide you still have made a choice.
	WWW YIM IP Logged

jfk New Member Offline I love YaBB 1G - SP1.2! Posts: 44 Joined: Oct 14^th, 2007	Re: Simple HTML question! Reply #10 - Mar 13^th, 2009 at 8:11am	Print Post
	That attribute centres the table horizontally on the page - I wanted to centre it vertically

	My YaBB forum can be found at www.Rabbiters.co.uk
	IP Logged

Dave Rapp Junior Member Offline Have a great day!!! Posts: 89 Location: Cameron County Joined: Aug 30^th, 2002 Gender:	Re: Simple HTML question! Reply #11 - Mar 13^th, 2009 at 9:57am	Print Post
	Sorry-didn't see that one.

	If you choose not to decide you still have made a choice.
	WWW YIM IP Logged