|
HTML - Colgroup And Tbody Problems
I am having problems getting colgroup and parts of tbody to work properly. Colgroup just does not apply any background colour or alignment. Tbody groups the rows together but it only applies colour to behind the text in the cell and not the whole cell like I want it to. Also when I use text-align with it it only aligns th cells and not td.
I am using Internet Explorer 7 and Dreamweaver CS3, I have also tried displaying it in Firefox but that does the same thing as IE. I have also tried the CSS equivalents of the HTML code but they do the same. Here is the code below it is just to show what it keeps doing: <table width="100%" cellpadding="0" cellspacing="0"> <caption> This is a test table </caption> <colgroup span="5" align="center" style="background-color:#CCFF00"/> <tr> <th>aaaaaaaaaaa</th> <th>bbbbbbbbbbb</th> <th>ccccccccccc</th> <th>ddddddddddd</th> <th>eeeeeeeeeee</th> </tr> <tbody style="background-color:#FFFF00"> <tr> <th>ww</th> <td>one</td> <td>two</td> <td>three</td> <td>four</td> </tr> <tr> <th>ww</th> <td>one</td> <td>two</td> <td>three</td> <td>four</td> </tr> </tbody> </table> Can anyone explain why its doing these things and if Im doing something wrong? Also is it wise to use colgroup and tbody nowadays or are there better alternatives? Similar TutorialsHi: Does anyone know how to put a bordrr around the outside of a column group ?? That is, I would like to place a border around the outside of a group of columns, and have *no* internal vertical or horizontal borders -- just the properly aligned internal data. So, for example, I would then have a 'block' of data inside a black border. THe block of data would then be one table row' (with perhaps four lines in the row), and would be several columns wide. I hope there's a way to do this -- or else I'll have to give up on this external border around my 'cell' ( Thank You ! -Mel Smith Hi all, Before I pour cold water onto Mozilla's FireFox to melt it's flames and kill it, I've a question : Quote: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Tables 14</title> </head> <body> <table border="1" width="80%"> <colgroup span="3" align="right" /> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> </table> </body> </html> As you can see, there's 3 columns and I'm using <colgroup span..../> to mass-align the cells to the right. However, when I preview it in FireFox, there's no effect. In Internet Explorer, the cells are right-aligned(which is correct). I also tried doing the CSS equivalent, but FireFox still fails. When I tried changing some other settings, like : <colgroup span="3" style="background-color:red;" />, FireFox renders the code correctly. Seems that FireFox doesn't like to right-align text in columns, eh? Thanks! Xeon. Look at this code <html> <body> <table> <tbody style="display: none;"> <tr> <td>Row 1 hasn't to be appeared</td> </tr> <tbody> <tr> <td>Row 2 hasn't to be appeared as well</td> </tr> </tbody> <tr> <td>Row 3 hasn't to be appeared as well</td> </tr> </tbody> </table> </body> </html> The result is: Row 2 hasn't to be appeared as well Row 3 hasn't to be appeared as well With Row 2 we can work through some "CSS/JavaScript/AJAX ... etc" stuff. But WHY DOES THE ROW 3 APPEARED ????????? Hi, i'm doing an interface for a database, and i want to print my query results on tables. As i have many entries, i need a big table so i want to do a table with scroll where my header doesn't get out of sight (ever) when i scroll down. im working on NuSphere Phped, Windows 7. This code is working only on the PHPed simulator...on chrome and FF the scrollbar dont appear: PHP Code: <table align="center" cellpadding="3" cellspacing="0" style="border: black; border-style:double ; border-spacing: 0; cursor:default;"> <thead> <?php ###### ###### processing the query for($i=0; $i<$numcol; $i++) { ####### echo "<th bgcolor=\"#000000\" "; ####### some conditions for mouse events echo "><font face=\"helvetica, cursive\" size=\"-2\" color=\"white\">"; echo $column_name"</font></th>"; } ?> <th style="width: 16px; background: black;"></th> ##16px for the scrollbar </thead> <tbody style="overflow-y: scroll;overflow-x:hidden; height: 300;"> <?php $i=0; do{ ######## ######## ?> <tr onmouseover="this.bgColor='#B3BC7A'" onMouseout="this.bgColor='<?php if($i%2==0) echo "#eeeeee"; else echo "#ffffff"; ?>'" <?php if($i%2==0) echo " bgcolor=\"#eeeeee\" "; else echo " bgcolor=\"#ffffff\""; ?>> <?php for($j=0; $j<$numcol; $j++) { ?> <td <?php #######more php query precessing ########## ?> ><font face="helvetica, cursive" size="-2"> <?php } echo $attribute; ?> </td> <?php } ?> </font> <td style="width: 16px; overflow: scroll;"></td></tr> <?php $i++; }while($currentRow) ?> </tbody> </table> can someone tell me how to make it work on those browsers? Basically what I want is a floating table head that follows you around when you scroll the table. Did all that, but the problem is that you need to cut out the head of the table to make it float. The problem comes where you have a table that has no column width set so the column width is determined by the content of tbody. I'm trying to make the browsers keep rendering the entire table, but hide the tbody so the columns won't loose their widths. It works fine in Mozilla and Opera, but IE has problems. Here is the code: HTML Code: <html>
<head>
<style type="text/css">
table
{
border-collapse: collapse;
}
tbody td
{
line-height: 0px;
visibility: hidden;
}
</style>
</head>
<body>
<table id="table_test"
border="0" cellpadding="0" cellspacing="0"
style="background-color: red;">
<thead>
<tr>
<th>column1</th>
<th>column2</th>
<th>column3</th>
<th>column4</th>
<th>column5</th>
<th>column6</th>
<th>column7</th>
</tr>
</thead>
<tbody>
<tr>
<td>nekaj</td>
<td>pac</td>
<td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>mora</td>
</tr>
<tr>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>mora</td>
</tr>
<tr>
<td>nekaj</td>
<td>pac</td>
<td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>mora</td>
</tr>
<tr>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>mora</td>
</tr>
<tr>
<td>nekaj</td>
<td>pac</td>
<td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>mora</td>
</tr>
<tr>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>mora</td>
</tr>
<tr>
<td>nekaj</td>
<td>pac</td>
<td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>mora</td>
</tr>
<tr>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>mora</td>
</tr>
<tr>
<td>nekaj</td>
<td>pac</td>
<td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>mora</td>
</tr>
<tr>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>mora</td>
</tr>
<tr>
<td>nekaj</td>
<td>pac</td>
<td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>mora</td>
</tr>
<tr>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>mora</td>
</tr>
<tr>
<td>nekaj</td>
<td>pac</td>
<td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>mora</td>
</tr>
<tr>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>mora</td>
</tr>
<tr>
<td>nekaj</td>
<td>pac</td>
<td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>mora</td>
</tr>
<tr>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>mora</td>
</tr>
<tr>
<td>nekaj</td>
<td>pac</td>
<td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>mora</td>
</tr>
<tr>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>mora</td>
</tr>
<tr>
<td>nekaj</td>
<td>pac</td>
<td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>mora</td>
</tr>
<tr>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>mora</td>
</tr>
<tr>
<td>nekaj</td>
<td>pac</td>
<td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>mora</td>
</tr>
<tr>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>mora</td>
</tr>
<tr>
<td>nekaj</td>
<td>pac</td>
<td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>mora</td>
</tr>
<tr>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>mora</td>
</tr>
<tr>
<td>nekaj</td>
<td>pac</td>
<td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>mora</td>
</tr>
<tr>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>nekaj</td>
<td>pac</td>
<td>mora</td>
<td>mora</td>
</tr>
</tbody>
</table>
</body>
</html>
And the result can be seen in the attached picture. Any ideas how to solve this or another way to preserve the thead column widths? Please check it for me. Thanks. <TABLE BORDER="11" BORDERCOLOR="green" WIDTH="400" HEIGHT="200"> <COLGROUP SPAN="1" BGCOLOR="#0000FF"></COLGROUP> <TR> <TD>vv</TD><TD>vv</TD><TD>vv</TD> </TR> <TR> <TD>vv</TD><TD>vv</TD><TD>vv</TD> </TR> <TR> <TD>vv</TD><TD>vv</TD><TD>vv</TD> </TR> </TABLE> this is my page http://web.vtc.edu/users/cjb06271/CI...nal/order.html there are several things I would like to happen. 1. the right collumn background to be where the right collumn should be(so other links in navbar) 2.The test between the roach pictures to be alligned with the top rather than bottom of pictures (so smaller windows can see) 3. When you size the window smaller than the text, a scroll bar appears, and when you scroll the background no longer exists. If I put it on auto the background will only go as far as the text does. 4. (nice but not required)The cocroachs to be alligned to the left and right of the top bar respectively, and the text in the middle. 5. (nice but not required) the right column background image is being cut in half (as does the top one if you size small enough). any way to make the images ignore the collumns? don't worry about the colors I will be changing them soon Hi everyone I hope some of you pros can help me out here? When you go to my site www.iMaciForums.com with IE 6 the text is all misaligned, I had the same problem with IE 7 & but I fixed that its just IE6 now. So could you take a look and let me know whats wrong with it, because it's driving me crazy Thanks. I am very new to html editing but trying to work my way around. I have made my website in Dreamweaver and everything looks correct on dreamweaver and on firefox but when opened in IE, everything on my page becomes centered an underlined. The first item on the page is centered and underlined but the coding ends there. Not sure what I did wrong. Thank you in adavance for any help. Let me state my problem. Under my links which is under the banner, it says My Tickets, and User it seems in Internet Explorer it shows an extra 2px border on the bottom. Something to do with the height I assume. Now in firefox there is a 10px gap in between the Ticket Deck banner and the Links Bar. Also I can't keep to get the copyright centered for some reason :s . Here is the html: Code: <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html><head><title>Ticket Deck v. 1.0 beta</title>
<link href='index.css' rel='stylesheet' type='text/css' />
<body>
<div id='header'>
<div id='tlogo'><div id='logo'></div></div>
<div id='links'>
<ul>
<li><a href='#'><img src='images/linksmy.gif' width='91' height='25' alt='My Tickets'></a></li>
<li><a href='#'><img src='images/linksuser.gif' width='83' height='25' alt='User Area'></a></li>
</ul>
</div>
</div>
<br />
<div id='memberbar'>
<div id='textmargin1'>
test
</div>
</div>
<br/>
<div id='container'>
<div id="content">Welcome to Ticket Deck's Ticket System. What is listed below is your ticket's summary clicking on the subject title will
bring you directly to your ticket.<br/>
<div id="tickets"><div id="tbar"><div id="textmargin">Ticket Summary</div></div>
<div id="tcontain">
<table width='100%' cellpadding='3' cellspacing='1' id='toutline'>
<tr>
<th width='5%'>id</th>
<th width='30%'>Subject</th>
<th width='10%'>Priority</th>
<th width='23%'>Starter</th>
<th width='15%'>Status</th>
<th width='10%'>Dept #</th>
</tr>
<tr>
</table>
</div>
<br/>
<center>Welcome Guest! Please login to view your tickets!</center>
</div>
</div>
<div id="nav"><div id="navbar"><div id="textmargin">Login</div></div>
<div id="textmargin">
Username: <br/>
<input type="text" name="username" size="25" /><br />
Password: <br/>
<input type="text" name="username" size="25" /><br /><br />
<input type="hidden" name="do" value="new">
<center>
<input type="submit" name="Submit" value="Login" />
<input type="reset" name="reset" value="Reset" /><br/>
</center>
</div>
<div id="navstrip"><div id="textmargin">Ticket Statistics</div></div>
lovely stats here
<br/>
<div id="navstrip"><div id="textmargin">Ticket Statistics</div></div>
Update: Ticket Deck re
</div>
<div id="copyright">
<center>Powered by <a href="#">Ticket Deck</a> v. 1.0 Beta 1</center>
</div>
</div>
</div>
</body>
The CSS Code: body {
background: #f8f8f8;
color: #8a6600;
font: 12px verdana, arial, sans-serif;
margin: 0px;
padding: 0px;
}
a img {
border:0;
}
div#tlogo {
background-image: url(images/tlogo.gif);
width: 100%;
height: 25px;
}
div#logo {
background-image: url(images/logo.gif);
width: 197px;
height: 25px;
margin-left: 25px;
}
div#links {
height: 25px;
min-height: 25px;
width: 100%;
background-image: url(images/linksbg.gif);
padding: 0;
margin-top: 1px;
}
div#links ul {
list-style:none;
}
div#links ul li {
float:left;
}
div#header {
height: 51px;
}
div#container {
color: #ebba34;
height: 200px;
min-height: 100%;
width: 830px;
margin: auto;
}
* html #container {
height:100%;
}
*html #copyright {
position: absolute;
bottom: 0px;
}
div#date {
margin-right: 10px;
float:right;
}
div#nav {
color: #1b90b7;
border: 1px solid #61a5b9;
float: left;
width: 220px;
background: #e5f9ff;
}
div#navbar {
border: 1px solid #61a5b9;
width: 216px;
color: #1b90b7;
margin-left: 1px;
margin-right: 1px;
margin-top: 1px;
height: 23px;
background-image: url(images/nav.gif);
}
div#navstrip {
width: 100%;
background-image: url(images/nav.gif);
height: 23px;
border-top: 1px solid #1b90b7;
border-bottom: 1px solid #1b90b7;
}
div#textmargin {
margin-left: 2px;
margin-top: 4px;
}
div#textmargin1 {
margin-left: 2px;
margin-top: 6px;
}
div#tickets {
background: #ffebb3;
width: 602px;
border: 1px solid #e8af3a;
float: right;
}
div#tbar{
width: 598px;
background-image: url(images/t_bar.gif);
height: 23px;
border: 1px solid #e8af3a;
margin-left: 1px;
margin-right: 1px;
margin-top: 1px;
}
div#tcontain{
width: 599px;
height: 18px;
margin-left: 1px;
margin-right: 1px;
}
div#content {
width: 602px;
color: #8a6600;
float: right;
}
div#memberbar {
color: #1b90b7;
style: bold;
width: 80%;
height: 28px;
background: #e5f9ff;
border: 1px solid #61a5b9;
margin:auto;
}
div#toutline {
border: 1px solid #cde1ed;
}
#copyright {
text-align: center;
height:20px;
position: absolute;
bottom: 0px;
position: bottom;
}
table,
tr,
td {
background: transparent;
font-size: 12px;
font-family: verdana, arial, sans-serif;
}
table th {
background: #fadc89;
font-size: 12px;
font-family: verdana, arial, sans-serif;
font-weight: normal;
text-align: left;
padding: 2px;
}
table th a {
color: #003E67 !important;
text-decoration: none;
}
Any help is appreciated . I know that this isn't valid xhtml I haven't gone that far in fixing it to make it valid, just trying to fix the obvious problems. Thanks, Brian Hi The bit of coding below works fine in firefox and ie 5 and older it does not show right in ie 6 and 7 Please can someone tell me how to fix this bug. <td align="left" valign="top" bgcolor="#E7EEF5"><ul type="square" class="style2"> <li class="style3">Ground Training, starting and schooling young horses</li> <li class="style3">Re-schooling and corrective training to overcome behavioural and physical problems</li> <li class="style3">Rehabilitation following injury or illness</li> <li class="style3">Training for horse and rider at all levels and disciplines</li> <li class="style3">Re building confidence between horse and rider</li> <li class="style3">Re-training race horses</li> </ul> </td> <td align="left" valign="top" bgcolor="#E7EEF5"><ul type="square" class="style2"> <li class="style3">Competition preparation</li> <li class="style3">Advanced Equine Dental Technician</li> <li class="style3">Tellington Touch (TTeam) Groundwork and bodywork</li> <li class="style3">McTimoney Manipulation</li> <li class="style3">Equine Sports Therapy</li> <li class="style3">Massage, Stretching and Bodywork classes for horse owners</li> </ul> </td> OK, so, this is realy starting to bug me, i have spent an hour maby 2 on this but nothing has worked, the problem is that i want an inner LEFT side bar and a RIGHT side content box inside a box on the right, if you dont get what i mean, the website is http://brett.unixpod.com/test/index.html And the CSS stylesheet http://brett.unixpod.com/test/css/home.css ok, the text and stuff that is circled in white, i want moved up so that it is aligned with the text on the left, I want the stuff in the circle moved to the top of the big box its in, falong with that little box of text I WANT THE STUFF IN THE CIRCLE MOVED TO THE TOP OF THE BIG BOX ITS IN, ALONG WITH THAT LITTLE BOX OF TEXT Hi guys, now i know this is my first post here, i have joined because i am really stuck and i would really appreciate any help. First off, just so you know - i know near enough nothing about HTML I am busy designing my site and i cant go much further as there is one issue really bugging me. My website is vBulletin (yes i know its PHP) and im using another script called vBadvanced CMPS (a portal mosification). I have tried to add a navigation bar to the left of my forums and it works! Only problem is, it really breaks up the forum. Take a look for yourself Link Notice the way its all broken up at the bottom? Anyway, i posted my problem on both the vBulletin & vBadvanced websites without much luck. One of the admins told me that i needed to get some errors fixed (all 109 of them)... I managed to narrow the errors down to 67 all in all. Here I really am stuck guys and im sure these errors will be relatively easy to fix for someone who has experience with HTML/PHP. if anybody needs me to i can paste the vBulletin templates that are causing the problems Any help would be great. Thanks Hi everyone, I recently landed myself a job as a web manager. It's been a long time since I done it however, as I've had children to bring up and so on - i'm a bit rusty but getting through it okay. I've hit a snag however and I'm wondering if anyone can help me... The website i'm charged with watching over works completely fine bar one problem, and its not even a big problem - just a bit annoying. One of the images, when opened in Chrome, floats to the left when it is supposed to be central. This is the only image to do this on the website in any browser. Has anyone got any tips for me? I recently bean using ssi instead of frames and i now have an issue... I do not know how to keep the menubar on the left hand side at the top... see as my page streaches it centers itself in the midle of the screen... i am using tables to create a framelike effect without the issues that frames create take a look at this and can anyone tell be why it does this in ie it look fine in firefox and safari http://nathanoconnor.co.uk/kartingchampionships/site/ thanks Can anyone suggest how i fix the problem i have here with IE? HTML Code: <body> <div id="container"> <div id="header"> <img src="images/thePlacePromotion.jpg" alt="The Place Promotion Agency for Gloucestershire" width="960" height="80" /> </div> <div id="middle"> <a href="http://www.glosfirst.co.uk"><img src="images/Middle.jpg" alt="We're building a new website, meanwhile here's a link to the current Gloucestershire First website." width="960" height="578" border="0" /></a> </div> <div id="bottom"> <a href="http://www.glosfirst.co.uk"><img src="images/slogan.jpg" alt="We're building a new website, meanwhile here's a link to the current Gloucestershire First website." width="960" height="80" border="0" /></a> </div> </div> </body> CSS is: Code: body {
background-color: #96be3f;
}
#container {
width: 970px;
background-color: #96be3f;
height:auto;
margin: auto;
}
#header {
width: 960px;
padding: 20px auto;
margin: auto;
}
#middle {
width: 960px;
height: 567px;
margin: auto;
}
#bottom {
width: 960px;
height: 80px;
margin: auto;
}
the top header on IE is over to the right! Thanks Hurley here is where my problem is. In ie the hover effect does not work, but in firefox it does! help. |
|||||||