CSS HTML how to remove whole cell links in tables? -

CSS HTML how to remove whole cell links in tables? -

i want web page footer in there vertically aligned links. using table, in write links "mobile", "help", "terms", ...

the problem when pointing mouse on table, links active (even on empty cells). want have links solely when point mouse right on names "mobile", "help", "terms" - not when point on rest of cell, nor anywhere else on table.

i researched thing on stackoverflow reverse problems (people want activate cell links).

can help? code below. give thanks you!!

html code

<div id="footer"> <div class = "box2"> <h6><a href="/error">français</h6> <h6><a href="/error">english (us)</h6> <h6><a href="/error">español</h6> <h6><a href="/error">português (brasil)</h6> <h6><a href="/error">deutsch</h6> <h6><a href="/error">italiano</h6> <h6><a href="/error">Русский</h6> </div> <div class = "box3"> <table class="table2"> <tr> <td><h6><a href="/mobile">mobile</h6></td> <td><h6><a href="/help">help</h6></td> <td><h6><a href="/term">terms , conditions</h6></td> <td><h6><a href="/developers">developers</h6></td> <td><h6><a href="/carriers">carriers</h6></td> <td><h6><a href="/other">other</h6></td> </tr> <tr> <td><h6><a href="/blog">blog</h6></td> <td><h6><a href="/findus">find us</h6></td> <td><h6><a href="/pics">pics</h6></td> </tr> </table> </div> </div>

css code

#footer { height: 110px; background: #80b2e6; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#80b2e6), color-stop(100%,#3385d6)); background: -moz-linear-gradient(top, #80b2e6 0%, #3385d6 100%); background: -webkit-linear-gradient(top, #80b2e6 0%, #3385d6 100%); background: -o-linear-gradient(top, #80b2e6 0%, #3385d6 100%); background: -ms-linear-gradient(top, #80b2e6 0%, #3385d6 100%); background: linear-gradient(top, #80b2e6 0%, #3385d6 100%); } .box2 { width:800px; border-bottom:1px solid lightgrey; display:inline-block; padding-top:20px; } .box3 { width:800px; padding:0; } .table2 { width:450px; padding:0; font-size:11px; table-layout: auto; float:left; border-collapse:collapse; } h6 { font-weight: normal; font-size: 11px; max-width: 800px; color: white; margin:0; padding-bottom:3px; padding-right:10px; /*display:inline-block;*/ float:left; } h6 a:link { color:white; } .table2 td { color:white; display:inline; } a:link { text-decoration:none; color: #54544b; } table { width:420px; /*height: 200px;*/ padding:10px; margin-bottom:10px; border-collapse:collapse; table-layout: fixed; } td { text-align:center; position:center; padding-top: 3px; padding-bottom: 3px; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; -o-hyphens: auto; hyphens: auto; word-wrap: break-word; } tr, div { }

close link tags </a>. illustration change

<td><h6><a href="/mobile">mobile</h6></td>

to

<td><h6><a href="/mobile">mobile</a></h6></td>

and rest of links

html css table hyperlink