Как сделать ячейку таблицы гиперссылки

Как можно привязать всю ячейку таблицы в html без javascript или jquery?

Я попытался поместить href в сам тег td, но он не работает, по крайней мере, в chrome 18

<td href='http://www.m-w.com/dictionary/' style="cursor:pointer">

Ответ 1

Попробуйте следующее:

HTML:

<table width="200" border="1" class="table">
    <tr>
        <td><a href="#">&nbsp;</a></td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>

CSS

.table a
{
    display:block;
    text-decoration:none;
}

Я надеюсь, что все будет хорошо.

Ответ 2

Попробуйте следующим образом:

<td><a href="..." style="display:block;">&nbsp;</a></td>

Ответ 3

Легко с функцией onclick и ссылкой javascript:

<td onclick="location.href='yourpage.html'">go to yourpage</td>

Ответ 4

Я также искал решение и просто нашел этот код на другом сайте:

<td style="cursor:pointer" onclick="location.href='mylink.html'">link</td>

Ответ 5

Вот мое решение:

<td>
   <a href="/yourURL"></a>
   <div class="item-container">
      <img class="icon" src="/iconURL" />
      <p class="name">
         SomeText
      </p>
   </div>
</td>

(МЕНЬШЕ)

td {
  padding: 1%;
  vertical-align: bottom;
  position:relative;

     a {
        height: 100%;
        display: block;
        position: absolute;
        top:0;
        bottom:0;
        right:0;
        left:0;
       }

     .item-container {
         /*...*/
     }
}

Подобным образом вы все равно можете воспользоваться некоторыми свойствами ячейки таблицы, например vertical-align. (Протестировано в Chrome)

Ответ 6

Проблемы:

(Пользователь: Kamal) Это хороший способ, но вы забыли проблему вертикального выравнивания! используя этот способ, мы не можем поместить ссылку точно в центр элемента TD! даже с выравниванием по вертикали: средний;

(Пользователь: Христос) Ваш ответ - лучший ответ, потому что нет никакой проблемы с выравниванием, а также сегодня JavaScript необходим для каждого... он в любом месте даже в старой умной телефон... и он включает по умолчанию...

Мое предложение ответить (Пользователь: Христос):

HTML:

<td style="cursor:pointer" onclick="location.href='mylink.html'"><a class="LN1 LN2 LN3 LN4 LN5" href="mylink.html" target="_top">link</a></td>

CSS

a.LN1 {
  font-style:normal;
  font-weight:bold;
  font-size:1.0em;
}

a.LN2:link {
  color:#A4DCF5;
  text-decoration:none;
}

a.LN3:visited {
  color:#A4DCF5;
  text-decoration:none;
}

a.LN4:hover {
  color:#A4DCF5;
  text-decoration:none;
}

a.LN5:active {
  color:#A4DCF5;
  text-decoration:none;
}