[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 503
  • Last Modified:

How to create the given html table by using HTML5 tags?

How can I create the html table that is given in the following link right under the title "10. Cell Background"? (The first table after this title)

http://coding.smashingmagazine.com/2008/08/13/top-10-css-table-designs/

Can you please send me the code that will generate this table in a html page?

Note: I'd like to apply the HTML5 tags.


Thanks,
0
Tolgar
Asked:
Tolgar
  • 2
  • 2
1 Solution
 
thehagmanCommented:
I may be missing something, but I'd strongly think that those  xhtml 1.0 strict examples also work with the html5 doctype (or rather lack of doctype)
0
 
TolgarAuthor Commented:
Probably you are right.

So, can you please help me to create the following table with the same functionality as on the page I posted earlier?

As I see, I think I need some javascript files. Can you also provide them for me?

<table id="gradient-style" summary="Meeting Results">
<thead>
<tr>
<th scope="col">Employee</th>
<th scope="col">Division</th>
<th scope="col">Suggestions</th>
<th scope="col">Rating</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">Give background color to the table cells to achieve seamless transition</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Stephen C. Cox</td>
<td>Marketing</td>
<td>Make discount offers</td>
<td>3/10</td>
</tr>
<tr>
<td>Josephin Tan</td>
<td>Advertising</td>
<td>Give bonuses</td>
<td>5/10</td>
</tr>
<tr>
<td>Joyce Ming</td>
<td>Marketing</td>
<td>New designs</td>
<td>8/10</td>
</tr>
<tr>
<td>James A. Pentel</td>
<td>Marketing</td>
<td>Better Packaging</td>
<td>8/10</td>
</tr>
</tbody>
</table>

Open in new window


Thanks,
0
 
Chris StanyonCommented:
The mouse over effect is done using css:

#gradient-style td { background: url("yourImage.png") repeat-x scroll 0 0 #E8EDFF; }
#gradient-style tbody tr:hover td { background: url("yourHoverImage.png") repeat-x scroll 0 0 #D0DAFD; }

Open in new window

0
 
TolgarAuthor Commented:
Would it possible to send me the whole code combined with the css and the html table code i have sent?

Thanks,
0
 
Chris StanyonCommented:
You'll need to do some of the work yourself - this forum is really for helping you to learn to solve your own problems, rather than coding your whole site for you.

Here's a general idea of where you need to be heading.

//HTML
<table id="gradient-style" summary="Meeting Results">
	<thead>
	<tr>
		<th scope="col" class="col1">Employee</th>
		<th scope="col" class="col2">Division</th>
		<th scope="col" class="col3">Suggestions</th>
		<th scope="col" class="col4">Rating</th>
	</tr>
	</thead>

	<tfoot>
	<tr>
		<td colspan="4">Give background color to the table cells to achieve seamless transition</td>
	</tr>
	</tfoot>

	<tbody>
	<tr>
		<td>Stephen C. Cox</td>
		<td>Marketing</td>
		<td>Make discount offers</td>
		<td>3/10</td>
	</tr>
	<tr>
		<td>Josephin Tan</td>
		<td>Advertising</td>
		<td>Give bonuses</td>
		<td>5/10</td>
	</tr>
	</tbody>
</table>

Open in new window

//CSS
#gradient-style td { background: url("yourImage.png") repeat-x scroll 0 0 #E8EDFF; }
#gradient-style tbody tr:hover td { background: url("yourHoverImage.png") repeat-x scroll 0 0 #D0DAFD; }
#gradient-style .col1 { width: 200px; }
#gradient-style .col2 { width: 100px; }
#gradient-style .col3 { width: 150px; }
#gradient-style .col4 { width: 100px; }

Open in new window

Good luck with it.
0

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

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