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
DJ_AM_JuiceboxAsked:
Who is Participating?
 
JornakCommented:
0
 
Tony O'ByrneSenior Web DeveloperCommented:
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
Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

 
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'ByrneSenior Web DeveloperCommented:
tr:hover{ whatever }
0
 
Tony O'ByrneSenior Web DeveloperCommented:
(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'ByrneSenior Web DeveloperCommented:
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'ByrneSenior Web DeveloperCommented:
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'ByrneSenior Web DeveloperCommented:
How is it breaking in IE7?
0
 
Tony O'ByrneSenior Web DeveloperCommented:
(It's working for me in IE7)
0
 
Tony O'ByrneSenior Web DeveloperCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.