Ширина столбца таблицы с фиксированным макетом таблицы — col vs th

  • Автор темы МистерБин123
  • 56
  • Обновлено
  • 14, May 2024
  • #1
Мне всегда было интересно, есть ли какая-либо разница между использованием col или th для установки ширины столбца, когда для макета таблицы установлено фиксированное значение.

HTML:
 
table {

table-layout: fixed;

width: 100%;
}

th {

width: 33%;
}
Код (разметка): CSS (col): http://codepen.io/tomasz86/pen/OXpPqK

  table { table-layout: fixed; width: 100%; } col { width: 33%; } 
Код (разметка): CSS(th): http://codepen.io/tomasz86/pen/YWZPMd

  <table> <col> <col> <col> <thead> <tr> <th></th> <th></th> <th></th> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td></td> </tr> </tbody> </table> 
Код (разметка): Есть ли между ними разница? На первый взгляд кажется, что его нет... может быть, при использовании colspan?

МистерБин123


Рег
12 Feb, 2015

Тем
1

Постов
1

Баллов
11
  • 28, May 2024
  • #2
Ну, во-первых, COL принадлежит тегу «colgroup». Вы не просто бросаете их вслепую. (хотя спецификация меняется каждые пять чертовых минут — я начинаю говорить «спасибо W3C», как правые фанаты говорят «Спасибо, Обама») Во-вторых, устаревший IE не будет применять к столбцам ничего, что вы указываете в столбце для ширины или стиля, если вы не используете атрибуты.

Хуже того, IE БУДЕТ применять CSS, примененный к col, ко всем элементам, но Nyetscape.

извините, Firefox не будет.

Хотите увидеть, почему FF отстой за столами, посмотрите «Bugzilla 915». Ошибка в гекконе, настолько старая, что если бы это был человек, заниматься с ним сладкой-сладкой любовью было бы законно во всех 50 штатах.

Способ «открытого исходного кода» ДЕЙСТВИТЕЛЬНО исправляет ошибки (то есть только если это что-то кричащее или горячее и модное) Я не планирую решать эту проблему, пока он не станет достаточно взрослым, чтобы иметь право на социальное обеспечение. Точно так же, как и все остальные проклятые ошибки в реализации HTML 4 в Gecko — вот почему меня разозлило то, что они погружались в горячее и модное дерьмо HTML 5, когда у них даже 4-х не работало правильно! Честно говоря, и это только мое мнение, COL и COLGROUP, вероятно, должны пойти по пути дронта.

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

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

Тем не менее, атрибуты CHAR и CHAROFF чертовски удобны и не имеют рабочего эквивалента CSS.

есть причина, по которой они остались в HTML 4 Strict, хотя теперь в версии 5 говорится, что вместо них нужно использовать CSS.

и это типа "КАК?"

Но опять же, кроссбраузерная реализация COL действительно неудачна.

Большой вопрос, который я хотел бы задать, заключается в том, «какой способ использует меньше разметки при правильном формировании» - правильное формирование означает использование ВСЕХ тегов, которые вы ДОЛЖНЫ использовать.

В этом случае это легко: если у вас есть THEAD, нацельтесь на его клетки.

Если у него нет головы, нацельтесь на клетки тела.

Не тратьте лишнюю наценку ни на что. Но если вам нужно выравнивание символов, что ж... потребуется меньше кода, чтобы указать это один раз на COL, чем на каждом чертовом TD.
 

SlavaMarkov


Рег
01 Nov, 2013

Тем
1

Постов
3

Баллов
13
  • 13, Jun 2024
  • #3
Спасибо за подробное объяснение. Мне нужно только установить ширину, и раньше я использовал col, но позже понял, что того же результата можно добиться, просто применив его к th. В этом случае я просто продолжу использовать th и вообще не буду использовать col.
 

-._.-


Рег
01 Jan, 2011

Тем
1

Постов
2

Баллов
12
Тем
49554
Комментарии
57426
Опыт
552966

Интересно