<center><b><font size="5" color="#800000"><limittext value="Reload Page -- Webtv Glitch"></limittext></font></b></center>
Centering & Alignment Options
("add an item"--"text" areas)

 

Why centering and other alignments
don't always "seem" to work

Some Webtv PageBuilder page styles automatically align contents
to the center of the page ;  while others align contents to the left of the page.

The page styles that align contents to the left of the page
work like this:

Each "add an item" -- "text" area is contained in a table automatically made by Webtv.

  1. Webtv adds table codes to the overall source code automatically, at the beginning of every "text" area:

    <TABLE><TR><TD>
    <P ALIGN=left>

    and at the end of the "text" area:

    </TD></TR></TABLE>

    The content you supply goes in between those two sets of codes.

  2. The "Webtv table" is automatically aligned to the left of the page. The <P ALIGN=left> tag aligns everything inside the table to the left.

  3. The "Webtv table" is not set to 100% of the page --- so the width of the table adjusts/expands according to the contents of the "text" area.

  4. If the contents of the "text" area is less than 100% width of the webpage, then centering and alignment will be within the "Webtv table", not 100% "page-wise".

  5. In order for centering (and other alignments) to work as expected, the automatically added "Webtv table codes" must be closed first, using   </td></tr></table>   as the very first thing in the "add an item"--"text" editing area.

Various methods of centering are demonstrated below;
click onto the links for more detailed explanations
and complete codes to use.


NOTE--11/05/2001: Viewers with  2.5,  2.5.5,  2.6, and  2.6.1 upgrades (and computer viewers) will see this webpage "correctly", with some demos centered and some demos not centered.

Viewers of this webpage with the 2.7 upgrade will "incorrectly" see ALL of the demos that follow as being centered.

See the chart  below  for what will work for all upgrade versions and 'puter viewers.



Centering & Alignment Options
with the Webtv PageBuilder
"add an item"--"text" areas
What works for
2.7 viewers only;
these will not work for lower upgrade versions or 'puter viewers.


more 2.7 oddities.
What seems to work,
but does not
for 'puter viewers
when used by itself,
on a Webtv PageBuilder webpage

What works,
but is bad & lazy html'n

What works for all upgrade versions and 'puters

Note:
<div align="center" | "left" | "right" > & </div>
can also be used, instead of the centering tags above.
More basic alignment codes that can be used in "add an item"--"text" areas in combination with the <<>/td><<>/tr>
<<>/table> method above.
Alignment Options
"add an item"--"heading" areas


Is this centered
page-wise??
jpg
The 2.7 upgrade will "see" this as centered.
The 2.5,  2.5.5,  2.6,  2.6.1 upgrades,
and 'puters will not. Click here
for what they will see.

The area above was made in the "add an item"--"text" area,
and this is what the source code looks like,
with the automatically added Webtv table codes in red,
and user added codes in black:

<TABLE><TR><TD>
<P ALIGN=left>

<center>
Text here
<img src="url of image">
</center>

</TD></TR></TABLE>

The image and text are not centered pagewise due to the automatically added Webtv table codes.
See #2, 3 and 4 above.


Is this centered
page-wise??
jpg
The 2.7 upgrade will "see" this as centered.
The 2.5,  2.5.5,  2.6,  2.6.1 upgrades,
and 'puters will not. Click here
for what they will see.

The area above was made in the "add an item"--"text" area,
and this is what the source code looks like,
with the automatically added Webtv table codes in red,
and user added codes in black:

<TABLE><TR><TD>
<P ALIGN=left>

<table align="center" border="1">
<tr><td>
<center>
Text here
<img src="url of image">
</center>
</td></tr></table>

</TD></TR></TABLE>

The image, text and user-added table are not centered pagewise due to the automatically added Webtv table codes.
See #2, 3 and 4 above.


Is this table and text
centered page-wise??
jpg
The 2.7 upgrade will "see" this as centered.
The 2.5,  2.5.5,  2.6,  2.6.1 upgrades,
and 'puters will not. Click here
for what they will see.

The area above was made in the "add an item"--"text" area,
and this is what the source code looks like,
with the automatically added Webtv table codes in red,
and user added codes in black:

<TABLE><TR><TD>
<P ALIGN=left>

<center><table border="1">
<tr><td>
<center>
Text here
<img src="url of image">
</center>
</td></tr>
</table></center>

</TD></TR></TABLE>

The image, text and user-added table are not centered pagewise due to the automatically added Webtv table codes.
See #2, 3 and 4 above.


Is this table 100%
of the page, and
is the text centered
page-wise ??
jpg
The 2.7 upgrade will "see" this as centered.
The 2.5,  2.5.5,  2.6,  2.6.1 upgrades,
and 'puters will not. Click here
for what they will see.



The area above was made in the "add an item"--"text" area,
and this is what the source code looks like,
with the automatically added Webtv table codes in red,
and user added codes in black:

<TABLE><TR><TD>
<P ALIGN=left>

<table border="1" width="100%">
<tr><td>
<center>
Text here
<img src="url of image">
</center>
</td></tr></table>

</TD></TR></TABLE>

The image and text are not centered pagewise due to the automatically added Webtv table codes.
See #2, 3 and 4 above.


Is this centered
page-wise ?? -- YES and NO.
It appears centered page-wise for webtv, but
it will not appear centered page-wise for 'puters
due to the table codes automatically added by Webtv.

'puter screen capture link
jpg

The area above was made in the "add an item"--"text" area,
and this is what the source code looks like,
with the automatically added Webtv table codes in red,
and user added codes in black:

<TABLE><TR><TD>
<P ALIGN=left>

<div align="center">
Text here
<img src="url of image">
</div>

</TD></TR></TABLE>

The image and text are not centered pagewise for 'puter viewers due to the automatically added Webtv table codes.
See #2, 3 and 4 above.


Is this centered
page-wise ?? -- YES, for
webtv and 'puter viewers, but
when the entire source code
is viewed , showing the automatically
added Webtv table code,
this method has poor overall table construction
and results in several validation errors.

jpg

The area above was made in the "add an item"--"text" area,
and this is what the source code looks like,
with the automatically added Webtv table codes in red,
and user added codes in black:

<TABLE><TR><TD>
<P ALIGN=left>

</table>
<center>
Text here
<img src="url of image">
</center>

</TD></TR></TABLE>

The image and text are centered pagewise because the Webtv table was closed (improperly though) at the beginning of the "add an item"--"text" area.

Using just </table> to close the Webtv table is improper/poor table construction and the validation errors are caused because the final Webtv closing table codes are unmatched.

Click here for more detailed information on this
particular setup, and the validation errors it produces.

Also:

A quote from jbarta's Table Tutor webpage:

http://www.pagetutor.com/pagetutor/tables/quik-index.html


"Remember, it's very good practice to ALWAYS include </TD>, </TR> and </TABLE> closing tags in your tables. If you don't, you run the risk of large chunks of your page not being rendered in some browsers. Consider yourself warned ;-)"



Some people are too lazy or find it too confusing to recommend the correct way to close a table, but whether the table is "simple", "complex", or "nested", they all start out with the same basic form:


<table><tr><td>

And if properly closed, they all end with:

</td></tr></table>


A quick trip to any credible table tutorial webpage ( e-mail me  if you need some links ) will show the above on usually the very first page of instructions; none recommend different methods for closing tables depending on the simplicity or compexity of the tables used; instead, they all close tables the same way, with

</td></tr></table> .



And, while improperly closed tables may not receive error messages at some validation sources such as
http://www.anybrowser.com/validateit.html or
Dr. Watson http://watson.addy.com/ ,
they will flag several errors at
http://www.doctor-html.com/RxHTML/


Is this centered
page-wise ?? -- YES, for
webtv and 'puter viewers, and
it produces no validation errors.

jpg

The area above was made in the "add an item"--"text" area,
and this is what the source code looks like,
with the automatically added Webtv table codes in red,
and user added codes in black:

<TABLE><TR><TD>
<P ALIGN=left>

</td></tr></table>
<center>
Text here
<img src="url of image">
</center>
<table><tr><td>

</TD></TR></TABLE>

The image and text are centered pagewise because the Webtv table was closed at the beginning of the "add an item"--"text" area.

No validation errors occur because the Webtv table was properly closed at the beginning of the text-editing area, and then another table was "opened" at the end of the text-editing area to match up with the Webtv-added closing table tags.

Click here for more detailed information on this
particular setup, and the validation results it produces.



NOTE: The <div> tags can also be used ( instead of the centering tags ) with the set of codes above for alignment of text, images, marquees, etc., such as:

</td></tr></table>
<div align="center / left / right">
items to be aligned
</div>
<table><tr><td>

More basic alignment codes that can be used in "add an item"--"text" area in combination with the </td></tr></table> method above:

http://www.geocities.com/willxwill/alignment2.html



Is this table 100% of the page,
and
does the table background cover the whole page,
and
is the text centered page-wise ?? -- YES, for
webtv and 'puter viewers.
jpg

The area above was made in the "add an item"--"text" area,
and this is what the source code looks like,
with the automatically added Webtv table codes in red,
and user added codes in black:

<TABLE><TR><TD>
<P ALIGN=left>

</td></tr></table>

<table border="1" width="100%" background="url of image">
<tr><td align="center">
Text here
<img src="url of image">
</td></tr></table>

<table><tr><td>

</TD></TR></TABLE>

( Adjust the width of the table as desired. )

The image and text are centered pagewise and the user-added table is 100% of the webpage because the Webtv table was closed at the beginning of the "add an item"--"text" area.

No validation errors occur because the Webtv table was properly closed at the beginning of the text-editing area, and then another table was "opened" at the end of the text-editing area to match up with the Webtv-added closing table tags.

NOTE: The <div> tags can also be used with the set of codes above for alignment of text, images, marquees, etc. , such as:

</td></tr></table

<table border="1" width="100%" background="url of image">
<tr><td>
<div align="center / left / right">
Items to be aligned
</div>
</td></tr></table

<table><tr><td>


OR, use:


</td></tr></table

<table border="1" width="100%" background="url of image">
<tr><td>
<center>
Items to be aligned
</center>
</td></tr></table

<table><tr><td>

(Heading area)
Is this text and image
centered page-wise ?? -- YES, for
webtv and 'puter viewers
but it may produce a validation error
due to improper sequencing of the
heading tags if other heading areas
and heading tags are used on the same page.

The validation error will look like this:
bad style - heading <H3> follows <H1> on line #.
The <H3> automatically used for this area
follows the <H1> automatically used for the title
at the top of the page;
proper sequencing would be to use
<H2> for this area instead.

'puter screen capture link


help.gif

The area above was made in the "add an item"--"heading" area,
and this is what the source code looks like,
with the automatically added Webtv codes in red,
and user added codes in black:

<H3>

<center>
Text here
<img src="url of image">
</center>

</H3>

The image and text are centered pagewise because the "add an item"--"heading" area occupies 100% of the webpage.


NOTE: The <div> tags can also be used ( instead of the centering tags ) with the set of codes above for alignment of text, images, marquees, etc. , such as:

<div align="center / left / right">
items to be aligned
</div>

More basic alignment codes that can be used in
either the "add an item"--"heading" area
or "add an item"--"text" area:

http://www.geocities.com/willxwill/alignment2.html




Several Validation Sources:

http://www.anybrowser.com/validateit.html

http://www.doctor-html.com/RxHTML/

http://watson.addy.com/

http://www.websitegarage.com



NOTE:
If you are adding scrapbook images directly onto the webpage,
using "add an item"--"picture"--"your scrapbook",
then Webtv automatically aligns the images for you.
A list of those automatic image alignments
according to the page style selected is here:

http://www.geocities.com/willxwill/alignment.html

more codes

Top of page





ALSO


There are various ways in which way you can center tables,
and the text/contents inside, but use this setup
in the "add-an-item"--"text" area:

</td></tr></table>

(then add your table codes,etc)
<table width="#" border="#"><tr><td>
Content here
</td></tr></table>

<table><tr><td>

See the demo of this setup above)

Several of the various methods are displayed below:


Text is centered
inside the table,
using this setup:

<table border="1" width="250"><tr><td>
<center>
Text here
</center>
</td></tr></table>



Text is centered
inside the table,
using this setup:

<table border="1" width="250">
<tr><td align="center">
Text here
</td></tr></table>



Table is aligned
in the middle of the page,
using this setup:

<table align="center" border="1" width="250">
<tr><td>
Text here
</td></tr></table>

NOTE: If you are using the 2.2.7.1 version of Webtv, this table will not appear centered page-wise; but if you are using 2.5.5 or 2.6 upgrade versions or a 'puter, then the table will be centered.



Table is aligned
in the middle of the page,
using this setup:

<center>
<table border="1" width="250">
<tr><td>
Text here
</td></tr>
</table>
</center>



The table and text is centered
using this setup:

<center>
<table border="1" width="250">
<tr><td>
<center>
Text here
</center>
</td></tr>
</table>
</center>



The table and text is centered
using this setup:

<table align="center" border="1" width="250">
<tr><td align="center">
Text here
</td></tr>
</table>

NOTE: If you are using the 2.2.7.1 version of Webtv, this table will not appear centered page-wise; but if you are using 2.5.5 or 2.6 upgrade versions or a 'puter, then the table will be centered.



In addition to align="center" used in the examples above,
align="left" and align="right" can be used for
alignment of tables and text.


Top of page
Powered by MSN TV