Multi columns in XHTML?

ShawnMolloy · Sep 8, 2006

Hello,

What is the best way to create a table like effect using XHTML? Do you remember the old table layout method of creating a complex data container? This was great because you could assign static width elements and the remaining table contains would resize and flow to fit its containing table.

What method is the best for replicating this using CSS?

Code:

<table width="100%">
<!-- header row -->	
<tr>
		<td>File Name</td> <!-- this will auto resize -->
		<td width="25">File Size</td>
		<td width="25">Action</td>
	</tr>
<!--/header row -->	

	
<!-- data -->	
<tr>
		<td>My File</td>
		<td width="25">725kb</td>
		<td width="25">Edit | Delete</td>
	</tr>

<!--/data -->	
</table>

Shawn Molloy
Seattle, WA

Vragabond · Sep 8, 2006

1. You could argue that that is tabular data and use ... a table. Tables are not forbidden in XHTML and should not be avoided if you're producing tabular data. However, you should read up on tables though. At least use th for table headers, maybe use thead, tbody and tfoot for sections of the table and cols to define the widths of columns -- that way you don't need to do it in every line.

2. If you use a list element and then float two boxes on the right side that have fixed width. You could use unordered list and spans for boxes or try it with definition list with definition term for filename and definition description for size and actions.

Both methods I think would be valid, you just need to decide for yourself which one you like more.

ShawnMolloy · Sep 8, 2006

Hi,

Thanks for your response.

I should have mentioned earlier... the intention of my question was to figure out how to change a property in the entire row with css. For example, this only changes one td bgcolor property:

Code:

onMouseOver="this.bgColor='#E5E5E5'" onMouseOut="this.bgColor='#ffffff'"

I figured this would be easier to accomplish with xhtml.

Thanks,

Shawn Molloy
Seattle, WA

Thingol · Sep 11, 2006

Hi Shawn,

Maybe this article can help you further:

http://icant.co.uk/articles/tables/

Best regards,
Martijn Senden.

In the Beginning there was nothing, which exploded.

--Terry Pratchett, Lords and Ladies--

mkrausnick · Sep 11, 2006

ShawnMolloy said:
... the intention of my question was to figure out how to change a property in the entire row with css.

I picked up this piece of code from a Tek-tips thread once. I don't know the author, but it changes the color of all columns in a row at once on mouseover.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<html>
<head>
<title>Untitled</title>
<style type="text/css">
td { font-size: 18px; }
.c1 { background-color: red; }
.c2 { background-color: green; }
.c3 { background-color: gray; }
.c4 { background-color: yellow; }
.c5 { background-color: aqua; }
.cellOver { background-color: white; }
</style>
<script language="javascript"><!--
var rowList = "";
function changeColor(blnOver, rowTarget) {
    var cells = rowTarget.cells;
    if (rowList.indexOf(rowTarget.id + ",") == -1) {
        for (var i = 0; i < cells.length; i++) {
            cells[i].className = (blnOver) ? "cellOver" : ("c" + (i + 1))
        }
    }
}
function alterList(rowId) {
    rowId += ",";
    rowList = (rowList.indexOf(rowId) > -1) ? rowList.replace(rowId, "") : rowList + rowId;
}
--></script>
</head>
<body>
<table><tr id="r1" onclick="alterList(this.id);" onmouseover="changeColor(true, this);" onmouseout="changeColor(false, this);">
<td class="c1">Stuff</td>
<td class="c2">Stuff</td>
<td class="c3">Stuff</td>
<td class="c4">Stuff</td>
<td class="c5">Stuff</td>
</tr><tr id="r2" onclick="alterList(this.id);" onmouseover="changeColor(true, this);" onmouseout="changeColor(false, this);">
<td class="c1">Stuff</td>
<td class="c2">Stuff</td>
<td class="c3">Stuff</td>
<td class="c4">Stuff</td>
<td class="c5">Stuff</td>
</tr><tr id="r3" onclick="alterList(this.id);" onmouseover="changeColor(true, this);" onmouseout="changeColor(false, this);">
<td class="c1">Stuff</td>
<td class="c2">Stuff</td>
<td class="c3">Stuff</td>
<td class="c4">Stuff</td>
<td class="c5">Stuff</td>
</tr></table>
</body>
</html>

Mike Krausnick
Dublin, California

ChrisHunt · Sep 12, 2006

Mike, it'd be easier to have the Javascript change the class of the tr, and then define the desired colour change in CSS. Indeed, better browsers don't require any javascript at all:

Code:

.c1 { background-color: red; }
.c2 { background-color: green; }
.c3 { background-color: gray; }
.c4 { background-color: yellow; }
.c5 { background-color: aqua; }

tr:hover .c1,
tr:hover .c2,
tr:hover .c3,
tr:hover .c4,
tr:hover .c5 { background-color: white; }

You just have to use JS to make IE recognise :hover on elements other than <a>.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

mkrausnick · Sep 12, 2006

Chris,

Good tip. Can you show how to coax IE to recognize :hover on elements other than anchors?

Mike Krausnick
Dublin, California

1DMF · Sep 13, 2006

onmouseover="this.className='c1';"

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

Foamcow · Sep 13, 2006

Hmm, I'd approach that the other way and create a JS function that picks up anything with a particular class and then attaches the onmouseover event to it.

That way you don't have a load of onmouseover attributes in your HTML.

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

1DMF · Sep 13, 2006

either way your gonna need an onmouseover event!

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

ShawnMolloy · Sep 13, 2006

Wouldn't using tr:hover eliminate the need for a mouseover?

Shawn Molloy
Seattle, WA

1DMF · Sep 14, 2006

Mike, it'd be easier to have the Javascript change the class of the tr, and then define the desired colour change in CSS. Indeed, better browsers don't require any javascript at all:

CODE
.c1 { background-color: red; }
.c2 { background-color: green; }
.c3 { background-color: gray; }
.c4 { background-color: yellow; }
.c5 { background-color: aqua; }

tr:hover .c1,
tr:hover .c2,
tr:hover .c3,
tr:hover .c4,
tr:hover .c5 { background-color: white; }
You just have to use JS to make IE recognise :hover on elements other than <a>.

so the question still remains if you want it to work in I.E. how do you make I.E. recognise :hover on elements other than <a>

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Multi columns in XHTML?

ShawnMolloy

MIS

Vragabond

Programmer

ShawnMolloy

MIS

Thingol

Technical User

mkrausnick

Programmer

ChrisHunt

Programmer

mkrausnick

Programmer

1DMF

Programmer

Foamcow

Programmer

1DMF

Programmer

ShawnMolloy

MIS

1DMF

Programmer

Similar threads

Part and Inventory Search

Sponsor