DJ_AM_Juicebox
asked on
HTML table that looks like a spreadsheet
Hi,
I'd like to make a table that looks like an excel spread sheet. Each cell will only have text. But I'd like to make the rows change color when the mouse goes over a row.
Is there any 'standard' html code for making such a table? Something pretty much everyone uses?
Thanks
I'd like to make a table that looks like an excel spread sheet. Each cell will only have text. But I'd like to make the rows change color when the mouse goes over a row.
Is there any 'standard' html code for making such a table? Something pretty much everyone uses?
Thanks
Jornak
Only thing I've used is Tableizer (http://tableizer.journalistopia.com/). You could add the code from here: http://www.basictips.com/table-cell-background-colors-change-mouseover-css.shtml
I don't think there's any such thing as "standard" for designing a spreadsheet type thing, but the best way (I think) to go about it is the code below. I'm using a small table just to give you the idea.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css" media="all">
#spreadsheet{
border-collapse: collapse; /* removes the spacing between the cells */
}
#spreadsheet td{
border: 1px solid blue;
}
#spreadsheet td:hover{
border: 1px solid red;
}
</style>
</head>
<body>
<table id="spreadsheet">
<tr><td>one</td><td>two</td></tr>
<tr><td>three</td><td>four</td></tr>
<tr><td>five</td><td>six</td></tr>
</table>
</body>
</html>ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Hi yes I'm interested in just using a really simple table like the one Quaoar supplied - I don't need the more complex jquery ones.
How would I add hovering such that the entire row becomes highlighted though? Right now only individual cells become highlighted?
Thanks
How would I add hovering such that the entire row becomes highlighted though? Right now only individual cells become highlighted?
Thanks
tr:hover{ whatever }
(in your css)
tr:hover{ border: 1px solid pink; }
tr:hover{ border: 1px solid pink; }
A simple table but no javascript to highlight rows on hover while being cross-browser? I'd be interested in seeing that myself. You might want to reconsider javascript; it's not as hard as it might look.
Javascript isn't hard when you get used to it, but CSS is more lightweight and is less likely to be turned off.
CSS is easier, lighter, & more reliable imo. :)
CSS is easier, lighter, & more reliable imo. :)
Here's the code...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css" media="all">
#spreadsheet{
border-collapse: collapse; /* removes the spacing between the cells */
}
#spreadsheet td{
width: 100px;
border: 1px solid blue;
}
#spreadsheet tr:hover{
background: #afa;
}
#spreadsheet td:hover{
border: 1px solid red;
}
</style>
</head>
<body>
<table id="spreadsheet">
<tr><td>one</td><td>two</td><td>one</td><td>two</td><td>one</td><td>two</td></tr>
<tr><td>three</td><td>four</td><td>three</td><td>four</td><td>three</td><td>four</td></tr>
<tr><td>five</td><td>six</td><td>five</td><td>six</td><td>five</td><td>six</td></tr>
</table>
</body>
</html>
Any idea how to make that work in IE7?
How is it breaking in IE7?
(It's working for me in IE7)
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.