Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-03-10

1 <ul><li><a>Что такое таблица</a></li>

2 <li><a>Сферы применения</a></li>

3 <li><a>Семантические теги</a></li>

4 <li><a>Структурные теги</a><ul><li><a>Table</a></li>

5 <li><a>Tr</a></li>

6 <li><a>Td</a></li>

7 <li><a>Th</a></li>

8 </ul></li>

9 <li><a>Логическая группировка</a><ul><li><a>Thead</a></li>

10 <li><a>Tbody</a></li>

11 <li><a>Tfoot</a></li>

12 <li><a>Caption</a></li>

13 </ul></li>

14 <li><a>Атрибуты</a></li>

15 <li><a>Советы и рекомендации</a></li>

16 </ul><p>HTML - это стандартизированный язык гипертекстовой разметки документов для просмотра веб-страниц в браузерах. Средство создания интернет-приложений на основании тегов и скриптов. Браузеры получают HTML-документы от серверов по протоколам HTTP/HTTPS или открывают их с локального диска. После этого происходит интерпретация кода в графический интерфейс для дальнейшего отображения на дисплее устройства.</p>

17 <p>Упомянутый язык используется для программирования и верстки клиент-серверных моделей и браузерного контента. Далее предстоит выяснить, как создать таблицу в HTML. А еще - для чего используется соответствующий объект, какие теги за него отвечают. Предложенная информация ориентирована в большей степени на тех, кто уже имел дело с гипертекстовым языком. Но и новичкам она тоже может пригодиться.</p>

18 <h2>Что такое таблица</h2>

19 <p>Таблица в широком понимании - своеобразный способ структурирования данных за счет распределения по строкам и столбцам. HTML-таблица не имеет никаких отличий от "обычных" таблиц, используемых в учебе, работе и повседневности.</p>

20 <p>Единственное, чем она выделяется - средствами для создания и редактирования, а также визуализации. Вместо привычный Word, Excel и Numbers предстоит пользоваться HTML и CSS.</p>

21 <p>Раньше рассматриваемый элемент использовался для верстки веб-страниц. Подобная концепция не обеспечивает адаптивность сервисов и гибкость структур. Современные технологии исключают верстку сайтов при помощи таблиц.</p>

22 <p>HTML table упорядочивает и выводит на экран данные при помощи строк и столбцов. Таблицы формируются из ячеек, которые образуются на пересечении строк и столбцов имеющейся информационной базы.</p>

23 <p>Ячейки могут включать в себя любые HTML-компоненты:</p>

24 <ul><li>заголовки;</li>

25 <li>списки;</li>

26 <li>текст;</li>

27 <li>изображения;</li>

28 <li>элементы форм;</li>

29 <li>иные tables.</li>

30 </ul><p>Каждая table может получить связанный с ней заголовок. Он располагается после или перед упомянутым объектом. Для всех табличных компонентов поддерживаются глобальные и собственные атрибуты.</p>

31 <h2>Сферы применения</h2>

32 <p>Воспользоваться tables-HTML можно на любом сайте. Везде, где необходимо структурировать информацию и отобразить ее в понятной пользователю форме. Вот примеры:</p>

33 <ul><li>расписания занятий и вылетов;</li>

34 <li>валютные курсы;</li>

35 <li>сравнение продукции;</li>

36 <li>информация о комплектации или характеристиках чего-либо.</li>

37 </ul><p>Создание таблицы в HTML или CSS - достаточно простой процесс. Главное разобраться в возможных вариантах и хорошо продумать структуру изучаемого объекта на странице.</p>

38 <h2>Семантические теги</h2>

39 <p>Какие теги задают таблицу? Для формирования tables в HTML используют следующие семантические теги:</p>

40 <ul><li>table;</li>

41 <li>thread;</li>

42 <li>tbody;</li>

43 <li>tfoot;</li>

44 <li>th;</li>

45 <li>tr;</li>

46 <li>td.</li>

47 </ul><p>Далее каждый предложенный вариант будет изучен более подробно. Все это поможет лучше разобраться в web программировании и создании табличных объектов на страницах.</p>

48 <h2>Структурные теги</h2>

49 <p>Структура таблицы HTML формируется за счет определенных "маркеров". Для этого используются определенные теги. Чтобы лучше понять принцип их работы, далее будет создаваться табличный объект с более детальным изучением.</p>

50 <h3>Table</h3>

51 <p>Tr и td важны, но начать погружение в рассматриваемую тему необходимо с другой команды. Речь идет о < table >. Это контейнер, внутри которого будут располагаться все остальные табличные компоненты. С него начинается весь дальнейший процесс "верстки" и им же заканчивается. Если в коде встречается table, это значит, что далее будет публиковаться соответствующий объект.</p>

52 <p>Table - парный тег. Внутри него будут размещаться строки и ячейки. Выше - наглядный пример создания рассматриваемого объекта. На данный момент он пуст.</p>

53 <h3>Tr</h3>

54 <p>Любой табличный объект включает в себя в первую очередь строки. Для их появления используется tr. Это - еще один парный элемент. Tr пишется столько раз, сколько он должен появиться в table-объекте.</p>

55 <p>Tr - это "table row", что в переводе с английского языка значит "ряд таблицы".</p>

56 <h3>Td</h3>

57 <p>Задумываясь над тегами для создания веб-таблицы, ограничиваться только tr нельзя. Ранее предложенные "маркеры" использовались для формирования структуры изучаемого объекта. С данными они не имели непосредственной связи.</p>

58 <p>За заполнение отвечают ячейки. Для их появления на веб-странице используется тег td. Он пишется только внутри tr. Повторять td необходимо столько раз, сколько требуется нарисовать ячеек в табличном объекте.</p>

59 <p>Ячейки формируют из себя столбцы. Для них в HTML отсутствуют специальные теги. В теории можно сделать ячейку без tr. Тогда они будут выстраиваться на экране в одну строчку. Чтобы новые ячейки были перенесены ниже, используется тэг tr.</p>

60 <p>Td - это "table data" или "данные таблицы". Вот результат обработки HTML-документа по предложенному шаблону:</p>

61 <p>По смыслу уже понятно, с чем предстоит иметь дело. Для более корректного и удобного для восприятия отображения информации рекомендуется добавить подписи для колонок. Это делается через tr и td:</p>

62 <p>Все части таблицы будут сливаться. Подписи колонок никак не выделятся. Это простая HTML-table. Но ее можно доработать для более удобного восприятия с сайта.</p>

63 <h3>Th</h3>

64 <p>Td и tr - "маркеры", при помощи которых разработчики смогут создать табличный элемент на странице. Для подписи ячеек рекомендуется воспользоваться th. Этот тег создан специально для заголовков ячеек или строк.</p>

65 <p>Th, как table, td и tr - парный элемент. К ячейкам, которые обернуты этим "маркером", применяются дефолтные стили CSS. Текст внутри становится жирным, а также выравнивается по центру ячейки. Такой подход позволяет быстро выделять заголовок таблицы от непосредственной информации в "базе".</p>

66 <p>Th - это "table header" или "заголовок таблицы". Выше - результат применения соответствующего "маркера".</p>

67 <h2>Логическая группировка</h2>

68 <p>Таблицы с tr и td выглядят элементарно. С их помощью может быть сделана простая таблица для отображения на веб-странице. Верстать можно еще и за счет тегов логической группировки. Они выполняют совсем другие функции, нежели td и tr. Сюда относят:</p>

69 <ul><li>thread;</li>

70 <li>tbody;</li>

71 <li>tfoot;</li>

72 <li>caption.</li>

73 </ul><p>Если предстоит работать со сложными HTML-tables, предложенные "маркеры", не ограниченные td, позволят лучше читать разметку и отделять структурные части друг от друга. Пример - сложную шапку от тела с информацией, а затем все это - от результатов подсчетов в “подвале”. Верстальщик за счет грамотного применения логических тегов позволит HTML-tables корректно отображаться в виде сниппетов в поисковых системах.</p>

74 <h3>Thead</h3>

75 <p>С помощью тега thead можно сформировать шапку. Внутри этого "маркера" могут располагаться одна или более строк (tr) с заголовками. Thead располагается в разметке сразу после открывающим table или после caption. Он обязательно размещается до tfoot и tbody.</p>

76 <p>Thead семантически напоминает header. Его "влияние" распространяется на все, что находится в tr и td таблицы.</p>

77 <h3>Tbody</h3>

78 <p>Используется для основной табличной части. Внутри него помещаются tr с данными. Внутри табличного объекта можно использовать сразу несколько tbody. Этот прием позволит разделить информацию на отдельные смысловые блоки.</p>

79 <p>По назначению и работе tbody напоминает main, но в пределах tables. Выше - пример кода, в который попытались вставить один tbody в table tr td. Также здесь добавляются несколько Андроидов для демонстрации того, что блоки данных могут быть в разном количестве.</p>

80 <h3>Tfoot</h3>

81 <p>Табличку добавить в HTML-документ просто. Для этого используются специальные "маркеры". Для заполнения ячеек информацией используется td. Есть также "маркер" tfoot. Он предусматривает такие особенности:</p>

82 <ol><li>Позволяет формировать строку "Итого". Это td с некоторым итогом данных в таблице. Представляет собой "подвал".</li>

83 <li>В каждом табличном объекте можно нарисовать только один блок tfoot.</li>

84 <li>Браузер всегда отрисовывает соответствующий раздел в самом низу объекта. Это происходит даже тогда, когда tfoot прописан не в конце файла.</li>

85 <li>Если верстальщик не использовал thead и tbody, футер отрисовывается после всех tr.</li>

86 <li>Семантический смысл напоминает footer, но в пределах табличных объектов.</li>

87 </ol><p>Теперь можно добавить в table td tr th еще и tfoot. Эта ячейка будет отвечать за строчку со средней стоимостью всех смартфонов:</p>

88 <p>Выглядит это так:</p>

89 <p>Все теги логического типа не имеют дефолтных стилей. Они никак не влияют на непосредственную работу table th tr td. Используются для того, чтобы сделать табличный объект более красивым и понятным для отображения на экране.</p>

90 <p>Если верстальщик решил не использовать ни один из предложенных "маркеров", браузер самостоятельно добавит tbody при отображении информации, содержащейся в табличном объекте.</p>

91 <h3>Caption</h3>

92 <p>Если нужно вставить название таблицы, к исходному коду упомянутого элемента добавляют caption. Этот "маркер" является парным. В нем помещается общая информация о tables.</p>

93 <p>Пример - попытка добавить описания "Цены на флагманские модели iPhone и Xiaomi". Выше - исходный документ и результат (содержание) получившегося на странице объекта.</p>

94 <h2>Атрибуты</h2>

95 <p>Кроме глобальных атрибутов table th td tr может поддерживает иные параметры. Особого внимания заслуживают colspan и rowspan. Они предназначаются для объединения ячеек (td):</p>

96 <ul><li>colspan необходимо вставить в код, если требуется объединить количество ячеек из двух или более столбцов;</li>

97 <li>rowspan используется для того, чтобы объединить td из двух и более рядов.</li>

98 </ul><p>Теперь для примера можно разделить описание телефонов на производителей и модели. Изготовитель будет повторяться. Эти ячейки необходимо объединить во всех рядах. Нужно добавить заголовок "Производитель", а в первые tr каждого tbody внести название модели. Далее предстоит применить атрибут rowspan. Ячейки будут занимать 3 и 2 ряда соответственно:</p>

99 <p>Все это привело к тому, что в таблице HTML объединение ячеек (td) образовало разное количество элементов по сравнению с общим числом колонок. Первая ячейка (td) будет растянута на две колонки:</p>

100 <p>Выше можно увидеть пример того, как содержимое будет отображаться в конечном итоге при обработке table th tr td.</p>

101 <h2>Советы и рекомендации</h2>

102 <p>Предложенная ранее информация поможет понять, как делать таблицы, объединять ячейки и рисовать ячейки, шапки и подвалы. Чтобы лучше разобраться в формировании простых таблиц-HTML, рекомендуется запомнить следующие советы:</p>

103 <ol><li>У таблиц нет встроенных стилей для отображения границ ячеек. Для их добавления требуется использовать CSS style и свойство border.</li>

104 <li>Задать границы компонентам tr, tfoot, thead, tbody нельзя.</li>

105 <li>При работе с HTML-table требуется считать количество ячеек в строках таблицы. Оно должно быть одинаковым.</li>

106 <li>За счет CSS можно нарисовать конструкцию, которая будет максимально напоминать tables. Это не лучшее решение из-за смысловой нагрузки.</li>

107 <li>Ширина рассматриваемого объекта по умолчанию будет подстраиваться под контент внутри. Это приводит к определенным трудностям на адаптивных страницах. Если содержимое не помещается на небольшом дисплее, HTML-tables сжиматься не будут. У них появится горизонтальное прокручивание.</li>

108 </ol><p>Решить последнюю проблему можно за счет нескольких концепций. Примеры - скрывать не первостепенные td для пользователей мобильных устройств или перестраивать отображение за счет свойства display.</p>

109 <p>Теперь понятно, что собой представляет table th tr td, как сформировать документ с соответствующим объектом и отредактировать его содержимое. Все это базовые навыки HTML. Освоить их и другие особенности работы с гипертекстовой разметкой получится в сжатые сроки при помощи дистанционных компьютерных курсов. На них в срок от нескольких месяцев до года получится обучиться разработке и верстке с нуля. В конце будет выдан электронный сертификат установленного образца.</p>

110 <p><em>Хотите освоить современную IT-специальность? Огромный выбор курсов по востребованным IT-направлениям есть в <a>Otus</a>. В частности, вас может заинтересовать<a>курс, посвященный FullStack-разработке</a>, первой ступенью которого является изучение HTML/CSS</em>.</p>

111