Without CSS, how do I center a whole page of tables?

Post by Sarah Austin
If I'm not using CSS ( I'm a basic web page person ) how do I center a whole
html page, including tables, in a browser window?

Why would you not want to use CSS? That's what it's for.

<style type="text/css">
body { width: 80%; margin: 0 auto; }
</style>

--
Chris F.A. Johnson <http://cfajohnson.com>
Author: =======================
Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress)
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)

Sarah Austin

2010-06-15 01:27:52 UTC

Post by Sarah Austin
If I'm not using CSS ( I'm a basic web page person ) how do I center a
whole html page, including tables, in a browser window?

Why would you not want to use CSS? That's what it's for.
<style type="text/css">
body { width: 80%; margin: 0 auto; }
</style>

'Cause I'd have to redesign my whole site and dont know how, and cant afford
to pay for it.

Chris F.A. Johnson

2010-06-15 05:14:40 UTC

Post by Sarah Austin
If I'm not using CSS ( I'm a basic web page person ) how do I center a
whole html page, including tables, in a browser window?

Why would you not want to use CSS? That's what it's for.
<style type="text/css">
body { width: 80%; margin: 0 auto; }
</style>

'Cause I'd have to redesign my whole site and dont know how, and cant afford
to pay for it.

Try adding the CSS I posted above to the HEAD of your page.

Sarah Austin

2010-06-15 05:52:47 UTC

Post by Sarah Austin
If I'm not using CSS ( I'm a basic web page person ) how do I center
a whole html page, including tables, in a browser window?

Why would you not want to use CSS? That's what it's for.
<style type="text/css">
body { width: 80%; margin: 0 auto; }
</style>

'Cause I'd have to redesign my whole site and dont know how, and cant
afford to pay for it.

Try adding the CSS I posted above to the HEAD of your page.

You can just convert it over, by adding that?

Sarah Austin

2010-06-15 06:00:47 UTC

Post by Sarah Austin
If I'm not using CSS ( I'm a basic web page person ) how do I center
a whole html page, including tables, in a browser window?

Why would you not want to use CSS? That's what it's for.
<style type="text/css">
body { width: 80%; margin: 0 auto; }
</style>

'Cause I'd have to redesign my whole site and dont know how, and cant
afford to pay for it.

Try adding the CSS I posted above to the HEAD of your page.

It did nothing. What else need I do?

Adrienne Boswell

2010-06-15 13:00:30 UTC

Gazing into my crystal ball I observed Sarah Austin

Post by Sarah Austin
If I'm not using CSS ( I'm a basic web page person ) how do I center
a whole html page, including tables, in a browser window?

Why would you not want to use CSS? That's what it's for.
<style type="text/css">
body { width: 80%; margin: 0 auto; }
</style>

'Cause I'd have to redesign my whole site and dont know how, and cant
afford to pay for it.

Try adding the CSS I posted above to the HEAD of your page.

It did nothing. What else need I do?

A URL would be helpful. If you don't have one, your ISP will often give
you space, or you could go with one of the free hosts, like
http://000webhost.com.

--
Adrienne Boswell at Home
Arbpen Web Site Design Services
http://www.cavalcade-of-coding.info
Please respond to the group so others can share

Sarah Austin

2010-06-16 02:00:14 UTC

Post by Adrienne Boswell
Gazing into my crystal ball I observed Sarah Austin

Post by Sarah Austin
If I'm not using CSS ( I'm a basic web page person ) how do I

center

Post by Sarah Austin
a whole html page, including tables, in a browser window?

Why would you not want to use CSS? That's what it's for.
<style type="text/css">
body { width: 80%; margin: 0 auto; }
</style>

'Cause I'd have to redesign my whole site and dont know how, and

cant

Post by Sarah Austin
afford to pay for it.

Try adding the CSS I posted above to the HEAD of your page.

It did nothing. What else need I do?

A URL would be helpful. If you don't have one, your ISP will often give
you space, or you could go with one of the free hosts, like
http://000webhost.com.

My site is up already, I can handle FTP and all that, and write my own,
just not CSS yet.

Chris F.A. Johnson

2010-06-15 18:36:17 UTC

Post by Sarah Austin
If I'm not using CSS ( I'm a basic web page person ) how do I center
a whole html page, including tables, in a browser window?

Why would you not want to use CSS? That's what it's for.
<style type="text/css">
body { width: 80%; margin: 0 auto; }
</style>

'Cause I'd have to redesign my whole site and dont know how, and cant
afford to pay for it.

Try adding the CSS I posted above to the HEAD of your page.

It did nothing. What else need I do?

Then you have something on your page preventing it. As an example,
see <http://cfajohnson.com/testing/t2.shtml> and
<http://cfajohnson.com/testing/t2a.shtml>.

The only difference between the two is the addition of the CSS on
the second page.

As Adrienne suggested, a URL would help.

Sarah Austin

2010-06-16 02:01:59 UTC

Post by Sarah Austin
If I'm not using CSS ( I'm a basic web page person ) how do I center
a whole html page, including tables, in a browser window?

Why would you not want to use CSS? That's what it's for.
<style type="text/css">
body { width: 80%; margin: 0 auto; }
</style>

'Cause I'd have to redesign my whole site and dont know how, and cant
afford to pay for it.

Try adding the CSS I posted above to the HEAD of your page.

It did nothing. What else need I do?

Then you have something on your page preventing it. As an example,
see <http://cfajohnson.com/testing/t2.shtml> and
<http://cfajohnson.com/testing/t2a.shtml>.
The only difference between the two is the addition of the CSS on
the second page.
As Adrienne suggested, a URL would help.

But dont I have to convert the whole site to CSS, as well as creating a
separate CSS file and removing the tables that are in there now, and are
not CSS? I dont know how to do things like all that, set page width, column
definitions etc, in CSS.

Adrienne Boswell

2010-06-16 03:31:34 UTC

Gazing into my crystal ball I observed Sarah Austin

Post by Sarah Austin
If I'm not using CSS ( I'm a basic web page person ) how do I
center a whole html page, including tables, in a browser window?

Why would you not want to use CSS? That's what it's for.
<style type="text/css">
body { width: 80%; margin: 0 auto; }
</style>

'Cause I'd have to redesign my whole site and dont know how, and
cant afford to pay for it.

Try adding the CSS I posted above to the HEAD of your page.

It did nothing. What else need I do?

Then you have something on your page preventing it. As an example,
see <http://cfajohnson.com/testing/t2.shtml> and
<http://cfajohnson.com/testing/t2a.shtml>.
The only difference between the two is the addition of the CSS on
the second page.
As Adrienne suggested, a URL would help.

But dont I have to convert the whole site to CSS, as well as creating
a separate CSS file and removing the tables that are in there now, and
are not CSS? I dont know how to do things like all that, set page
width, column definitions etc, in CSS.

As I said earlier, a URL would be helpful. We're guessing in the dark
without knowing what's REALLY going on.

There are many possibilities, doctype issues, bad markup, etc. I don't
want to speculate anymore, give us a URL, please.

--
Adrienne Boswell at Home
Arbpen Web Site Design Services
http://www.cavalcade-of-coding.info
Please respond to the group so others can share

Sarah Austin

2010-06-17 00:03:50 UTC

Post by Adrienne Boswell
As I said earlier, a URL would be helpful. We're guessing in the dark
without knowing what's REALLY going on.
There are many possibilities, doctype issues, bad markup, etc. I don't
want to speculate anymore, give us a URL, please.

http://www.coloradoprocessservers.net

Sarah Austin

2010-06-21 05:13:14 UTC

Post by Adrienne Boswell
Gazing into my crystal ball I observed Sarah Austin

Post by Sarah Austin
If I'm not using CSS ( I'm a basic web page person ) how do I
center a whole html page, including tables, in a browser window?

Why would you not want to use CSS? That's what it's for.
<style type="text/css">
body { width: 80%; margin: 0 auto; }
</style>

'Cause I'd have to redesign my whole site and dont know how, and
cant afford to pay for it.

Try adding the CSS I posted above to the HEAD of your page.

It did nothing. What else need I do?

Then you have something on your page preventing it. As an example,
see <http://cfajohnson.com/testing/t2.shtml> and
<http://cfajohnson.com/testing/t2a.shtml>.
The only difference between the two is the addition of the CSS on
the second page.
As Adrienne suggested, a URL would help.

But dont I have to convert the whole site to CSS, as well as creating
a separate CSS file and removing the tables that are in there now, and
are not CSS? I dont know how to do things like all that, set page
width, column definitions etc, in CSS.

As I said earlier, a URL would be helpful. We're guessing in the dark
without knowing what's REALLY going on.
There are many possibilities, doctype issues, bad markup, etc. I don't
want to speculate anymore, give us a URL, please.

http://www.coloradoprocessservers.net
I did it for a friend.

Winston

2010-06-16 14:26:37 UTC

Post by Sarah Austin
But dont I have to convert the whole site to CSS, as well as creating a
separate CSS file and removing the tables that are in there now, and are
not CSS?

Absolutely not. Style is like HTML tags: you can add it where you need
it, and each directive stands on its own. You could add style="float:left"
to a single tag and it would change that one tag.

The goal of wholesale conversion of a site is that you can replace many
individual stylistic rules on many pages with a single (collection of) CSS
style rules, perhaps making things smaller (for the number of changes) but
primarily giving you a form of centralized control over many pages (instead
of worrying whether you missed a change somewhere).

Also, tables stay tables (unless you decide you want to do things
differently).

So, don't be afraid to use CSS style as you learn about it and find
places to use it.

However, depending on your audience, keep in mind that the page might be
viewed with an old or text-only browser that doesn't support CSS, so check
that the "no CSS/CSS off" appearance is acceptable.
-WBE

Sarah Austin

2010-06-21 05:14:47 UTC

Post by Sarah Austin
But dont I have to convert the whole site to CSS, as well as creating a
separate CSS file and removing the tables that are in there now, and are
not CSS?

Absolutely not. Style is like HTML tags: you can add it where you need
it, and each directive stands on its own. You could add style="float:left"
to a single tag and it would change that one tag.
The goal of wholesale conversion of a site is that you can replace many
individual stylistic rules on many pages with a single (collection of) CSS
style rules, perhaps making things smaller (for the number of changes) but
primarily giving you a form of centralized control over many pages (instead
of worrying whether you missed a change somewhere).
Also, tables stay tables (unless you decide you want to do things
differently).
So, don't be afraid to use CSS style as you learn about it and find
places to use it.
However, depending on your audience, keep in mind that the page might be
viewed with an old or text-only browser that doesn't support CSS, so check
that the "no CSS/CSS off" appearance is acceptable.
-WBE

I did the site for a friend.
http://www.coloradoprocessservers.net

It also needs to be redesigned with tabs to look more professional, we think,
but I'm JUST scratching the surface of learning css.

Winston

2010-06-21 19:21:03 UTC

Post by Sarah Austin
http://www.coloradoprocessservers.net

That page makes extensive (if not exclusive) use of "position:absolute".
As such, the content goes where you've told it to go. That's why adding
"margin: 0 auto" in the <head> had no (useful) effect.

If I'm reading your HTML right, the following WON'T solve your problem (in
fact, the result will look worse on narrow screen widths), but will be a
useful test. It should move the content of your page rightward by 10% of
the screen width size ALWAYS (even when the content is wider than the
page):

* remove the entire style directive in the <head>
* change the very first <div align=center> to:
<div style="position:relative; width:80%; margin:0 10%">.

The real problem is that (nearly?) all your web page content is
position:absolute, usually with width=<#pixels>. That won't center or
adapt. Using width:x%, or replacing use of position:absolute with
float:left or float:right would make the page better able to adapt to
different screen widths.

The other side effect of position:absolute content is that it is defined
*NOT* to affect the layout/width of its parents. Thus, the
<div width="80%"> in the test above is basically an EMPTY box, unaffected
by your content. The empty box will always fit within the screen width
and be centered, even when the position:absolute content is wider than
the screen width.

Summary: making centering look nice will take some work (if done by hand),
or maybe there's an option in your web page design program to not use
position:absolute.

HTH,
-WBE

Sarah Austin

2010-06-22 03:36:05 UTC

Post by Sarah Austin
http://www.coloradoprocessservers.net

That page makes extensive (if not exclusive) use of "position:absolute".
As such, the content goes where you've told it to go. That's why adding
"margin: 0 auto" in the <head> had no (useful) effect.
If I'm reading your HTML right, the following WON'T solve your problem (in
fact, the result will look worse on narrow screen widths), but will be a
useful test. It should move the content of your page rightward by 10% of
the screen width size ALWAYS (even when the content is wider than the
* remove the entire style directive in the <head>
<div style="position:relative; width:80%; margin:0 10%">.
The real problem is that (nearly?) all your web page content is
position:absolute, usually with width=<#pixels>. That won't center or
adapt. Using width:x%, or replacing use of position:absolute with
float:left or float:right would make the page better able to adapt to
different screen widths.
The other side effect of position:absolute content is that it is defined
*NOT* to affect the layout/width of its parents. Thus, the
<div width="80%"> in the test above is basically an EMPTY box, unaffected
by your content. The empty box will always fit within the screen width
and be centered, even when the position:absolute content is wider than
the screen width.
Summary: making centering look nice will take some work (if done by hand),
or maybe there's an option in your web page design program to not use
position:absolute.
HTH,
-WBE

It appears that I just need the whole thing redesigned properly with tabs,
css and all.

Thanks.

Sarah Austin

2010-06-21 05:09:33 UTC

Post by Sarah Austin
If I'm not using CSS ( I'm a basic web page person ) how do I center
a whole html page, including tables, in a browser window?

Why would you not want to use CSS? That's what it's for.
<style type="text/css">
body { width: 80%; margin: 0 auto; }
</style>

'Cause I'd have to redesign my whole site and dont know how, and cant
afford to pay for it.

Try adding the CSS I posted above to the HEAD of your page.

It did nothing. What else need I do?

Then you have something on your page preventing it. As an example,
see <http://cfajohnson.com/testing/t2.shtml> and
<http://cfajohnson.com/testing/t2a.shtml>.
The only difference between the two is the addition of the CSS on
the second page.
As Adrienne suggested, a URL would help.

Your text page is only simple text, though.

Not sure why it wont work here:
http://www.coloradoprocessservers.net

Chris F.A. Johnson

2010-06-21 08:41:31 UTC

Post by Sarah Austin
If I'm not using CSS ( I'm a basic web page person ) how do I center
a whole html page, including tables, in a browser window?

Why would you not want to use CSS? That's what it's for.
<style type="text/css">
body { width: 80%; margin: 0 auto; }
</style>

'Cause I'd have to redesign my whole site and dont know how, and cant
afford to pay for it.

Try adding the CSS I posted above to the HEAD of your page.

It did nothing. What else need I do?

Then you have something on your page preventing it. As an example,
see <http://cfajohnson.com/testing/t2.shtml> and
<http://cfajohnson.com/testing/t2a.shtml>.
The only difference between the two is the addition of the CSS on
the second page.
As Adrienne suggested, a URL would help.

Your text page is only simple text, though.
http://www.coloradoprocessservers.net

That page has a lot of CSS, in the least favourable place: inline,
as attributes in HTML tags.

That page also doesn't work if the viewer's font-size is larger than you
think: <Loading Image...

>.

I haven't come across the CoffeeCup HTML Editor before; it's
another piece of junk to avoid.

I'd rewrite the page from scratch, using HTML4.01 strict.

Sarah Austin

2010-06-21 05:12:44 UTC

Post by Sarah Austin
If I'm not using CSS ( I'm a basic web page person ) how do I center
a whole html page, including tables, in a browser window?

Why would you not want to use CSS? That's what it's for.
<style type="text/css">
body { width: 80%; margin: 0 auto; }
</style>

'Cause I'd have to redesign my whole site and dont know how, and cant
afford to pay for it.

Try adding the CSS I posted above to the HEAD of your page.

It did nothing. What else need I do?

Then you have something on your page preventing it. As an example,
see <http://cfajohnson.com/testing/t2.shtml> and
<http://cfajohnson.com/testing/t2a.shtml>.
The only difference between the two is the addition of the CSS on
the second page.
As Adrienne suggested, a URL would help.

http://www.coloradoprocessservers.net

So why isnt it working?

Jane Galt

2010-06-21 05:04:52 UTC

Post by Sarah Austin
If I'm not using CSS ( I'm a basic web page person ) how do I center
a whole html page, including tables, in a browser window?

Why would you not want to use CSS? That's what it's for.
<style type="text/css">
body { width: 80%; margin: 0 auto; }
</style>

'Cause I'd have to redesign my whole site and dont know how, and cant
afford to pay for it.

Try adding the CSS I posted above to the HEAD of your page.

I did, it didn't change anything.

--
- Jane Galt

Winston

2010-06-15 16:42:35 UTC

Post by Sarah Austin
If I'm not using CSS ( I'm a basic web page person ) how do I center a whole
html page, including tables, in a browser window?

Candidate methods include

1) <body><center>original content</center></body>

and the more official

2) <body><div align=center>original content</div></body>

If you find that that causes undesired centering of the individual lines of
the original content, add another div with your desired alignment; e.g.,

3) <div align=center><div align=left>original content</div></div>

HTH,
-WBE

Adrienne Boswell

2010-06-16 01:47:53 UTC

Post by Sarah Austin
If I'm not using CSS ( I'm a basic web page person ) how do I center
a whole html page, including tables, in a browser window?

Candidate methods include
1) <body><center>original content</center></body>

The Center element is deprecated, and does not even exist in HTML5.
http://www.w3.org/TR/html401/present/graphics.html#edef-CENTER
http://www.w3.org/TR/html5-diff/#absent-elements

Post by Winston
and the more official
2) <body><div align=center>original content</div></body>

The align attribute of the div element is deprecated in favor of CSS.
http://www.w3.org/TR/html401/present/graphics.html#adef-align

Post by Winston
If you find that that causes undesired centering of the individual
lines of the original content, add another div with your desired
alignment; e.g.,
3) <div align=center><div align=left>original content</div></div>

The align attribute of the div element is deprecated in favor of CSS.
http://www.w3.org/TR/html401/present/graphics.html#adef-align

Chris F.A. Johnson's first response in this thread would be the correct
choice.

<style type="text/css">
body { width: 80%; margin: 0 auto; }
</style>

However, we have no URL to see what might be preventing this from rendering
as the OP stated, so this is a guess at best.

--
Adrienne Boswell at Home
Arbpen Web Site Design Services
http://www.cavalcade-of-coding.info
Please respond to the group so others can share

Winston

2010-06-16 14:09:18 UTC

Post by Sarah Austin
If I'm not using CSS ( I'm a basic web page person ) how do I center
a whole html page, including tables, in a browser window?

1) <body><center>original content</center></body>

The Center element is deprecated, and does not even exist in HTML5.

Post by Winston
and the more official

[note: "more official", not "official"]

Post by Winston
2) <body><div align=center>original content</div></body>

The align attribute of the div element is deprecated in favor of CSS.

All true. But the original poster seemed to be asking for a solution
that did not require CSS, and both of the above tags are pretty well
supported. Perhaps some of her users are using old, text-only browsers
that don't support CSS? I leave it up to Sarah to decide what method she
wants to use.
-WBE

Adrienne Boswell

2010-06-16 19:28:16 UTC

Post by Sarah Austin
If I'm not using CSS ( I'm a basic web page person ) how do I center
a whole html page, including tables, in a browser window?

1) <body><center>original content</center></body>

The Center element is deprecated, and does not even exist in HTML5.

Post by Winston
and the more official

[note: "more official", not "official"]

There is no such thing as "more official". That's like "truthiness",
either it's true or it's not, either it's official or it's not.

Post by Winston
2) <body><div align=center>original content</div></body>

The align attribute of the div element is deprecated in favor of CSS.

All true. But the original poster seemed to be asking for a solution
that did not require CSS, and both of the above tags are pretty well
supported. Perhaps some of her users are using old, text-only

browsers

Post by Winston
that don't support CSS? I leave it up to Sarah to decide what method she
wants to use.
-WBE

If the user has a text browser, there is no point in centering anything,
anyway.

Me thinks the OP wants to avoid CSS because she thinks it is difficult
or hard to implement, which is --- the farthest thing from the truth.

--
Adrienne Boswell at Home
Arbpen Web Site Design Services
http://www.cavalcade-of-coding.info
Please respond to the group so others can share

Sarah Austin

2010-06-18 00:09:56 UTC

Ok, so what I seem to be hearing is, I should be able to apply just some
simple CSS to the existing site, without a total redesign?

From what I've been reading on the web, I have to create a CSS definitions
file too, in the same directory?

Chris F.A. Johnson

2010-06-18 00:48:41 UTC

Post by Sarah Austin
Ok, so what I seem to be hearing is, I should be able to apply just some
simple CSS to the existing site, without a total redesign?

The HTML should have little or nothing to do with the design; it
should all be CSS.

Post by Sarah Austin
From what I've been reading on the web, I have to create a CSS definitions
file too, in the same directory?

There are three places to put your CSS rules. In ascending order
of preference, they are:

1. In an element's opening tag
<p style="background-color: #ffc; color: black;">

2. In the HEAD of your document:
<style type="text/css">
p { background-color: #ffc; color: black; }
</style>

3. In an external stylesheet with a link:
<link href="style1.css" rel="stylesheet" type="text/css">

Sarah Austin

2010-06-18 01:53:27 UTC

Post by Sarah Austin
Ok, so what I seem to be hearing is, I should be able to apply just
some simple CSS to the existing site, without a total redesign?

The HTML should have little or nothing to do with the design; it
should all be CSS.

Post by Sarah Austin
From what I've been reading on the web, I have to create a CSS
definitions file too, in the same directory?

There are three places to put your CSS rules. In ascending order
1. In an element's opening tag
<p style="background-color: #ffc; color: black;">
<style type="text/css">
p { background-color: #ffc; color: black; }
</style>
<link href="style1.css" rel="stylesheet" type="text/css">

Ok, I read that the external sheet was best.

But I'll have to redesign that site completely then.

I'd also like to make it better with tabs and make it look more professional.

Probably have to hire someone, as I dont know CSS yet, it's like greek to me.

Sarah Austin

2010-06-18 02:04:58 UTC

I tried taking a free template with css and playing with it, but wasnt even
able to change the page width or the columns or anything. It was so
frustrating.

Chris F.A. Johnson

2010-06-18 07:39:33 UTC

Post by Sarah Austin
Ok, so what I seem to be hearing is, I should be able to apply just
some simple CSS to the existing site, without a total redesign?

The HTML should have little or nothing to do with the design; it
should all be CSS.

Post by Sarah Austin
From what I've been reading on the web, I have to create a CSS
definitions file too, in the same directory?

Ok, I read that the external sheet was best.
But I'll have to redesign that site completely then.

No, you just have to add a link to the stylesheet in the HEAD of
your pages.

Post by Sarah Austin
I'd also like to make it better with tabs and make it look more professional.

Good idea.

Post by Sarah Austin
Probably have to hire someone, as I dont know CSS yet, it's like greek to me.

E-mail me.

Sarah Austin

2010-06-21 05:19:44 UTC

Post by Sarah Austin
Ok, so what I seem to be hearing is, I should be able to apply just
some simple CSS to the existing site, without a total redesign?

The HTML should have little or nothing to do with the design; it
should all be CSS.

Post by Sarah Austin
From what I've been reading on the web, I have to create a CSS
definitions file too, in the same directory?

Ok, I read that the external sheet was best.
But I'll have to redesign that site completely then.

No, you just have to add a link to the stylesheet in the HEAD of
your pages.

Post by Sarah Austin
I'd also like to make it better with tabs and make it look more professional.

Good idea.

Post by Sarah Austin
Probably have to hire someone, as I dont know CSS yet, it's like greek to me.

E-mail me.

I did.

Sarah Austin

2010-06-21 05:18:58 UTC

Post by Adrienne Boswell
If the user has a text browser, there is no point in centering anything,
anyway.

I cant imagine catering to people who have primitive browsers. I'd be happy
if it looks good in Internet Explorer, Seamonkey and Firefox. Perhaps the Mac
browser too?

Post by Adrienne Boswell
Me thinks the OP wants to avoid CSS because she thinks it is difficult
or hard to implement, which is --- the farthest thing from the truth.

Yes exactly. It was very intimidating when I first looked at it.

But I'm game now. http://www.coloradoprocessservers.net

Sarah Austin

2010-06-21 05:16:41 UTC