Как центрировать столбцы XHTML (и / или HTML4) TABLE по группам?

Как выровнять все столбцы по colgroup? Это работает с colspan?

пример

Этот HTML-код был протестирован с Firefox и Chrome, но ни один браузер не обновил центр для всех ожидаемых столбцов.

  <table border="1" width="100%">
    <colgroup>
      <col style="text-align:center;background-color:red"/>
      <col align="center" valign="bottom" style="background-color:blue"/>
      <col align="center" valign="top" style="background-color:yellow"/>
    </colgroup>
    <tr>
      <th>ISBN</th>
      <th>Title</th>
      <th>Price</th>
    </tr>
    <tr>
      <td>3476896</td>
      <td>My first HTML</td>
      <td align="center">$53</td>
    </tr>
    <tr>
      <td><big>5869207</big></td>
      <td>My first CSS</td>
      <td><small>$49</small></td>
    </tr>
  </table>

Используйте этот пример (скопируйте / вставьте) на w3schools.com/tags.

PS: что не так с align а также valign атрибуты? Стиль (с помощью выравнивания текста) также не отвечает.

РЕДАКТИРОВАТЬ

Как я уже сказал выше, мне нужно решение "по colgroup". Это также может быть colgroup или же col теги с style атрибут".

Мою систему шаблонов нужно использовать colgroup (!), не является действительным решением без colgroup, Моей системе не требуется совместимость с HTML5, она использует что-то вроде "модуля XHTML" ( см., Например, DTD).

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

  • Html устарела?: не то же самое, потому что моя проблема связана с XHTML, а не с HTML5 (это не XML, а "план будущего стандарта").
Источник

4 ответа

Решение

Ну, спасибо за все ответы и подсказки. Мой вывод, о colgroup, является

  1. HTML должен соответствовать стандарту (XHTML1.0, XHTML1.1 или HTML4.X);

  2. ... но только один браузер ( Opera) соответствует стандарту.
    (У MS-IE нет "стандартной совместимой" традиции, мы можем игнорировать удивительный случай IE7)

" Как центрировать столбцы по colgroup? ": Следуя инструкциям по стандартам... Итак, мой HTML-код (при введении этого вопроса) был всегда прав! Моей ошибкой было желание увидеть это в любом веб-браузере!

Вот некоторые "правильные вопросы" (примеры):

  • Почему другие браузеры не реализовали colgroup стандартное поведение? На ответ @ns47731 мы видим некоторые подсказки. Возможно, разработчик веб-браузера ожидает HTML5, а не XHTML2. Смотрите также @Alohci комментарий ниже.

  • Почему предложения HTML5 и XHTML2 расходятся по colgroup ? Никаких подсказок при ответах... Мое предположение: XHTML2 и HTML5 не будут на 100% совместимы.

  • Могу ли я поговорить с моим "разработчиком системы шаблонов" (разработчиком XSLT), чтобы добавить эту "стандартную совместимую функцию XHTML1"?:-) Пожалуйста, помогите мне в лобби для PMC Article Previewer.

Источник

Если вы посмотрите на http://www.w3schools.com/tags/tag_colgroup.asp то увидите, что этот тег практически не используется с html5. Вполне вероятно, что ваши выравнивания не работают, потому что ваш тип документа установлен на HTML5. На практике было бы нецелесообразно использовать тег, выходящий за дверь, но если вам нужно его использовать, попробуйте установить тип документа html 4, в противном случае я бы порекомендовал то, что сказал Kontakt, и использовал селектор CSS:nth-child.

Изменить: я посмотрел на это дальше и сделал несколько тестов. Установить тип документа

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Затем запустите его в IE7. Вы увидите, что это работает! Кажется, что многие браузеры не поддерживают его, даже если ваш тип документа установлен ниже 4. Однако good'ol IE7 по-прежнему отображает его. Все, что можно сказать, это то, что это устаревший тег, который не работает должным образом, потому что он давно не поддерживается.

Источник

Почему бы не использовать:nth-child(x) для элементов td?

Добавьте следующий код в ваш пример в разделе HEAD:

<style type='text/css'>
 tr td:nth-child(3) {
  text-align:center;
 }
</style>

и увидеть изменения в вашем третьем столбце.

Источник 
 <table border="1" width="100%">
 <colgroup>
      <col style="text-align:center;background-color:red"/>
      <col align="center" valign="bottom" style="background-color:blue"/>
      <col align="center" valign="top" style="background-color:yellow"/>
 </colgroup>
    <tr>
      <th>ISBN</th>
      <th>Title</th>
      <th>Price</th>
    </tr>
    <tr>
      <th>3476896</th>
      <th>My first HTML</th>
      <th>$53</th>
    </tr>
    <tr>
      <th><big>5869207</big></th>
      <th>My first CSS</th>
      <th><small>$49</small></th>
    </tr>
  </table>

Это, по крайней мере, центрирует ваш текст в ячейках, но, как и ns47731, это устаревший тег, поэтому не стоит ожидать слишком многого.

Источник
Другие вопросы по тегам