Center In Table Cell With Span

[khalilov 0]

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

.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

..<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.

[Mordent 0]

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 0]

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

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 =).

[TavoxPeru 0]

I used colspan in a table along with center in CSScode is:

.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

..<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:

.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:

<?phpecho "<tr><td colspan=\"4\">..</td></tr>";?>

Best regards,
Edited September 25, 2008 by TavoxPeru (see edit history)

[khalilov 0]

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 http://forums.xisto.com/no_longer_exists/, 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.oNote if posting my website in this way is illegal please tell me =)

Edited September 26, 2008 by khalilov (see edit history)

[iGuest 3]

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 http://forums.xisto.com/no_longer_exists/, 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.oNote 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 CSScode 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 tableCODE..<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<?phpecho "<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 phpCODEecho "<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 CSScode 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 tableCODE..<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

[TavoxPeru 0]

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:

<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:

<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,

[khalilov 0]

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>";

.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

[TavoxPeru 0]

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:

 

<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:

 

<?phpecho "<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,

[ernesto 0]

Just noticed that, thank you very much.