链接到带有文本和图像的整个表格单元格

Question

我无法在同一单元格中的图像和文本中具有链接。单元格中的文本应居中并向右或向左对齐（查看图片）。

这是我现在拥有的http://jsfiddle.net/7aHDR/787/：

<table>
   <tr>
   <td >      
     <a href="http://jsfiddle.net/7aHDR/783/">TEXT HERE
     <img src="https://www.w3schools.com/tags/logo_w3s.gif" alt="description here" />
     </a>
   </td>
     <td>
       <a href="http://jsfiddle.net/7aHDR/783/">TEXT HERE
         <img src="https://www.w3schools.com/tags/logo_w3s.gif" alt="description here" />
       </a>
     </td>

   </tr>
   <tr>
      <td >      
     <a href="http://jsfiddle.net/7aHDR/783/">TEXT HERE
     <img src="https://www.w3schools.com/tags/logo_w3s.gif" alt="description here" />
     </a>
   </td>
     <td>
       <a href="http://jsfiddle.net/7aHDR/783/">TEXT HERE
         <img src="https://www.w3schools.com/tags/logo_w3s.gif" alt="description here" />
       </a>
     </td>
   </tr>
</table>

我也尝试通过使用图像作为单元格中的背景图像来实现此目的，但是后来我只能在文本中拥有链接，而在图像中却没有。示例：

<table>
   <tr>
     <td width="100px" height="100px" BACKGROUND="https://www.w3schools.com/tags/logo_w3s.gif" VALIGN="center"  >
       <a href="/http://jsfiddle.net/7aHDR/783/">TEXT 
       </a>
     </td>
     <td width="100px" height="100px" BACKGROUND="https://www.w3schools.com/tags/logo_w3s.gif" VALIGN="center"  >
       
       <a href="/http://jsfiddle.net/7aHDR/783/">TEXT 
       </a>
     </td>

   </tr>
      <tr>

     <td width="100px" height="100px" BACKGROUND="https://www.w3schools.com/tags/logo_w3s.gif" VALIGN="center"  >
       
       <a href="/http://jsfiddle.net/7aHDR/783/">TEXT 
       </a>
     </td>
     <td width="100px" height="100px" BACKGROUND="https://www.w3schools.com/tags/logo_w3s.gif" VALIGN="center"  >
       
       <a href="/http://jsfiddle.net/7aHDR/783/">TEXT 
       </a>
     </td>
   </tr>
</table>

Answer 1

您可以使用排名CSS来实现这一目标。检查以下修改，在其中我用一些CSS将您的文本包裹在<span>中。

td a{
  display:block;
  position: relative;
  text-align: left;
  line-height:1px;
}
span.text-link-left{
    position: absolute;
    color: #002945;
    display:block;
    top: 50%;
    left: 8%;
} 
    span.text-link-right{
    position: absolute;
    color: #002945;
    display:block;
    top: 50%;
    right: 8%;
    text-align: right;
} 

<table>
   <tr>
   <td >      
     <a href="http://jsfiddle.net/7aHDR/783/">
        <span class="text-link-left">TEXT HERE</span>
        <img src="https://www.w3schools.com/tags/logo_w3s.gif" alt="description here" />
     </a>
   </td>
     <td>
       <a href="http://jsfiddle.net/7aHDR/783/">
          <span class="text-link-right">TEXT HERE</span>
          <img src="https://www.w3schools.com/tags/logo_w3s.gif" alt="description here" />
       </a>
     </td>

   </tr>
   <tr>
      <td >      
     <a href="http://jsfiddle.net/7aHDR/783/">
        <span class="text-link-left">TEXT HERE</span>
        <img src="https://www.w3schools.com/tags/logo_w3s.gif" alt="description here" />
     </a>
   </td>
     <td>
       <a href="http://jsfiddle.net/7aHDR/783/">
          <span class="text-link-right">TEXT HERE</span>
          <img src="https://www.w3schools.com/tags/logo_w3s.gif" alt="description here" />
       </a>
     </td>
   </tr>
</table>

希望这会对您有所帮助。

Answer 2

这是我的解决方案，请检查下面的实时示例：

a {
  color: red;
}

<table>
  <tr>
    <td width="100px" height="100px" BACKGROUND="https://www.w3schools.com/tags/logo_w3s.gif" VALIGN="MIDDLE" ALIGN="LEFT">
      <a href="/http://jsfiddle.net/7aHDR/783/">TEXT0 
       </a>
    </td>
    <td width="100px" height="100px" BACKGROUND="https://www.w3schools.com/tags/logo_w3s.gif" VALIGN="MIDDLE" ALIGN="RIGHT">

      <a href="/http://jsfiddle.net/7aHDR/783/">TEXT1 
       </a>
    </td>

  </tr>
  <tr>

    <td width="100px" height="100px" BACKGROUND="https://www.w3schools.com/tags/logo_w3s.gif" VALIGN="MIDDLE" ALIGN="LEFT">

      <a href="/http://jsfiddle.net/7aHDR/783/">TEXT2 
       </a>
    </td>
    <td width="100px" height="100px" BACKGROUND="https://www.w3schools.com/tags/logo_w3s.gif" VALIGN="MIDDLE" ALIGN="RIGHT">

      <a href="/http://jsfiddle.net/7aHDR/783/">TEXT3
       </a>
    </td>
  </tr>
</table>

Answer 3

您可以像这样使用CSS

td:nth-child(2n){text-align:right;}

或

td:nth-child(2n) a{float:right;}

您可以签入https://www.w3schools.com/CSSref/sel_nth-child.asp

td:nth-child(2n){
  text-align:right;
}

<table>
   <tr>
     <td width="100px" height="100px" BACKGROUND="https://www.w3schools.com/tags/logo_w3s.gif" VALIGN="center"  >
       <a href="/http://jsfiddle.net/7aHDR/783/">TEXT 
       </a>
     </td>
     <td width="100px" height="100px" BACKGROUND="https://www.w3schools.com/tags/logo_w3s.gif" VALIGN="center"  >
       
       <a href="/http://jsfiddle.net/7aHDR/783/">TEXT 
       </a>
     </td>

   </tr>
      <tr>

     <td width="100px" height="100px" BACKGROUND="https://www.w3schools.com/tags/logo_w3s.gif" VALIGN="center"  >
       
       <a href="/http://jsfiddle.net/7aHDR/783/">TEXT 
       </a>
     </td>
     <td width="100px" height="100px" BACKGROUND="https://www.w3schools.com/tags/logo_w3s.gif" VALIGN="center"  >
       
       <a href="/http://jsfiddle.net/7aHDR/783/">TEXT 
       </a>
     </td>
   </tr>
</table>