• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 570
  • Last Modified:

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
0
DJ_AM_Juicebox
Asked:
DJ_AM_Juicebox
2 Solutions
 
JornakCommented:
0
 
Tony O'ByrneCommented:
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>

Open in new window

0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
DJ_AM_JuiceboxAuthor Commented:
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
0
 
Tony O'ByrneCommented:
tr:hover{ whatever }
0
 
Tony O'ByrneCommented:
(in your css)
tr:hover{ border: 1px solid pink; }
0
 
DVation191Commented:
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.
0
 
Tony O'ByrneCommented:
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. :)
0
 
Tony O'ByrneCommented:
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>

Open in new window

0
 
DVation191Commented:
Any idea how to make that work in IE7?
0
 
Tony O'ByrneCommented:
How is it breaking in IE7?
0
 
Tony O'ByrneCommented:
(It's working for me in IE7)
0
 
Tony O'ByrneCommented:
I was re-checking how things were going here and I re-read your question:
"How would I add hovering such that the entire row becomes highlighted though? Right now only individual cells become highlighted?"

I realized that my tr:hover was silghtly incomplete...

To change the border color on all cells in a row when the row is hovered:
#spreadsheet tr:hover td{
    border: 1px solid green ;
}

But because that's some specific CSS (id>tag>tag) it'll over-ride the #spreadsheet td:hover styling, so you need to do something small to prevent that...  (!important)
#spreadsheet td:hover{
    border: 1px solid red !important;
}
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now