Как я могу сделать ссылку из ячейки таблицы <td>

Ответ 1

Да, это возможно, хотя и не буквально <td>, а что в нем. Простой трюк состоит в том, чтобы убедиться, что контент распространяется на границы ячейки (он не будет включать сами границы).

Как уже объяснялось, это не является семантически правильным. Элемент a является встроенным элементом и не должен использоваться как элемент уровня блока. Однако здесь пример (но JavaScript плюс стиль CSS: hover CSS будет намного опрятным), который работает в большинстве браузеров:

<td>
  <a href="http://example.com">
    <div style="height:100%;width:100%">
      hello world
    </div>
  </a>
</td>

PS: на самом деле опережающее изменение a в блочном элементе с использованием CSS как объясняется в другом решении в этом потоке. он не будет работать хорошо в IE6, хотя, но что нет новостей;)

Альтернативное (не рекомендованное) решение

Если ваш мир - это только Internet Explorer (редко, в настоящее время), вы можете нарушить стандарт HTML и написать это, он будет работать, как ожидалось, но будет сильно осужден и будет считаться нелогичным (вы еще не слышали это от меня). Любой другой браузер, чем IE, не будет отображать ссылку, но будет правильно отображать таблицу.

<table>
    <tr>
        <a href="http://example.com"><td  width="200">hello world</td></a>
    </tr>
</table>

Ответ 2

Используйте этот код:

<td>
  <a href="http://example.com">
      hello world
  </a>
</td>

Код CSS:

td a{width:100%;display:block;}

Ответ 3

Я бы рекомендовал использовать фактический элемент привязки и установить его как блок.

<div class="divBox">
    <a href="#">Link</a>
</div>

.divBox
{
    width: 300px;
    height: 100px;
}
.divBox a
{
    width: 100%;
    height: 100%;
    display: block;
}

Это установит привязку к тем же размерам родительского div.

Ответ 4

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

<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)

Ответ 5

Я хотел бы сделать весь td a гиперссылка. Я бы предпочел JavaScript. Возможно ли это?

Это невозможно без javascript. Кроме того, это не будет семантической разметкой. Вы должны использовать ссылку вместо этого, иначе это связано с привязкой onclick к <td> для перенаправления на другую страницу.

Ответ 6

Вы можете создать нужную таблицу, сохранить ее как изображение, а затем использовать карту изображения для создания ссылки (таким образом вы можете поместить коорды отверстия td, чтобы попасть в ссылку).