Вложение Div для создания кнопки вокруг Tel: Link?

Question

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

         <a href=”tel:+18888888888"> 
              <div> 
               <table> 
                <tbody> 
                 <tr> 
                  <td rowspan="2"><img id="phone" src="/phoneimg.png" alt="xx"></td> 
                  <td rowspan="2">Tap To Call NOW!&#9;888.888.8888</td> 
                 </tr> 
                </tbody> 
               </table> 
              </div> 
             </a> 

Когда я загрузить HTML файл на мой хозяин я получаю 404 ошибку, когда я коснитесь кнопка.

Когда я удаляю div, а закрывающий тег находится прямо за тегом href = "tel: +18888888888" (т. Е. Он имеет правильный синтаксис без контейнера div перед закрывающим тегом), он работает, но просто не декорирован .?. ссылка

Любой способ сделать это

Спасибо

Answer 1

Исправленный код:

<div> 
    <table> 
     <tbody> 
      <tr> 
       <td rowspan="2"><a href="tel:+18888888888"><img id="phone" src="/phoneimg.png" alt="xx"></a></td> 
       <td rowspan="2"><a href="tel:+18888888888">Tap To Call NOW!&#9;888.888.8888</a></td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

Answer 2

Как dfionov правильно сказал, вы не можете в блокировать элементы блока внутри встроенных элементов. Якоря (<a>) являются исключением из правила в HTML5, как explained in another answer.

Я хотел бы также упомянуть, что для вашего прецедента следует избегать таблиц. Они предназначены для отображения табличных данных, не выравнивающих изображение.

Существует несколько способов сделать это с помощью CSS, я бы предложил использовать inline-block, потому что он работает со всеми современными браузерами и легче понять, чем многие из альтернатив.

<a href="tel:+18888888888"> 
    <img id="phone" src="/phoneimg.png" alt="xx"> 
    <span>Tap To Call NOW!&#9;888.888.8888</span> 
</a>