Center text in a table

[Certificates]

I wonder if once again I mau seek help as I don't seem to be able to crack this one.

What I actually want is for the numbers 1 to 9 to be in the centre of their relevant square.

I am using this CSS sheet which relates to more than just the table called "description"

body {
color: black; font-weight:bolder;font-style:italic;font-size: 15px;;
background-color: #8EE5EE }

#ed td, #ed th
{
font-size:15px;font-weight:bolder;font-style:italic;
border:0px solid #8EE5EE;
padding:3px 7px 2px 7px;
}
#customers th
{
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#8EE5EE;
color:#ffffff;
}
#ed tr.alt td
{
color:#000000;
background-color:#8EE5EE;
}

#description td, #description th
{
font-size:15px;font-weight:bolder;font-style:italic;
border:1px solid #000000;
}
#customers th
{
font-size:1.1em;
textAlign:center;

background-color:#8EE5EE;
color:#ffffff;
}
#description tr.alt td
{
color:#000000;
background-color:#8EE5EE;
}
p.copy:after {
content: " 1999-2011"
}
}p { margin-top:2.5em; }
h6
a:link {
color: black }
a:visited {
color: black }A{text-decoration:none



And this is the HTML for the relevant table. All the number remain in the left of their box regardless of what I do ! I guess it's possible to remove the necessity to have seperate style elements for the cvertical text in the columns too, but at this stage of my CSS learning, that's beyond me (;-)))


<table id="description" border="1">
<tr>
<td WIDTH="5%">Cols: 1</td>
<td WIDTH="5%"> 2</td>
<td WIDTH="5%"> 3</div></td>
<td WIDTH="5%"> 4</div></td>
<td WIDTH="5%"> 5</div></td>
<td WIDTH="5%"> 6</div></td>
<td WIDTH="5%"> 7</div></td>
<td WIDTH="5%"> 8</div></td>
<td WIDTH="60%">9</div></td>
</tr WIDTH="5%"><td WIDTH="5%">Civil Parish</div></td>
<td WIDTH="5%">Municipal Borough</div></td>
<td WIDTH="5%">Municipal Ward</div></td>
<td WIDTH="5%">Urban Sanitary District</div></td>
<td WIDTH="5%">Town or Village, or Hamlet</div></td>
<td WIDTH="5%">Rural Sanitary District</div></td>
<td WIDTH="5%">Parliamentary Borough or Division</div></td>
<td WIDTH="5%">Ecclesiastical Parish or District</div></td>
<td WIDTH="5%">Description of Boundaries and Content of Enumeration District</div></td></tr>
<td WIDTH="5%"><style>
<!--
.verticaltext {
writing-mode: tb-rl;
filter: flipv fliph;
}
-->
</style> <div class="verticaltext"><BR>Ashton&nbsp;Under&nbsp;Lyne</div> </td>
<td WIDTH="5%"><td<style>
<!--
.verticaltext {
writing-mode: tb-rl;
filter: flipv fliph;
}
-->
</style> <div class="verticaltext"><div align="center">----------</div></div> </td>
<td WIDTH="5%"><style>
<!--
.verticaltext {
writing-mode: tb-rl;
filter: flipv fliph;
}
-->
</style> <div class="verticaltext"><div align="center">----------</div></div> </td>
<td WIDTH="5%"><style>
<!--
.verticaltext {
writing-mode: tb-rl;
filter: flipv fliph;
}
-->
</style> <div class="verticaltext">U&nbsp;S&nbsp;D</div> </td>
<td WIDTH="5%"><style>
<!--
.verticaltext {
writing-mode: tb-rl;
filter: flipv fliph;
}
-->
</style> <div class="verticaltext"><div align="center">
<br>Hurst</div></div> </td>
<td WIDTH="5%"><style>
<!--
.verticaltext {
writing-mode: tb-rl;
filter: flipv fliph;
}
-->
</style> <div class="verticaltext"><div align="center">
<br>----------</div></div> </td>
<td WIDTH="5%"><style>
<!--
.verticaltext {
writing-mode: tb-rl;
filter: flipv fliph;
}
-->
</style> <div class="verticaltext"><div align="center">
<br>
<br>Parliamentary</div></div> </td>
<td WIDTH="5%"><style>
<!--
.verticaltext {
writing-mode: tb-rl;
filter: flipv fliph;
}
-->
</style> <div class="verticaltext"><div align="center">
<br>
<br>St&nbsp;Johns's&nbsp;Hurst</div></div> </td>
<td WIDTH="60%">Commencing at one house ... </td></tr>
</table>




What am I missing please ?


Kind regards

Antony

[edited by: alt131 at 9:18 am (utc) on Nov 27, 2011]
[edit reason] Thread Tidy [/edit]

[abushahin]

i cant you see you actually aligning text anywhere correct me if i wrong.
you can put style="text-align:center;" in your table that should do it.
also different browsers behave differently so you'll have to check which one works best.

so where you have <table id="description" border="1">
just do <table id="description" border="1" style="text-align:center">
should work...

[lucy24]

The {text-align: center} and {vertical-align: middle} properties-- which, as abushahin points out, you forgot to set-- apply only to the part of the cell left over after you've subtracted the padding. This is OK with horizontal alignment because you only need to set the same padding on either side. But don't expect it to come out perfect with vertical alignment; there are too many font-related variables.

Why are you setting all those values in the body of the html when you've got a perfectly good CSS to put them in?

[Certificates]

I am setting those values for table width because I am a learner !

Trying to do one step at a time.

I can't get the tetxt to centre, so worrying about the width of each row is a next step.

If it's easy to set the width for those 9 rows, then please tell me, if it's not, I'll try and figure it out.

I know you learn better that way

Thanks

Antony

[lucy24]

Yeowch! I didn't look closely enough at this the first time around.

<td WIDTH="5%">Cols: 1</td>
<td WIDTH="5%"> 2</td>
<td WIDTH="5%"> 3</div></td>
<td WIDTH="5%"> 4</div></td>
<td WIDTH="5%"> 5</div></td>
<td WIDTH="5%"> 6</div></td>
<td WIDTH="5%"> 7</div></td>
<td WIDTH="5%"> 8</div></td>
<td WIDTH="60%">9</div></td>
</tr WIDTH="5%"><td WIDTH="5%">Civil Parish</div></td>
<td WIDTH="5%">Municipal Borough</div></td>
<td WIDTH="5%">Municipal Ward</div></td>
<td WIDTH="5%">Urban Sanitary District</div></td>
<td WIDTH="5%">Town or Village, or Hamlet</div></td>
<td WIDTH="5%">Rural Sanitary District</div></td>
<td WIDTH="5%">Parliamentary Borough or Division</div></td>
<td WIDTH="5%">Ecclesiastical Parish or District</div></td>
<td WIDTH="5%">Description of Boundaries and Content of Enumeration District</div></td>
</tr>
<td WIDTH="5%"><style>

...OK, let's stop there, we're already way over 100%. In any case browsers aren't real strong on the "width = 'x%'" form. They'll only honor it if it doesn't make a mess of their preconceived ideas of what the layout should be. Setting it in the CSS carries more weight.

Luckily my text editor's html preview is extremely forgiving and was clever enough to start a fresh row when it saw that severely malformed </tr without following <tr>. Not all browsers would.

p.copy:after {
content: " 1999-2011"
}
superfluous }
add line break
p { margin-top:2.5em; }
h6
a:link {
color: black }
a:visited {
color: black }
add line break
A{text-decoration:none
missing }

Both HTML and CSS will work perfectly well even if written as one big block of text without a speck of whitespace, but honestly, you're not that strapped for bytes. Your illustrations alone will probably take up more space than the whole page.

Anyway, you're missing some basics. In what follows, all class names are made up. In your CSS, use classes instead of ids. You may later need to change an id, or have two elements using exactly the same format.

table {border-collapse: collapse;}
OR
table {border-collapse: separate; border-spacing: [some number];}

Don't count on every browser to do the same thing, even if there's an official default value.

th { [set all possible properties: font-weight, font-style, text-align, vertical-align, padding etc] }

td {text-align: left; vertical-align: top;}
/* or whatever you want your absolute default to be */

table.demo td {font-size:inherit;font-weight:bold;font-style:italic; border:1px solid #000000;
/* font-weight properties other than "bold" are unevenly supported so better not rely on them */
/* do not set font sizes in pixels unless you want me to personally seek you out and flay you alive */
width: 5%;}
table.demo td.super {width: auto;}
/* leave some wiggle room for padding and borders */

<div align="center">----------</div>

Nuh-uh, not safe, find a different way to draw a line clear across the cell if that's what you need. Here, a simple &mdash; seems like it would convey the information.

<style>
<!--
.verticaltext {
writing-mode: tb-rl;
filter: flipv fliph;
}
-->
</style> <div class="verticaltext"><div align="center">
<br>----------</div></div>

What on earth is all this? :) Put it in your CSS:

td.flipflop {writing-mode: tb-rl;
filter: flipv fliph;}

and call it by name in the table as

<td class = "flipflop">blahblah</td>

... but don't expect most browsers to support it, so better have a Plan B.

[Certificates]

I didn't see how this is obver 100% There are 8 rows at 5% and 1 at 60%

I appreciate your help and will go and try and sort this one out I do believe that trying suggestions is the best way of learning as that way you can see what happens rather than just cutting and pasting everything

Thanks.

Leave this with me for a day or so and I'll let you know how I go on.

Antony

[Certificates]

I have gone back to the basics here but have tried as many combinations as I can think of, but have not got this right.

Using this CSS Style Sheet

#description td{text-align: center; vertical-align: top;} , #description th {
font-size:15px;font-weight:bolder;font-style:italic;
border:1px solid #000000;text-align:center;

td.flipflop {writing-mode: tb-rl;
filter: flipv fliph;}
#description tr.alt td
{

And this HTML

<table id="description" border="1">
<tr>
<td>Cols: 1</td>
<td> 2</td>
<td> 3</td>
<td> 4</td>
<td> 5</td>
<td> 6</td>
<td> 7</td>
<td> 8</td>
<td>9</td></tr>
<tr><td>Parish</td>
<td>Borough</td>
<td>Ward</td>
<td>District</td>
<td>Hamlet</td>
<td>District</td>
<td>Division</td>
<td>District</td>
<td>Description</td></tr><tr>
<td = "flipflop"><div class="verticaltext"><BR>Example text</div></td>
<td = "flipflop"><div class="verticaltext"><BR>&mdash;&mdash;&mdash;&mdash;&mdash;</div></td>
<td = "flipflop"><div class="verticaltext"><BR>&mdash;&mdash;&mdash;&mdash;&mdash;</div> </td>
<td = "flipflop"><div class="verticaltext"><BR>U&nbsp;S&nbsp;D </div></td>
<td = "flipflop"><div class="verticaltext"><br>Hurst </td>
<td = "flipflop"><div class="verticaltext"><br>&mdash;&mdash;&mdash;&mdash;&mdash;</td>
<td = "flipflop"><div class="verticaltext"><br><br>Parliamentary </td>
<td WIDTH="5%"><style>
<!--
.verticaltext {
writing-mode: tb-rl;
filter: flipv fliph;
}
-->
</style> <div class="verticaltext"><div align="center">
<br />
<br />St&nbsp;Example&nbsp;Text</td>
<td>Example text</td></tr>
</table>

The layout works, and the text in columns 1 to 8 is vertical. IF I adjust the HTML and remove the <style> and table width as 5 % then it fails and the text becomes horizontal throughout,

This is the revised HTML which fails.


<table id="description" border="1">
<tr>
<td>Cols: 1</td>
<td> 2</td>
<td> 3</td>
<td> 4</td>
<td> 5</td>
<td> 6</td>
<td> 7</td>
<td> 8</td>
<td>9</td></tr>
<tr><td>Parish</td>
<td>Borough</td>
<td>Ward</td>
<td>District</td>
<td>Hamlet</td>
<td>District</td>
<td>Division</td>
<td>District</td>
<td>Description </td></tr><tr>
<td = "flipflop"><div class="verticaltext"><BR>Example text</div></td>
<td = "flipflop"><div class="verticaltext"><BR>&mdash;&mdash;&mdash;&mdash;&mdash;</div></td>
<td = "flipflop"><div class="verticaltext"><BR>&mdash;&mdash;&mdash;&mdash;&mdash;</div> </td>
<td = "flipflop"><div class="verticaltext"><BR>U&nbsp;S&nbsp;D </div></td>
<td = "flipflop"><div class="verticaltext"><br>Example</td>
<td = "flipflop"><div class="verticaltext"><br>&mdash;&mdash;&mdash;&mdash;&mdash;</td>
<td = "flipflop"><div class="verticaltext"><br><br>St&nbsp;Example text</td>
<td>Example text</td></tr>
</table>

I guess it's a minor adjustment I need but I can't see it

Thanks for any help

Antony

[edited by: alt131 at 12:44 pm (utc) on Nov 30, 2011]
[edit reason] Thread Tidy - Examplifying [/edit]

[lucy24]

#description th
{
font-size:15px;font-weight:bolder;font-style:italic;
border:1px solid #000000;text-align:center;

Before you continue beating your head against the wall, run it through the html and css validators. Some lines of css will probably garner a response like "this is not in CSS2 though it is in CSS3". Disregard those, and look at everything else.

[Certificates]

Well I have done my best. I have still had to leave one lot of this in the HTML or otherwise it doesn't work

</style> <div class="verticaltext"><div align="center">
<br>
<br>Parliamentary</div></td>
<td WIDTH="5%"><style>
<!--
.verticaltext {
writing-mode: tb-rl;
filter: flipv fliph;
}
-->
</style>


The CSS and HTML validates fine so it's not to do with that.

Thanks for your suggestions as always

Antony