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



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

#1 ShowPrint
ShowPrint
  • Пользователь PRO
  • 3 371 сообщений
  • Репутация: 975
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 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#2 HelloDolly
HelloDolly
  • Неактивные
  • 12 сообщений
  • Репутация: 0

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

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


  • 0

#3 ShowPrint
ShowPrint
    Topic Starter
  • Пользователь PRO
  • 3 371 сообщений
  • Репутация: 975

Отправлено 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
  • 3 371 сообщений
  • Репутация: 975

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

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

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

 

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

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


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


#6 fedornabilkin
fedornabilkin
  • Модератор
  • 1 181 сообщений
  • Репутация: 203

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

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


  • 0

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



#7 ShowPrint
ShowPrint
    Topic Starter
  • Пользователь PRO
  • 3 371 сообщений
  • Репутация: 975

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

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

 

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

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


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




Похожие темы
  Название темы Автор Статистика Последнее сообщение

Пользователь месяца
NataliaAntalia NataliaAntalia 1-й за Октябрь
Очков активности: 480 2 темы, 58 сообщений, 5 баллов репутации
Сайт: zdorovemedicina.ru
ТОП самых активных за этот месяц
  • Фотография ShowPrint
    #1

    ShowPrint (ShowPrint.ru)
    Очков активности: 297 0 тем, 18 сообщений, 11 баллов репутации

  • Фотография BLIK
    #2

    BLIK
    Очков активности: 157.5 0 тем, 15 сообщений, 7 баллов репутации

  • Фотография NataliaAntalia
    #3

    NataliaAntalia (zdorovemedicina.ru)
    Очков активности: 132 Вне конкурса за определение пользователя месяца

  • Фотография Megoydagi
    #4

    Megoydagi (24ho.ru)
    Очков активности: 130.5 5 тем, 14 сообщений, 3 балла репутации

  • Фотография Vmir
    #5

    Vmir
    Очков активности: 126 2 темы, 15 сообщений, 4 балла репутации

  • Фотография Totti
    #6

    Totti
    Очков активности: 126 0 тем, 14 сообщений, 6 баллов репутации

  • Фотография MattCutts
    #7

    MattCutts (dmitrylee.ru)
    Очков активности: 99 Вне конкурса за определение пользователя месяца

  • Фотография miketomlin
    #8

    miketomlin
    Очков активности: 45 0 тем, 10 сообщений, 3 балла репутации

  • Фотография TimurR
    #9

    TimurR
    Очков активности: 39 3 темы, 4 сообщения, 2 балла репутации

  • Фотография kolver
    #10

    kolver
    Очков активности: 21 3 темы, 5 сообщений, 1 балл репутации

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 29.10.2019
  • Яндекс выдача: 14.11.2019
Топ 5 участников по репутации

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