Submit Tutorial

spacer
Newsletter

spacer
RSS
spacer
Submit Tutorial

spacer
website promotion banner
eturnkeys
Your Ad Here
Hover Links in CSS (part 1)
by GreyCobra.com
CSS Basic, CSS Codes
by Adam Priestley
Link Effects
by Lindsay Coome
Hover Links in CSS (Part 2)
by GreyCobra.com
Free Web Designs
A collection of free web templates. Premium quality web designs, easy to browse.
HTML and CSS tutorials
A collection of free web templates. Premium quality web designs, easy to browse.
Html lessons and tutorials in web page design.
You, too, can design your own website with over 45 interactive HTML tutorials. Also try your hand at JavaScript or check out a search engine submission service.
2 Create a Website
Offers free tutorials on website creation, generating traffic and making money online.
UK Hosting Services
Provider of low cost affordable UK web hosting services.
HTML and CSS  Home HTML and CSS Tutorials Table Cells Into Links
rss

Table Cells Into Links

Author: Joseph Skidmore More by this author

Added: Aug 17, 2006 Rating:  Average Rating: 2.5 Votes: 14 Position: 11995 of 13486Average Rating: 2.5 Votes: 14 Position: 11995 of 13486Average Rating: 2.5 Votes: 14 Position: 11995 of 13486Average Rating: 2.5 Votes: 14 Position: 11995 of 13486Average Rating: 2.5 Votes: 14 Position: 11995 of 13486 Level: Beginner Software:  Dreamweaver

Table Cells Into LinksThe way to turn a table cell into a link is to apply a class to a link and to insert the link inside cell, here is the CSS:

<style type="text/css">
a.menu:link {
text-decoration: none;
color: black;
display: block;
width: 100%;
height: 100%;
background: red;
}

a.menu:visited {
text-decoration: none;
color: red;
display: block;
width: 100%;
height: 100%;
background: blue;
}

a.menu:hover {
text-decoration: none;
color: white;
display: block;
width: 100%;
height: 100%;
background: black;
}

a.menu:active {
text-decoration: none;
color: red;
display: block;
width: 100%;
height: 100%;
background: white;
}
</style>

As you can see I have added a class to a link which is called 'menu' we will add this class to the links that go inside the table cells that we want to make into the rollover links. Now here is the table code that we are going to add the links to:

<table width="100" height="200" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="width: 100px; height: 50px;">
<a class="menu" href="http://www.domain.com">Link 1</a></td>
</tr>
<tr>
<td style="width: 100px; height: 50px;">
<a class="menu" href="http://www.domain.com">Link 2</a></td>
</tr>
<tr>
<td style="width: 100px; height: 50px;">
<a class="menu" href="http://www.domain.com">Link 3</a></td>
</tr>
<tr>
<td style="width: 100px; height: 50px;">
<a class="menu" href="http://www.domain.com">Link 4</a></td>
</tr>
</table>

This is the table code which you should already know goes in the body of the document as apposed to the CSS which goes inside the head. To see an example of this code click here.



Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

HTML and CSS  More HTML and CSS: Most Popular Materials | Fresh Materials | More HTML Tutorials at Markuptutorials.com
Add comments to "Table Cells Into Links"