# Question #2! centering a table!



## Adrian. (Nov 28, 2007)

Question number 2! the last one, I promise. 

I just need to centre a table. 

I've created a table with three columns and have embedded video in each one. Everything works, I just want to centre the table.

Here is the link: http://dl.dropbox.com/u/460029/blue/movie.html

Here's the code:


```
<html>
<head>
<title>antikythera mechanism</title>
<style type="text/css">
<!--
#content {
background-color: #fff;
padding: 20px;
width: 600px;
margin-right: auto;
margin-left: auto;
}
body {
font-family: Verdana, Geneva, sans-serif;
background-color: #EAFFEF;
}
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 24px;
border-bottom: solid 1px #ccc;
}
p {
font-size: 12px;
}
img {
padding: 2px;
border: 1px solid #ccc;
float: left;
margin: 10px;
}
-->
</style>


</head>

<body>
<div id="content">
<h1> The Antikythera Mechanism </h1>

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fricci.glendon.yorku.ca%2Fcamara%2Fblue%2F&layout=standard&show_faces=false&width=450&action=like&colorscheme=light&height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowTransparency="true"></iframe>


<table class="sortable" style="margin-left:auto;margin-right:auto">
<table align="center">

<tr bgcolor="#ECECEC">
<th>Video by Nature pt. 1</th>
<th>Lego Replica</th>
<th>Video by Nature pt. 2</th>

</tr>
<tr>
<td><iframe title="YouTube video player" width="600" height="368" src="http://www.youtube.com/embed/DiQSHiAYt98?rel=0" frameborder="0" allowfullscreen></iframe></td>
<td><iframe src="http://player.vimeo.com/video/17648733" width="600" height="368" frameborder="0"></iframe></td>

<td><iframe title="YouTube video player" width="600" height="368" src="http://www.youtube.com/embed/znM0-arQvHc?rel=0" frameborder="0" allowfullscreen></iframe></td>

</tr>
</div>


</table>



</div>


</body>
```


----------



## MannyP Design (Jun 8, 2000)

It looks like you have two < table > tags at the beginning but only one closing < /table > tag at the end.


----------



## MannyP Design (Jun 8, 2000)

Also, I think you really only need one < table > tag. Is there any reason why there would be two?


----------



## rgray (Feb 15, 2005)

Take out the <table align="center"> line.
Before the first <table.... Insert <center>
After the </table> line put </center>


----------



## Adrian. (Nov 28, 2007)

rgray said:


> Take out the <table align="center"> line.
> Before the first <table.... Insert <center>
> After the </table> line put </center>


Tried that, still nothing.

Do I need CSS to do this? Aligning text is easy-peasy with HTML, I don't understand why it is being so stubborn with tables.


----------



## Guest (Mar 2, 2011)

Couple of pointers:

1. declare a proper doctype! Without doing this you're leaving things open to interpretation which in turn will lead to different browsers doing different things with your code.

2. align=center and <center> do not work in all doctypes, if you choose XHTML for example you're better to use CSS and something like margin: auto; (you are doing something similar with #content right now using margin-left: auto and margin-right: auto)


----------



## Guest (Mar 2, 2011)

Also on looking again ... if you are going to use tables you probably need to make those 3 rows instead of 3 columns if you're trying to do what I think you're trying to do (have them all centred on the page and show up underneath each other)


----------



## johnnyspade (Aug 24, 2007)

Are you sure you want 3 columns and not 3 rows? Stacking those videos on top of each other will fit your page better, and then you don't have to use the table, just drop the videos into some paragraph tags or something. It looks like what you're trying to do is center a table that's 1800px + wide into an area that's 600px wide, which won't work.


----------



## Adrian. (Nov 28, 2007)

I wanted to have the videos spread horizontally, and I wanted to use a table to make the second video centered and the two other flanked on either side. Like a panoramic view.

I don't need a table to stack them vertically, which I might do for simplicities sake. 

How do I declare a docktype? We have not been told about this in class?


----------



## Guest (Mar 2, 2011)

Adrian. said:


> I wanted to have the videos spread horizontally, and I wanted to use a table to make the second video centered and the two other flanked on either side. Like a panoramic view.
> 
> I don't need a table to stack them vertically, which I might do for simplicities sake.
> 
> How do I declare a docktype? We have not been told about this in class?


That would be doctype (no k). If they haven't told you that in class then they missed what should be the first A #1 thing they should have told you IMHO !!!

HTML doctype declaration


----------



## groovetube (Jan 2, 2003)

definitely always try declare a doctype, but your table should center with (table align="center") without the need for css with or without the doctype. (used round brackets for ie) 

don't use a second table tag get rid of it, and put the align="center" in the first table tag. Use quotes on the value "center".

HTH


----------



## Guest (Mar 3, 2011)

groovetube said:


> definitely always try declare a doctype, but your table should center with (table align="center") without the need for css with or without the doctype. (used round brackets for ie)
> 
> don't use a second table tag get rid of it, and put the align="center" in the first table tag. Use quotes on the value "center".
> 
> HTH


Yep ... if you're using HTML4 or older this will work, if it's XHTML it's not valid. The example html code looks like a bit of a mix of both, which means it's up the browser to decide how to render (which is never a good idea).

Also not sure if you're prof will go into this or not, but you should always validate your pages with a proper validator (which will point out things like the missing doctype). If your prof doesn't know what a validator is then they need to be told (nicely) to get with the program! 

The W3C Markup Validation Service


----------



## groovetube (Jan 2, 2003)

it does indeed depend on his doctype.

Better to create a table style and use: margin: 0 auto;


----------



## Dadi_oh (Nov 9, 2010)

Well if it's a round table then you measure the diameter, take half that, mark that on the center of the table. Then hang a plumb line from the chandelier and get it directly over the mark.

If it is a square or rectangular table then draw two lines corner to corner and then set it up under the plumb line where they intersect.

Sorry, couldn't resist


----------

