Перейти к содержимому



Вёрстка таблиц в html5 - смена стандартов

#1 ShowPrint

ShowPrint
  • Пользователь PRO
  • 2 871 сообщений
  • Репутация: 760
0

Отправлено 27 Сентябрь 2017 - 22:03

Верстаю страницу с таблицей, решил сделать по феншую и помимо стандартных <tr>, <td> использовать "полный набор" тегов.

Получается следующая структура таблиц:

Спойлер
Вроде как всем манускриптам переводным (в аглицком я слаб) - всё должно быть гуд, но не тут то было...  :(

 

Загоняю свёрстанную страницу в html5-валидатор и вижу ошибку:

Спойлер

Угадал все буквы и даже смог прочесть слова, но ещё бы понять о чём они  :)

 

По прочтению написанного валидатором появилась одна мыслишка и решил экспериментнуть - убрал <tfoot>, переместив его в тело таблицы:

Спойлер
Загнал в валидатор, результат: нет ошибок.  ^_^

 

Но я раньше уже шнакоддил скрипт который "разбирает" мою таблицу на части выискивая содержимое с том числе и tfoot...  :wacko:

Править скрипт не очень-то хотелось и я решил провести ещё один эксперимент: вопреки усвоенному ранее из многочисленных мануалов

Хотя тег <tfoot> в исходном коде должен быть определен до тега <tbody>, браузеры отображают его в самом низу таблицы.

источник >>>

решил поставить tfoot в "по-русски" правильное место, то есть после thead и tbody

Спойлер
Сказать что я был удивлён обнаружив отсутствие ошибок валидатора - не сказать ничего  :o

 

И сел я писать этот топик намереваясь задать вопрос "что за на..фиг", но решил заглянуть в обновлённую версию матчасти (webref-ru).

Вот тут и стало всё на свои места, как и следовало ожидать - "сам дурак":

Синтаксис

В HTML4 элемент <tfoot> должен располагаться перед элементом <tbody>, но после <thead>, если они присутствуют, при этом содержимое <tfoot> отображается внизу таблицы.

В HTML5 <tfoot> идёт после всех элементов <caption>, <colgroup>, <thead>, <tbody>.

источник >>>

Вот такое вот "кино, вино и домино"...

 

Собственно топик для тех, кто привыкнув к традиционной вёрстке в html4 переползает на html5: следует изучать матчасть не только по новым тегам, но и пробежаться по "старым знакомым" - подводные камни могут возникнуть и в них  ;)


 

 

  • 2
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Как подключить таблицу стилей в HTML 5
  2. Html верстка на конкретном примере
  3. [Урок 4] Часть 1. Верстка макета HTML5/CSS3
  4. HTML5 и непарные теги
  5. Как уменньшить ширину аудиоплеера на HTML5

#2 HelloDolly

HelloDolly
  • Пользователь
  • 12 сообщений
  • Репутация: 0

Отправлено 13 Февраль 2018 - 17:44

Кто-то ещё верстает в html4 ? Если не обращать внимание на валидатор, то эти теги и не понадобятся.


  • 0

#3 ShowPrint

ShowPrint
    Topic Starter
  • Пользователь PRO
  • 2 871 сообщений
  • Репутация: 760

Отправлено 13 Февраль 2018 - 17:56

@HelloDolly, встречаются и такие, кроме того есть и любители strict-а.

 

Если не обращать внимание на валидатор
По большому счёту "да", а если не обращать внимания на людей, то и по улицам летом можно голышом ходить  :D

Разница в подходе: кто-то старается делать "по уму", а кто-то "да ладно, и так едет"  :)


  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#4 HelloDolly

HelloDolly
  • Пользователь
  • 12 сообщений
  • Репутация: 0

Отправлено 13 Февраль 2018 - 18:00

Разница в подходе: кто-то старается делать "по уму", а кто-то "да ладно, и так едет"
 

 

С таким подходом нужно начинать со спецификации, а только потом писать html  :)

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


  • 0

#5 ShowPrint

ShowPrint
    Topic Starter
  • Пользователь PRO
  • 2 871 сообщений
  • Репутация: 760

Отправлено 13 Февраль 2018 - 18:06

Подавляющее большинство
в думе плохо знают русский язык

, но это не мешает быть им в топе

 

Кто-то делает как все, а кто-то старается делать правильно.

Как говорил выше - "вопрос в подходе", мне более симпатичны вторые, хотя выбор - личное дело каждого  :)


  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#6 fedornabilkin

fedornabilkin
  • Модератор
  • 1 082 сообщений
  • Репутация: 165

Отправлено 14 Февраль 2018 - 09:35

Когда верстал в html4, то использовал только tr td, а про tbody и ему подобные узнал только в html5. Всегда думал, что футер после боди и это вроде бы логично.


  • 0

Надо обсудить предложение. А тут знакосчиталка считает знаки. Про Yii2 написано.



#7 ShowPrint

ShowPrint
    Topic Starter
  • Пользователь PRO
  • 2 871 сообщений
  • Репутация: 760

Отправлено 14 Февраль 2018 - 10:19

Всегда думал, что футер после боди и это вроде бы логично
Согласен, поэтому всегда недоумевал кто придумал размещать футер таблицы перед самой таблицей (в html4) и исходя из каких соображений  :)  

 

использовал только tr td
Я тоже - в те времена когда не было seo и ранжирование зависело только от плотности ключей  :)

Со временем начал активное использование caption, thead, tbody, tfooter полагая что ключ в thead и caption может принести чуть большую пользу - как известно "курочка по зёрнышку"  ;)


  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/



Оформление форума – IPBSkins.ru