Page 1 of 1

HTML Table align="center" problem

Posted: Tue Nov 01, 2005 3:22 pm
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.

Posted: Tue Nov 01, 2005 3:45 pm
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>

Posted: Tue Nov 01, 2005 5:23 pm
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?

Posted: Tue Nov 01, 2005 5:59 pm
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?

Posted: Tue Nov 01, 2005 10:37 pm
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