Skull-Fire
08-08-2008, 08:08 AM
Ive tried every center command I can think of and find but I just can't get text inside a table to move to the center. Can anyone tell me how to do this please?
Click to See Complete Forum and Search --> : centering inside a table
Kor
08-08-2008, 09:04 AM
text can not be put inside a table. Only inside a cell of a table. And you forgot the tell us which kind of center are you looking for: horizontal? vertical? or both?
However, here's a CSS solution to center vertically and horizontally a text in a container element (could be any block level element, not only a cell)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
.mytab {
border:solid 1px #ccc;
width:200px;
}
.mytab td{
height:200px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#c00;
text-align:center;/* horizontal text align */
line-height:200px;/* vertical text align - the value should be equal with the element's height */
}
</style>
</head>
<body>
<table class="mytab" cellspacing="0" cellpadding="0">
<tr>
<td>Lorem Ipsum</td>
</tr>
</table>
</body>
</html>
However, here's a CSS solution to center vertically and horizontally a text in a container element (could be any block level element, not only a cell)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
.mytab {
border:solid 1px #ccc;
width:200px;
}
.mytab td{
height:200px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#c00;
text-align:center;/* horizontal text align */
line-height:200px;/* vertical text align - the value should be equal with the element's height */
}
</style>
</head>
<body>
<table class="mytab" cellspacing="0" cellpadding="0">
<tr>
<td>Lorem Ipsum</td>
</tr>
</table>
</body>
</html>
Skull-Fire
08-09-2008, 11:02 AM
Thanks, however that did not help. It probably would have if I new anything about CSS but Ive decided to just learn HTML comletely before moving on to anything else, maybe thats a bad idea I dont know. Im also still learning HTML.
Anyway, here is what Ive got:
<table cellspacing="0" cellpadding="1" border="1"
bgcolor="blue" id="shell" height="100%" width="100%'>
<tr height="100%"><td colspan="2" bgcolor="red">
<table title="Banner" id="banner" border="0">
<tr><td>1234</td></tr>
</table>
</td></tr>
<tr height="100%"><td width="50" valign="top" bgcolor="brown">
<table id="navigation" title="Navigation" border="1">
<tr><td>qwer</td></tr>
<tr><td>asdf</td></tr>
<tr><td>zxcv</td></tr>
</table>
</td><td valign="top" bgcolor="white">
<table title="Content" id="content" border="0">
<tr><td align="center">
Welcome
</td></tr>
</table>
</td></tr>
</table>
I have tried other ways to center, <p style="text-align: center;"> and <center>
Any help is greatly appreciated.
Anyway, here is what Ive got:
<table cellspacing="0" cellpadding="1" border="1"
bgcolor="blue" id="shell" height="100%" width="100%'>
<tr height="100%"><td colspan="2" bgcolor="red">
<table title="Banner" id="banner" border="0">
<tr><td>1234</td></tr>
</table>
</td></tr>
<tr height="100%"><td width="50" valign="top" bgcolor="brown">
<table id="navigation" title="Navigation" border="1">
<tr><td>qwer</td></tr>
<tr><td>asdf</td></tr>
<tr><td>zxcv</td></tr>
</table>
</td><td valign="top" bgcolor="white">
<table title="Content" id="content" border="0">
<tr><td align="center">
Welcome
</td></tr>
</table>
</td></tr>
</table>
I have tried other ways to center, <p style="text-align: center;"> and <center>
Any help is greatly appreciated.
felgall
08-09-2008, 05:01 PM
There is no <center> or <td align="center"> any more. Thise are no longer a part of HTML since HTML is not supposed to define how the content should look - it is only supposed to define what the content is.
To define how your page should look you should use CSS as that is what CSS is for.
Saying that you want to centre something but want to do it with HTML because you want to learn HTML first before learning CSS is like saying that you want to sail around the world but you don't want to learn about boats because you want to learn how to do it in your car.
Kor has shown you the correct way to do it. There isn't much point in anyone else posting an answer because they will either duplicate his post or be wrong.
To define how your page should look you should use CSS as that is what CSS is for.
Saying that you want to centre something but want to do it with HTML because you want to learn HTML first before learning CSS is like saying that you want to sail around the world but you don't want to learn about boats because you want to learn how to do it in your car.
Kor has shown you the correct way to do it. There isn't much point in anyone else posting an answer because they will either duplicate his post or be wrong.
Kor
08-09-2008, 10:53 PM
Thanks, however that did not help. It probably would have if I new anything about CSS but Ive decided to just learn HTML comletely before moving on to anything else, maybe thats a bad idea I dont know. Im also still learning HTML.
Well, you example of centering is exactly one of the reasons why CSS was invented. Pure HTML solutions are not enough to solve complex and precise positioning (or other presentation) problems. Extending HTML attributes would not have been a solution, as it would have made the code intricate and redundant. So that the "Big Brothers" of the Web (see also CSS history (http://en.wikipedia.org/wiki/Cascading_Style_Sheets)) decided in the middle of '90s that it was time for a separation between content and presentation (http://en.wikipedia.org/wiki/Style_sheet_(web_development)) and created a standard for a new stylesheet presentation language: CSS.
So that you have to learn HTML and CSS almost the same time, as they are closely related. They simply work incomplete, or faulty, or even will not work at all, one without each other. Now you have to understand that CSS is not only another language, it is a vital, complementary language for HTML. You will also discover that learning CSS will make you understand better the HTML (the difference between block and inline elements, for instance).
Moreover you will need later to learn javascript and even some basic facts about Data Base systems and server-side languages.
Good luck and welcome into the crazy and motley world of the web developers! :)
Well, you example of centering is exactly one of the reasons why CSS was invented. Pure HTML solutions are not enough to solve complex and precise positioning (or other presentation) problems. Extending HTML attributes would not have been a solution, as it would have made the code intricate and redundant. So that the "Big Brothers" of the Web (see also CSS history (http://en.wikipedia.org/wiki/Cascading_Style_Sheets)) decided in the middle of '90s that it was time for a separation between content and presentation (http://en.wikipedia.org/wiki/Style_sheet_(web_development)) and created a standard for a new stylesheet presentation language: CSS.
So that you have to learn HTML and CSS almost the same time, as they are closely related. They simply work incomplete, or faulty, or even will not work at all, one without each other. Now you have to understand that CSS is not only another language, it is a vital, complementary language for HTML. You will also discover that learning CSS will make you understand better the HTML (the difference between block and inline elements, for instance).
Moreover you will need later to learn javascript and even some basic facts about Data Base systems and server-side languages.
Good luck and welcome into the crazy and motley world of the web developers! :)
webdeveloper.com
Copyright Internet.com Inc., All Rights Reserved.
Copyright Internet.com Inc., All Rights Reserved.