Таблица против Div - Добро, Зло и Гадкий - HTML - Front-End - Блог, веб-агентство Princi

1. Кто есть кто?
2. Стол, Гадкий
3. Див, Хороший
4. Див или Зло
5. Полезные ссылки
6. Оставить комментарий
7. [26] Отзывы
8. Рикардо Лопес
9. Родольфо Перейра
10. Эдно Критс
11. Христос
12. Иосиф Дионисио Бисек Рокко
13. Родольфо Перейра
14. Веллингтон В. Сантос
15. Alessandro
16. Луис Рикардо
17. Элиас Ф. Родригес
18. Родольфо Перейра
19. Флавио Кавальканте
20. Ренато Джун
21. Рафаэль де Соуза Дутра
22. Родольфо Перейра
23. Mariana
24. Cin
25. Родольфо Перейра
26. Рафаэль
27. Родольфо Перейра
28. Эдуардо
29. Родольфо Перейра
30. Nilson
31. Родольфо Перейра
32. Nilson

В настоящее время много говорят об отказе от структурирования сайта на основе Таблицы и преобразовании его в Div. Но вы знаете, зачем делать это преобразование структурирования сайта? Это, конечно, не западная борьба, но эта тема часто посещает веб-разработчиков.

Кто есть кто?

Прежде чем что-то сказать, давайте узнаем значение и назначение каждого в HTML-документе.

Таблица Тег <table> определяет таблицу в документе HTML. Он используется для отображения табличных данных в строках и столбцах. Тег <tr> определяет строку, а тег <td> определяет столбец таблицы. В таблице используются другие теги, например <thead>, <tfoot>, чтобы сделать ее более семантической. Div Тег <div> определяет разделение или раздел в документе HTML. Обычно используется для создания блоков элементов, размещения информации внутри макета, который отформатирован с помощью CSS. Тег <div> управляется CSS через идентификатор, класс или сам тег.

Стол, Гадкий

Давным-давно, в очень отдаленной сети ... или, может быть, не так далеко (не говоря уже о текущей), люди использовали тег <table> для упорядочивания элементов внутри HTML-страницы. Сайт был быстро создан с помощью визуальной части некоторых HTML-редакторов, таких как FrontPage или Dreamweaver, например, и не было необходимости проводить тестирование в нескольких браузерах, поскольку браузеры также интерпретировали тег <table>.

Однако эта скорость имеет свою цену: код сложного обслуживания. Сайт, структурированный с помощью тега <table>, потребляет больше трафика и становится запутанным для техобслуживания и поисковых систем .

Говорят, что когда сайт структурирован с помощью тега <table>, сайт совместим со всеми браузерами и что для структурирования сайта требуется гораздо меньше времени, чем для сайта с тегом <div> ... но так ли это?

«Сайт, который вы используете с помощью тега <div> за 5 часов, я сделаю это за 1 час с помощью тега <table>! Это быстро и легко поддерживать. Просто поместите другую таблицу в другую таблицу, которая решена! И если стол всплывает, я поставлю еще один стол, чтобы исправить другой ".

- Веб-мастер, который использует Таблицу после построения схемы сайта с 10 тысячами строк кода (и это понимает только он).

Див, Хороший

Сайт, структурированный с помощью тега <div>, получает семантику, простоту обслуживания, меньший размер страницы и улучшает индексацию для поисковых систем. Но сам факт тестирования во всех браузерах все же нарушает работу разработчиков.

Благодаря использованию тега <div> и CSS, термин «без таблиц» каждый день набирает силу в бразильской сети. Разработка сайта после стандарты, установленные W3C Вы делаете это легким для всех, независимо от того, какой браузер используется или какая особая потребность у посетителя, - приятное впечатление от посещения сайта.

Див или Зло

Тег <div> имеет не только хорошую, но и плохую сторону. Вы сегодня, желая перейти от Table к Div, - это что-то кропотливое, и это, к сожалению, связано с людьми, которые не знают интернета. А как?

Известно, что браузер Microsoft Internet Explorer 6 затрудняет этот переход, поскольку он не имеет хорошей совместимости с парой Div + CSS. И, как вы знаете, IE6 - это тот браузер, который уже установлен на компьютере того человека, который не знает компьютерных технологий и считает, что Интернет сводится к Orkut и электронной почте, так что вы думаете, что у этого человека будет работа по обновлению вашего браузера? К сожалению нет.

Даже сегодня, даже с выпуском Internet Explorer 8, большая часть людей имеет доступ к Интернету с помощью Internet Explorer 6 и 7, поэтому мы не можем расстроить опыт тех пользователей, которые используют старые браузеры, что делает невозможным для них навигацию и чтобы найти информацию, которую они ищут, но мы должны поощрять их обновлять свои браузеры, чтобы они имели более богатый и безопасный опыт просмотра.

"Черт, IE6! Вы не можете сделать это, используя тег <div> ... Я думаю, что я буду использовать таблицу здесь. Только один стол не повредит и никто не заметит ».

- Веб-мастер, который начал переходить из Таблицы в Див

Полезные ссылки

Ниже приведен список полезных ссылок для изучения HTML-тегов. Хорошего изучения и до следующей статьи!

Оставить комментарий

Мы хотим знать, что вы думаете об этом посте! Мы будем рады, если вы оставите нам комментарий :-)

Помните, что комментарии модерируются, а ссылки имеют значение rel = "nofollow". Поэтому, пожалуйста, не спамте ключевые слова, иначе ваш комментарий будет удален. Спасибо

[26] Отзывы

Рожерио Гомес Перейра

Я согласен с вами, Родольфо, в этом вопросе использования таблицы. Это широко используется и есть сложные места обслуживания. Сайт с множеством таблиц практически зашифрован (никто не понимает, как он монтируется), и его невозможно обслуживать.

Рикардо Лопес

IE большая проблема, годами так и не решенная, сайты должны взять на себя инициативу запретить браузер.

Родольфо Перейра

В ответ на Рикардо Лопес

Рикардо, я думаю, что IE6 - большая проблема, а IE7 - "средняя" проблема. IE8 не вызывает особых проблем, когда речь заходит о структурировании веб-сайта в Tableless, но он все еще находится ниже браузеров Firefox, Chrome и Opera.
Есть сайты, которые присоединились к кампаниям, пропагандирующим «смерть IE6», хе-хе ... и это то, чего хотят все разработчики!

Эдно Критс

Да ладно, я живу этим в своей повседневной жизни, потому что только вижу, если то, что я представляю, имеет качество и содержание, и я знаю, что я тоже поправлюсь, если вы всегда рассчитываете на поддержку Принчи, вы хороши, но ХОРОШИ, даже если они делают.
Спасибо и успехов,
Edno.

Христос

Убить браузер, которым 40-летние пользуются в своих старых компаниях? Лучше убивать эти корабли и уничтожать их, а не браузер, потому что они не изменится (а также выходить на улицу, убивая трудящихся, является преступлением и разводят цепи и идет против закона).
Даже сказав им, что если они будут использовать Firefox с плагином FasterFox, у них будет почти мгновенный доступ, они не поверят этому, даже если это правда, идеально сделать одну страницу для IE6, а другую для остальных, но это будет двойной стресс и работа или используйте фреймворки, которые обеспечивают хорошую совместимость с большинством браузеров, таких как JQuery (который иногда оставляет вас в руках) или серверный язык, для создания вашей страницы в соответствии с потребностями, такими как PHP, Java, Ruby и или Python ( что в случае использования любого из них будет гораздо выгоднее, чем создание страницы за страницей), однако есть много клиентов, которые заплатили за продукты без этой поддержки.
В большинстве случаев я предпочитаю создавать программы на Java для настольных компьютеров или мобильных устройств, которые создают конструктор html-страниц, поскольку я сделаю это для мобильного телефона или компьютера данного клиента, а не для огромного набора независимых браузеров.
Или выбросить все это в мусорное ведро и сделать IE6 (много работы, стрессов и нелепо загроможденных кодовых страниц).

Иосиф Дионисио Бисек Рокко

Я давно принял решение. Создавайте простые и красивые сайты для всех браузеров,
и делать сложные системы, используя максимум рамок, ограничивая их только в браузере.
И для этого я обычно использую IE8.
IE6 действительно согласен с тем, что это было очень важно для конкурентов, но IE8 выигрывает в некоторых деталях, по крайней мере, в моих проектах.
Кто использует IE6, понятия не имеет об Интернете, этот тип людей не заслуживает «хорошего опыта». Не нужно никого убивать, чтобы заставить всех использовать текущие браузеры, люди должны понимать, что вещи развиваются в области вычислений, и они должны следовать этой линии эволюции.
Если разработчики всегда дружат со старыми браузерами, у нас никогда не будет реального развития Интернета. Мы, являющиеся основой Интернета, если мы разовьемся до уровня, требующего большего количества браузеров, браузеры больше не будут просто инструментами, которые показывают тексты на экране с некоторыми нестандартными плагинами начала 21-го века, прикрепленными к контенту.

Родольфо Перейра

В ответ на Иосиф Дионисио Бисек Рокко

Джозеф, прежде всего, спасибо за комментарий!
Стратегия создания простого и красивого веб-сайта, чтобы у вас не было головной боли, когда дело доходит до проверки сайта в старых браузерах, является хорошей в зависимости от случая, так как вы можете в конечном итоге ограничить опыт тех, кто использует более современные браузеры, так как вы может предложить им лучший опыт, используя более продвинутые функции, однако, возможно, опыт для тех, кто использует старые браузеры, не очень хорош. Это то, что нужно тщательно изучить, прежде чем мы создадим веб-сайт, чтобы вы не предлагали неприятных впечатлений тем, кто использует старые браузеры, и в то же время не ограничивают опыт тех, кто использует текущие браузеры.
В системах Princi Web Agency, когда мы проводим обучение для клиента, мы уже обновили его и установили проверку, чтобы узнать, входит ли пользователь в систему со старым браузером или нет. Если он использует старый браузер, выдается предупреждение, чтобы он мог легко обновить ваш браузер и воспользоваться всеми функциями наших систем.
Эта практика предупреждения пользователя при просмотре определенной страницы со старым браузером будет использоваться в будущем на наших сайтах, чтобы «заставить» (а не «убить», хе-хе) пользователя обновить браузер, поскольку пользователь кто посещает сайт, может даже захотеть обновить ваш браузер, но, возможно, он не знает, что есть более новая его версия.

Веллингтон В. Сантос

Поздравляю с постом, довольно объяснительным, я просто нахожусь в этом переходе между и, несмотря на трудности в том, чтобы div'ы понимали и заставляли их работать в разных браузерах, мне интересно, где я был с головой, которую я не делал раньше. Во всяком случае, скорее, чем позже. Спасибо, обнимаю.

Alessandro

Отличный пост, спасибо!
Мне понравился текст.

Луис Рикардо

Ваша статья ставит под сомнение то, что я разрабатываю, но в моем случае это не сложные веб-страницы, а формы, на случай, если это приложение веб-базы данных.
У меня возникли некоторые трудности, в моем случае я просто хочу выровнять сетку данных и другие элементы управления, что вы посоветуете?
Один из них прост в использовании, и когда мне приходится размещать элементы в виде сетки данных рядом друг с другом, возникает определенная трудность, в некоторых ситуациях плавающая функция не работает или работает в одном браузере, а не в другом.
Я не веб-разработчик, да десктоп.
Если вы можете дать мне некоторую информацию из исследовательских источников, а более конкретно в отношении разработки веб-форм, я буду очень признателен.

Элиас Ф. Родригес

Я занимаюсь веб-разработкой в ​​течение некоторого времени, и я согласен частично. О создании макетов с помощью div гораздо сложнее.
Для императорской «уродливой и трудной в обслуживании таблицы» сайт, использующий таблицы, легче поддерживать, потому что мы можем контролировать, где начинается и заканчивается часть сайта и его положение. Я считаю, что сочетание Div и таблицы без лучшего варианта.

Родольфо Перейра

В ответ на Элиас Ф. Родригес

Элиас, спасибо за ваш комментарий!
Что касается использования таблиц для структурирования сайта, я считаю, что он имеет меньшую ремонтопригодность, потому что вы напишите больше строк кода, чем если бы вы структурировали сайт через div. Для отображения табличных данных нет ничего лучше, чем сама таблица.
Hug!

Флавио Кавальканте

Я использую только сайты сделанные без таблиц. Я думаю, что таблицы могут быть использованы внутри статей, в возможной структуре, для чего-то изолированного, кроме этого, я больше не вижу необходимости, потому что все возможно сделать с помощью divs и css.
Hug.

Ренато Джун

Я оставляю свой опыт в качестве разработчика в течение 20 лет, начиная с пре-рррср возраста! Я всегда решал свои плюсы с помощью таблиц, похоже, что веб-сайты, которые я продаю, сложные, быстрые и семантические, теперь с правилами w3c я делаю несколько в div + css без pro тоже, это слишком медленно, но выглядит великолепно! Что касается кодов, которые смешиваются с этим, читает игру вокруг таблицы или div, в конце концов, подходит круглый дизайн. Объятия.

Рафаэль де Соуза Дутра

Я не знаю, как это сделать, но я не знаю, как это сделать.

Родольфо Перейра

В ответ на Рафаэль де Соуза Дутра

У вас есть код, чтобы показать нам?

Mariana

Я люблю писать, я стал поклонником блога ... но хорошо, что Бразилия любила быстрые столики ... мы всегда в поисках более красивого и привычного интернета.

Cin

Привет, Родольфо, как ты?
Я прочитал вашу статью о div и таблице в блоге Princiweb, и однажды я был смущен. Вы говорите, что браузеры также интерпретируют тег таблицы, но чуть ниже вы говорите, что «эта скорость имеет цену: код трудного обслуживания и ограничения браузеров».
Если все браузеры интерпретируют этот тег, как может быть ограничение браузера?
Не могли бы вы объяснить это лучше?

Родольфо Перейра

В ответ на Cin

Привет, Син, хорошо, а с тобой?

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

Я обновил пост на основе вашего комментария, спасибо! : D

Рафаэль

В ответ на Родольфо Перейра

Привет, Родольфо, все хорошо?
Я должен настроить форму, я подумал, чтобы использовать div, потому что я должен оставить то же изображение ниже, но это кость, чтобы установить его ориентации на странице, но используя таблицы tbm, я не знаю, является ли это лучшим способом, где я бы увеличил размер столбцов и линии ... не могли бы вы взглянуть на эту модель и высказать свое мнение, пожалуйста?
http://i58.tinypic.com/2lkblad.jpg
Если вы не видите изображение, воспользуйтесь ссылкой:
http://www.guj.com.br/java/308793-layout-de-tela

Родольфо Перейра

В ответ на Рафаэль

Ну, видимо, вы поселились, верно?

Malz задержка хе-хе. Abs!

Эдуардо

Как насчет использования смеси с кадрами и div? Это лучше или дезорганизовано? Я нахожусь в начале своего курса по ИТ, и на данный момент я только разработал фрейм-сайты, мне понравился результат, как все работает, и совместимость, а также очень податлив и труден для ошибок. Я обычно использую рамку для заголовка, одну для меню и одну для тела сайта, где будут отображаться страницы. Если это сайт с постами в стиле блога, я использую div, который будет областью поста.

Родольфо Перейра

В ответ на Эдуардо

Хм, в данном случае вы описали не рекомендуется использовать фреймы.

Я рекомендую вам взглянуть на исходный код этого сайта. http://www.medicamenta.com.br/ дать изученный.

Abs!

Nilson

Что произойдет, если я смонтирую макет сайта внутри таблиц с помощью DREAMWEAVER CS6, а затем преобразую таблицы в AP DIVs?
Можно ли использовать этот метод для мобильного приложения?
Дело в том, что я СЛОЖНО В ИНТЕРНЕТЕ, и у меня все еще есть проблемы с CSS и т. Д., И они не являются сложными сайтами или приложениями, они очень простые
спасибо

Родольфо Перейра

В ответ на Nilson

Нильсон говорит,

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

Abs!

Nilson

В ответ на Родольфо Перейра

Dreamweaver делает это ... таблицы для приложения DiV ...

Похожие

Комментарии