Center In Table Cell With Span

free web hosting
Free Web Hosting > Computers & Tech > Designing > Web Design and HTML

Center In Table Cell With Span

khalilov
I used colspan in a table along with center in CSS
code is:

CODE
.boldtable1
{
position:absolute;
top:217px;
left:250px;
font-family:sans-serif;
font-size:12pt;
color:yellow;
background-color:black;
}

.boldtable1 TD, .boldtable1 TH
{
font-family:sans-serif;
font-size:8pt;
width=162px;
color:yellow;
background-color:black;
text-align:center;
vertical-align:middle;
}

I use in table
CODE
.
.
<TD colspan=4>...</TD>

The text becomes centered as if no cells were merged, there is merging of cells but the text is centered where the first cell was.

Reply

Mordent
Just a little note: I'd highly recommend using lowercase tags ("td" instead of "TD"), simply because it's then valid XHTML. HTML will most likely be slowly rendered redundant over time, meaning XHTML is the markup language that will make little things like that add extra hassle for you in the future. Same with colspan, really. You need to put some quotes around the 4 to make it XHTML compliant.

Not really an answer for you, but XHTML is overall one hell of a lot easier to debug. Take at look at w3schools sometime.

Reply

khalilov
The reason i don't use quotes is because i am using php

CODE
echo "<tr><td colspan="4">..</td></tr>";


That will start generating erros =)
maybe i'll use ' instead,as for small letters i'll modify it =).

Reply

TavoxPeru
QUOTE(khalilov @ Sep 25 2008, 05:40 AM) *
I used colspan in a table along with center in CSS
code is:

CODE
.boldtable1
{
position:absolute;
top:217px;
left:250px;
font-family:sans-serif;
font-size:12pt;
color:yellow;
background-color:black;
}

.boldtable1 TD, .boldtable1 TH
{
font-family:sans-serif;
font-size:8pt;
width=162px;
color:yellow;
background-color:black;
text-align:center;
vertical-align:middle;
}

I use in table
CODE
.
.
<TD colspan=4>...</TD>

The text becomes centered as if no cells were merged, there is merging of cells but the text is centered where the first cell was.

At first sight, you have an error in your CSS code for TD and TH, i suppose that you copy/paste your code from your HTML to CSS right???

Well, after a quickly test i made, i can say that it was the problem, simply change the "=" with an ":" to fix it, here is the corrected code:

CODE
.boldtable1 td, .boldtable1 th
{
font-family:sans-serif;
font-size:8pt;
width:162px;
color:yellow;
background-color:black;
text-align:center;
vertical-align:middle;
}

BTW, if you want to use quotes in your PHP code simply escape it with a "\", like this:

CODE
<?php
echo "<tr><td colspan=\"4\">..</td></tr>";
?>

Best regards,

 

 

 


Reply

khalilov
that was a stupid mistake by me, however its still not working with Internet Explorer.
Perhaps you understand it better if you see it, go to www.crystalwarz.astahost.com, login using visitor username and visitor password. go to train under military menu. There are some words messed up above the table iam talking about but i can fix those, just see how the texts under description are positioned.
While you are at it open the site using firefox, you will notice the index page is messed up O.o
Note if posting my website in this way is illegal please tell me =)

Reply

Habble
hat was a stupid mistake by me, however its still not working with Internet Explorer.
Perhaps you understand it better if you see it, go to www.crystalwarz.astahost.com, login using visitor username and visitor password. go to train under military menu. There are some words messed up above the table iam talking about but i can fix those, just see how the texts under description are positioned.
While you are at it open the site using firefox, you will notice the index page is messed up O.o
Note if posting my website in this way is illegal please tell me =)
TavoxPeru Posted Sep 25 2008, 10:47 PM

QUOTE(khalilov @ Sep 25 2008, 05:40 AM) *
I used colspan in a table along with center in CSS
code is:

CODE
.boldtable1
{
position:absolute;
top:217px;
left:250px;
font-family:sans-serif;
font-size:12pt;
color:yellow;
background-color:black;
}

.boldtable1 TD, .boldtable1 TH
{
font-family:sans-serif;
font-size:8pt;
width=162px;
color:yellow;
background-color:black;
text-align:center;
vertical-align:middle;
}

I use in table
CODE
.
.
<TD colspan=4>...</TD>

The text becomes centered as if no cells were merged, there is merging of cells but the text is centered where the first cell was.

At first sight, you have an error in your CSS code for TD and TH, i suppose that you copy/paste your code from your HTML to CSS right???

Well, after a quickly test i made, i can say that it was the problem, simply change the "=" with an ":" to fix it, here is the corrected code:

CODE
.boldtable1 td, .boldtable1 th
{
font-family:sans-serif;
font-size:8pt;
width:162px;
color:yellow;
background-color:black;
text-align:center;
vertical-align:middle;
}

BTW, if you want to use quotes in your PHP code simply escape it with a "\", like this:

CODE
<?php
echo "<tr><td colspan=\"4\">..</td></tr>";
?>

Best regards,
khalilov Posted Sep 25 2008, 06:14 PM
The reason i don't use quotes is because i am using php

CODE
echo "<tr><td colspan="4">..</td></tr>";


That will start generating erros =)
maybe i'll use ' instead,as for small letters i'll modify it =).
Mordent Posted Sep 25 2008, 03:33 PM
Just a little note: I'd highly recommend using lowercase tags ("td" instead of "TD"), simply because it's then valid XHTML. HTML will most likely be slowly rendered redundant over time, meaning XHTML is the markup language that will make little things like that add extra hassle for you in the future. Same with colspan, really. You need to put some quotes around the 4 to make it XHTML compliant.

Not really an answer for you, but XHTML is overall one hell of a lot easier to debug. Take at look at w3schools sometime.
khalilov Posted Sep 25 2008, 10:40 AM
I used colspan in a table along with center in CSS
code is:

CODE
.boldtable1
{
position:absolute;
top:217px;
left:250px;
font-family:sans-serif;
font-size:12pt;
color:yellow;
background-color:black;
}

.boldtable1 TD, .boldtable1 TH
{
font-family:sans-serif;
font-size:8pt;
width=162px;
color:yellow;
background-color:black;
text-align:center;
vertical-align:middle;
}

I use in table
CODE
.
.
<TD colspan=4>...</TD>

The text becomes centered as if no cells were merged, there is merging of cells but the text is centered where the first cell was.


None of this helped me i am a bit stone age in web design lol

Reply

TavoxPeru
Sorry for not testing it first with Internet Explorer, you are right, it does not work with Internet Explorer, to fix it simply add to the cell an inline style or add another rule to your style sheet, the final CSS code is:

CODE
<style type="text/css">
.boldtable1 {
    position:absolute;
    top:217px;
    left:250px;
    font-family:sans-serif;
    font-size:12pt;
    color:yellow;
    background-color:black;
}

.boldtable1 td, .boldtable1 th {
    font-size:8pt;
    width:162px;
    text-align:center;
    vertical-align:middle;
}
.boldtable1 td.cols4 {
    width:100%;
}
</style>


The HTML code to use:

CODE
<tr>
    <td colspan="4" class="cols4">colspan with a class</td>
</tr>
<tr>
    <td colspan="4" style="width:100%">colspan with inline style</td>
</tr>

BTW, i only test this code with Firefox 3.0.2 and Internet Explorer 6, and you can view it working at Center In Table Cell With Span

Best regards,

Reply

khalilov
CODE
echo "<table class='boldtable2' border='1' align='center' BORDERCOLOR=orange cellspacing=0>";
echo "<TR><TD style='width:100%' >Unit</TD><TD   style='width:100%' >Description</TD><TD style='width:100%'>Train</TD></TR>";


echo "<TR><TD style='width:100%'>".$infantry['Name']."</TD><TD style='width:100%' colspan='2'>".$infantry['Description']."</TD><TD  align='center'><input name='infantry' size='17'></TD></TR>";
echo "<TR><TD style='width:100%'>".$archer['Name']."</TD><TD style='width:100%' colspan='2'>".$archer['Description']."</TD><TD style='width:100%'><input name='Archer' size='17'></TD></TR>";


CODE
.boldtable2
{
position:absolute;
top:415px;
left:250px;
font-family:sans-serif;
font-size:12pt;
color:yellow;
background-color:black;
}

.boldtable2 TD, .boldtable2 TH
{
font-family:sans-serif;
font-size:8pt;
width:67px;
color:yellow;
background-color:black;
text-align:center;
vertical-align:middle;

}


the table is showing description with no colspan, same as the input but the unit name is shown as if it has like 10 colspan, its really really wide. If your not understanding what iam saying go to the site and login then go to train

Reply

TavoxPeru
Yes i understand, and that problem happens because you are specifying for each cell a width of 100% which is incorrect, you use that kind of widths only when you use colspaned cells and also you specify the width for every cell in a row with CSS like you do in your post.

Fix this problem by removing the style attribute of all UNIT and TRAIN cells and by replacing the width of all DESCRIPTION cells, as with the previous code the DESCRIPTION cells can be set with an inline style or adding another rule to your style sheet.

CSS code:

CODE
<style type="text/css">
.boldtable2 {
    position:absolute;
    top:415px;
    left:250px;
    font-family:sans-serif;
    font-size:12pt;
    color:yellow;
    background-color:black;
}

.boldtable2 td, .boldtable2 th {
    font-size:8pt;
    width:67px;
    text-align:center;
    vertical-align:middle;
}
.boldtable2 td.description, .boldtable2 th.description {
    width:134px;
}
</style>

PHP code:

CODE
<?php
echo "<table class='boldtable2' border='1' align='center' BORDERCOLOR='orange' cellspacing='0'>\n";
echo "<tr>\n<th>Unit</th><th style='width:134px' colspan='2'>Description</th><th>Train</th>\n</tr>\n";
echo "<tr>\n<td>Swordmaster</td><td style='width:134px' colspan='2'>A gifted fighter, skilled with swords and heavily trained in militia tactics. Elite swordsmen are feared fighters. Costs 25 Food and 125 Iron to train.</td><td><input name='infantry' size='3'></td>\n</tr>\n";
echo "<tr>\n<td>Sharpshooter</td><td style='width:134px' colspan='2'>The sharpshooter is one of the strongest archers around, capable of attacking from a long distance with great accurancy. Costs 25 Food and 150 Wood to train.</td><td><input name='Archer' size='3'></td>\n</tr>\n";
echo "<tr>\n<th>Unit</th><th class='description' colspan='2'>Description</th><th>Train</th>\n</tr>\n";
echo "<tr>\n<td>Swordmaster</td><td class='description' colspan='2'>A gifted fighter, skilled with swords and heavily trained in militia tactics. Elite swordsmen are feared fighters. Costs 25 Food and 125 Iron to train.</td><td><input name='infantry' size='3'></td>\n</tr>\n</table>";
?>

BTW, i only test this code with Firefox 3.0.2 and Internet Explorer 6, and you can view it working at Center In Table Cell With Span 2.

Best regards,

Reply


Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.

Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

Recent Queries:-
  1. align center html table span - 1.83 hr back. (1)
  2. span text center - 30.41 hr back. (1)
  3. html center in table cell - 106.48 hr back. (1)
  4. html center in cell - 108.88 hr back. (1)
  5. xhtml center table cell contents - 131.46 hr back. (1)
  6. span table entire cell - 146.51 hr back. (1)
  7. center span in table td html - 150.40 hr back. (4)
  8. firefox center table within table cell - 153.82 hr back. (1)
  9. xhtml centre table cell content - 157.63 hr back. (1)
  10. position span to right of table cell - 169.74 hr back. (1)
  11. "html table" "center text" - 172.13 hr back. (1)
  12. css table-cell center - 177.20 hr back. (1)
  13. table cell center css - 184.72 hr back. (1)
  14. table colspan center text - 189.61 hr back. (1)
Similar Topics

Keywords : Span


    Looking for center, table, cell, span






*SIMILAR VIDEOS*
Searching Video's for center, table, cell, span
advertisement




Center In Table Cell With Span