asked on

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,

Member_2_4694817

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)

Tolgar

ASKER

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,

Chris Stanyon

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

Tolgar

ASKER

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

Thanks,

ASKER CERTIFIED SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial