HTML Table align="center" problem

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
jayshields
DevNet Resident
Posts: 1912
Joined: Mon Aug 22, 2005 12:11 pm
Location: Leeds/Manchester, England

HTML Table align="center" problem

Post by jayshields »

Hi,

Surely a simple enough question. I'm trying to align my table to the centre of the page, tried <center>table here</center>, tried <table align="center">table data here</table>.

I can see it must be a problem with the table columns but I have proof-read my code twenty times now and I can't find it.

Any help is much appreciated.

Code: Select all

<table border="0" align="center">
	<tr>
		<td><b>Name:<font color="red">*</font></b></td>
		<td><input type="text" name="name" maxlength="30" size="30" value="<?php if (isset($_POST['name'])) echo $_POST['name']; ?>"></td>
	</tr>
	<tr>
		<td><b>Address:<font color="red">*</font></b></td>
		<td><textarea name="address" maxlength="200" cols="30" rows="5"><?php if (isset($_POST['address'])) echo $_POST['address']; ?></textarea></td>
	</tr>
	<tr>
		<td><b>Phone:<font color="red">*</font></b></td>
		<td><input type="text" name="phone" maxlength="20" size="20" value="<?php if (isset($_POST['phone'])) echo $_POST['phone']; ?>"></td>
	</tr>
	<tr>
		<td><b>Email:<font color="red">*</font></b></td>
		<td><input type="text" name="email" maxlength="40" size="40" value="<?php if (isset($_POST['email'])) echo $_POST['email']; ?>"></td>
	</tr>
	<tr>
		<td><b>Date:</b></td>
		<td>From:<font color="red">*</font> 
				<select name="datefromday">
					<option value="none">--</option>
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
					<option value="5">5</option>
					<option value="6">6</option>
					<option value="7">7</option>
					<option value="8">8</option>
					<option value="9">9</option>
					<option value="10">10</option>
					<option value="11">11</option>
					<option value="12">12</option>
					<option value="13">13</option>
					<option value="14">14</option>
					<option value="15">15</option>
					<option value="16">16</option>
					<option value="17">17</option>
					<option value="18">18</option>
					<option value="19">19</option>
					<option value="20">20</option>
					<option value="21">21</option>
					<option value="22">22</option>
					<option value="23">23</option>
					<option value="24">24</option>
					<option value="25">25</option>
					<option value="26">26</option>
					<option value="27">27</option>
					<option value="28">28</option>
					<option value="29">29</option>
					<option value="30">30</option>
					<option value="31">31</option>
				</select>
				<select name="datefrommonth">
					<option value="none">--</option>
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
					<option value="5">5</option>
					<option value="6">6</option>
					<option value="7">7</option>
					<option value="8">8</option>
					<option value="9">9</option>
					<option value="10">10</option>
					<option value="11">11</option>
					<option value="12">12</option>
				</select>
				<select name="datefromyear">
					<option value="none">----</option>
					<option value="2005">2005</option>
					<option value="2006">2006</option>
					<option value="2007">2007</option>
					<option value="2008">2008</option>
				</select>
				<br>
				To: <font color="red">*</font>
				<select name="datetoday">
					<option value="none">--</option>
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
					<option value="5">5</option>
					<option value="6">6</option>
					<option value="7">7</option>
					<option value="8">8</option>
					<option value="9">9</option>
					<option value="10">10</option>
					<option value="11">11</option>
					<option value="12">12</option>
					<option value="13">13</option>
					<option value="14">14</option>
					<option value="15">15</option>
					<option value="16">16</option>
					<option value="17">17</option>
					<option value="18">18</option>
					<option value="19">19</option>
					<option value="20">20</option>
					<option value="21">21</option>
					<option value="22">22</option>
					<option value="23">23</option>
					<option value="24">24</option>
					<option value="25">25</option>
					<option value="26">26</option>
					<option value="27">27</option>
					<option value="28">28</option>
					<option value="29">29</option>
					<option value="30">30</option>
					<option value="31">31</option>
				</select>
				<select name="datetomonth">
					<option value="none">--</option>
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
					<option value="5">5</option>
					<option value="6">6</option>
					<option value="7">7</option>
					<option value="8">8</option>
					<option value="9">9</option>
					<option value="10">10</option>
					<option value="11">11</option>
					<option value="12">12</option>
				</select>
				<select name="datetoyear">
					<option value="none">----</option>
					<option value="2005">2005</option>
					<option value="2006">2006</option>
					<option value="2007">2007</option>
					<option value="2008">2008</option>
				</select></td>
	</tr>
	<tr>
		<td colspan="2"><textarea name="comments" maxlength="1000" rows="10" cols="50"><?php if (isset($_POST['comments'])) { echo $_POST['comments']; } else { echo 'Please enter any further information/comments if necessary.'; } ?></textarea></td>
	</tr>
	<tr>
		<td colspan="2"><i><b>Please note:</b> This booking form does not guarantee your booking for the dates you choose, we will get back to you about the success of your booking ASAP.</i></td>
	</tr>
	<tr>
		<td colspan="2"><center><input type="submit" name="submit" value="Submit"></center></td>
	</tr>
</table>
You can see it in action here http://www.jay-designs.co.uk/Noname2.html

Thanks alot.

EDIT: 30 seconds later I added width="60%" into the table tag and now it's OK. It's a silly work around but it works OK.

If you know the real solution please still post it for future reference.

Thanks.
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

You need the table to have a specified width for it to go to the center of the page. That way works how you've done it yeah.

<off-topic>

When you start getting into CSS and replacing tables with divs you need a little more wizarddry (margin: auto is the key here... text-align: center is to make it work in IE).

Code: Select all

<div style="width: 100%; text-align: center;">
    <div style="width: 700px; background: #DDDDFF; text-align: left; margin: auto;">
        This DIV is centered
    </div>
</div>
</off-topic>
User avatar
jayshields
DevNet Resident
Posts: 1912
Joined: Mon Aug 22, 2005 12:11 pm
Location: Leeds/Manchester, England

Post by jayshields »

hhmm, i would swear i've centered tables before without giving them widths but i must be dreaming.

anyway thanks for elaborating on my post, but why would i use a div instead of a table; they are 2 seperate things? i mean, i wouldnt be able to create what i created in my link with a div instead of a table would i? or do you mean make a centred div and put a non-aligned table inside it?
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

jayshields wrote:hhmm, i would swear i've centered tables before without giving them widths but i must be dreaming.

anyway thanks for elaborating on my post, but why would i use a div instead of a table; they are 2 seperate things? i mean, i wouldnt be able to create what i created in my link with a div instead of a table would i? or do you mean make a centred div and put a non-aligned table inside it?
You can create some very elaborate layouts using divs with CSS... it's called XHTML and it's the latest strict standard from the W3C. In terms of making your content accessible to the widest audience (screen readers etc) XHTML is the way to go.

I actually find it rather odd feeling if I sit down and try to do layouts or forms in tables these days since I'm so used to doing it in CSS.

http://www.alistapart.com/
http://www.csszengarden.com/

EDIT | Have you viewed that link you posted in Firefox?
Charles256
DevNet Resident
Posts: 1375
Joined: Fri Sep 16, 2005 9:06 pm

Post by Charles256 »

yes.plese view it in firefox :: chuckles :: also, use a loop when you're options aer just numbers.so much more compact!:-D
Post Reply