Структура HTML-таблицы выравнивается

Ло здесь, могучие интернеты! Я кодирую электронные письма (ugh!), Поэтому, очевидно, это означает, что больше таблиц, чем я написал за десятилетие. Помимо того, что некоторые устаревшие свойства игнорируются, кажется, что браузеры также выравнивают структуру таблицы.Структура HTML-таблицы выравнивается

Итак, допустим, у меня есть these tables here. Первый выводит, как ожидалось, 2-колоночный макет. Второй - нет. Добавление tr и td элементов, содержащих внутренности ячейки, фактически нарушает компоновку.

Чтобы это произошло, проверьте полученный результат. Вы заметите, что вторая таблица становится кучей tr тегов. td, которые контролировали ширина:

<td width="264" valign="top"></td>

отображается как пустой элемент, вместо того, чтобы содержать своих детей tr и td теги.

Мой вопрос: кто-нибудь знает, почему это происходит?

EDIT: для справки, валидатор W3C жалуется на бродячие концевые теги, но они что-то закрывают должным образом. Этот HTML был автоматически сгенерирован из шаблона Pug, я не думаю, что он недействителен.

источник

2016-12-07 Anonymous

Простая ошибка - подготовить лицевой шар.

Вы забыли инициировать вложенный стол, иначе вы забыли поместить табличный стол на внутренние таблицы перед новым тегом TR.

Структура должна быть ТАБЛИЦА - TR - TD - TABLE - TR - TD - CONTENT при использовании вложенной таблицы.

Вы ранее имели: TABLE - TR - TD - TR - TD - CONTENT - что приводит к тому, что ваш код пытается исправить себя и перемещает TRs в допустимый формат, создавая странность, которую вы испытали.

Смотрите ниже скорректированного HTML:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
</head> 
<body> 
    <table width="600" cellpadding="0" cellspacing="24" border="0"> 
    <tr> 
     <td width="264" valign="top"> 
     <h3>Alles auf einen Blick</h3> 
     <p>Zu den Themen EU-Regulierung, Kostenkontrolle, Datenroaming oder Ländergruppen finden Sie wichtige Hinweise auf unseren Info-Seiten.</p> 
     <button>Jetzt informieren</button> 
     </td> 
     <td width="264" valign="top"> 
     <h3>Schnell zur Lösung</h3> 
     <p>Finden Sie jederzeit und unkompliziert den direkten Weg zur Lösung Ihres Anliegens. Unser Hilfe & Service Bereich ist die richtige Anlaufstelle.</p> 
     <button>Jetzt entdecken</button> 
     </td> 
    </tr> 
    </table> 

    <hr> 

    <table width="600" cellpadding="0" cellspacing="24" border="0"> 
    <tr> 
     <td width="264" valign="top"> 
     <table width="100%"> 
      <tr> 
      <td> 
      <h3>Alles auf einen Blick</h3> 
      </td> 
     </tr> 
     <tr> 
      <td> 
      <p>Zu den Themen EU-Regulierung, Kostenkontrolle, Datenroaming oder Ländergruppen finden Sie wichtige Hinweise auf unseren Info-Seiten.</p> 
      </td> 
     </tr> 
     <tr> 
      <td> 
      <button>Jetzt informieren</button> 
      </td> 
     </tr> 
      </table> 
     </td> 
     <td width="264" valign="top"> 
     <table width="100%"> 
      <tr> 
      <td> 
      <h3>Schnell zur Lösung</h3> 
      </td> 
     </tr> 
     <tr> 
      <td> 
      <p>Finden Sie jederzeit und unkompliziert den direkten Weg zur Lösung Ihres Anliegens. Unser Hilfe & Service Bereich ist die richtige Anlaufstelle.</p> 
      </td> 
     </tr> 
     <tr> 
      <td> 
      <button>Jetzt entdecken</button> 
      </td> 
     </tr> 
      </table> 
     </td> 
    </tr> 
    </table> 
</body> 
</html>

источник

2016-12-07 15:08:25 Gortonington

Таким образом, вы не можете иметь '' tr' внутри td' теги? Вам нужна дополнительная «таблица» в качестве контейнера? –

Да, это законно. Я добавил дополнительные теги 'table', и он работает. : Facepalm: –

Структура HTML-таблицы выравнивается

ответ

Смежные вопросы