#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    1
    Rep Power
    0

    Making an entire table cell into a link in HTML5


    Hi there,

    I am writing up some content for our Shopify site, which I believe uses HTML5 and I'm having a tough time.

    I am trying to make an entire table cell into a link (not just the content of the cell, but the cell itself). I have tried several tutorials but I believe they're not applicable for HTML5 as it's not working. I will paste my code below- maybe someone has a solution? I'm trying to stay away from javascript so that I can ensure these links work for everyone.

    Any help would be GREATLY appreciated!!

    Sincerely,

    Nicole

    _______

    <style type="text/css"><!--
    td {
    color: #b0b0b0;
    background-color: #272727;
    }
    td:hover {
    color: #ffffff;
    background-color: #333333;
    }
    table td a{
    display: block;
    text-decoration: none;
    }
    --></style>
    <table style="width: 966px; vertical-align: text-top; border: 0px;">
    <tbody>
    <tr>
    <td style="padding: 20px; vertical-align: text-top; width: 322px;">
    <h6><img style="float: left; margin-right: 20px;" alt="" src="//cdn.shopify.com/s/files/1/0223/0176/files/mobileicon_1_small.png?3739" /><br />For protecting your mobile assets</h6>
    <p><br />Carrying or transporting high-value assets puts you in a very vulnerable position. &nbsp;Our line of mobile tracking devices are optimized for constant movement, making them perfect for use in your&nbsp;briefcases&nbsp; suitcases, vehicles and any other mobile situation.</p>
    <h5 style="text-align: left;">&nbsp;</h5>
    <h5 class="span13 border-bottom" style="text-align: left;">Ideal for:</h5>
    <p style="text-align: left;"><span style="line-height: 20px;">- briefcases<br />- suitcases<br />- vehicles<br />- travelling salespeople<br />- inventory being shipped</span></p>
    </td>
    <td style="padding: 20px; vertical-align: text-top; width: 322px;">
    <h6><img style="float: left; margin-right: 20px;" alt="" src="//cdn.shopify.com/s/files/1/0223/0176/files/stationicon_small.png?3739" /><br /><a href="link">For protecting your stationary assets</a></h6>
    <p><br />Store-fronts, showcases and warehouses where your assets are on display are the biggest targets in jewelry industry-related thefts. Protect your stationary assets by planting one of our stationary tracking devices into your inventory. &nbsp;These high-sensitivity devices are optimized for display situations in which any significant movement may be of concern.</p>
    <h5 class="span13 border-bottom" style="color: #b0b0b0;">Ideal for:</h5>
    <span style="line-height: 20px;">- showcases &amp; displays<br />- warehouses<br />- safes</span></td>
    <td style="padding: 20px; vertical-align: text-top; width: 322px;">
    <h6><img style="float: left; margin-right: 20px;" alt="" src="//cdn.shopify.com/s/files/1/0223/0176/files/personalicon_small.png?3739" /><br /><a href="link">For protecting your personal assets</a></h6>
    <p><br />Don't forget about your assets at home. &nbsp;Your jewelry-box is a prime target in home-invasions. Protect your personal assets with our tracking system bait-packaged and designed for home use. &nbsp;Available at wholesale prices and ideal for high-end jewelers to offer their customers as part of their inventory.<br /><br /></p>
    <h5 class="span13 border-bottom">Ideal for:</h5>
    <p><span style="line-height: 20px;">- at home use</span><br />- high-end jewelers and other businesses wishing to offer their customers protection for their own high-value assets</p>
    <p>&nbsp;</p>
    </td>
    </tr>
    </tbody>
    </table>
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2011
    Posts
    118
    Rep Power
    50

    Move the link tag


    I think you just want to move your link tag (<a></a>) to surround the whole content of your cell.

    I.e., instead of
    Code:
    <td><h6><a></a></h6><p></p></td>
    this
    Code:
    <td><a><h6></h6><p></p></a></td>

IMN logo majestic logo threadwatch logo seochat tools logo