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


Пользователь месяца
WGN WGN 1-й за Июль
Очков активности: 850 2 темы, 75 сообщений, 7 баллов репутации
Сайт: worldgamenews.com
ТОП самых активных за этот месяц
  • Фотография TimurR
    #1

    TimurR
    Очков активности: 273 3 темы, 17 сообщений, 7 баллов репутации

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

    WGN (worldgamenews.com)
    Очков активности: 64.5 Вне конкурса за определение пользователя месяца

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

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

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

    BlackLion
    Очков активности: 40.5 1 тема, 24 сообщения, 1 балл репутации

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

    Vmir
    Очков активности: 25.5 Вне конкурса за определение пользователя месяца

  • Фотография Napoleon-007
    #6

    Napoleon-007
    Очков активности: 21 0 тем, 14 сообщений, 1 балл репутации

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

    Ixman (o5cat.ru)
    Очков активности: 21 0 тем, 7 сообщений, 2 балла репутации

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

    alekswebart
    Очков активности: 19.5 1 тема, 10 сообщений, 1 балл репутации

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

    r0mZet (rz-style.ru)
    Очков активности: 18 2 темы, 6 сообщений, 1 балл репутации

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

    profi (1informer.com)
    Очков активности: 12 0 тем, 8 сообщений, 1 балл репутации

  • Показать весь ТОП 10

Kwork.ru - услуги фрилансеров от 500 руб.

Поддержите форум! =)
Апдейты
  • Яндекс тИЦ: 19.11.2017
  • Яндекс выдача: 17.08.2018
Топ 5 участников по репутации


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

#1 ShowPrint

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

Отправлено 27 September 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
  • 2652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Табличная и блочная вёрстка.
  2. Быстрая верстка страниц сайта с помощью HTML-KickStart
  3. В помощь web мастеру
  4. Как подключить таблицу стилей в HTML 5
  5. Html верстка на конкретном примере

#2 HelloDolly

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

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

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


  • 0

#3 ShowPrint

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

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

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

 

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

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


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


#4 HelloDolly

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

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

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

 

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

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


  • 0

#5 ShowPrint

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

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

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

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

 

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

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


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


#6 fedornabilkin

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

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

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


  • 0

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



#7 ShowPrint

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

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

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

 

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

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


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




Похожие темы

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

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