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></li>

5 <li><a>Группировка </a></li>

6 <li><a>Атрибуты табличных элементов</a></li>

7 <li><a>Размер таблицы</a><ul><li><a>Ширина ячеек</a></li>

8 </ul></li>

9 </ul><p>HTML-таблица используется для упорядочивания и вывода данных на экран устройства при помощи строк и столбцов. Они состоят из ячеек. Соответствующие элементы образуются на пересечении имеющихся в таблице строк и столбцов.</p>

10 <p>Далее предстоит освоить азы работы с HTML-таблицами. Нужно выяснить особенности этого элемента, способы задания и редактирования его составляющих. Предложенная ниже информация пригодится каждому веб-программисту. Особенно это касается начинающих разработчиков, которые только принялись за изучение HTML и CSS.</p>

11 <h2>Создание таблицы</h2>

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

13 <p>По умолчанию у таблиц HTML нет видимых границ. Они задаются при помощи свойства border:</p>

14 <p>Убрать промежутки между ячейками таблицы поможет свойство table {border-collapse: collapse;}.</p>

15 <h2>Создание рядов</h2>

16 <p>Для создания строк (рядов) в HTML-таблице необходимо пользоваться тегом <tr>. Он является парным.</p>

17 <p>В процессе веб-программирования необходимо запомнить, что количество горизонтальных строк таблицы определяется количеством пар <tr></tr>.</p>

18 <h2>Формирование ячеек заголовка и тела</h2>

19 <p>Задать заголовок столбца в HTML-таблице поможет тег <th>. Он выражается специальной ячейкой, текст в которой будет предусматривать полужирное выделение. Количество ячеек заголовка зависит от количества пар <th></th>. Здесь доступны атрибуты:</p>

20 <ul><li>colspan;</li>

21 <li>headers;</li>

22 <li>rowspan.</li>

23 </ul><p>Ячейка тела таблицы создается при помощи тега td. Он используется для формирования ячеек, внутри которых размещаются различные данные. Элементы td и /td, расположенные в пределах одного и того же ряда, определяют количество ячеек в строке существующей таблицы.</p>

24 <p>В процессе верстки и веб-разработки необходимо помнить - количество пар ячеек td должно совпадать с количеством пар ячеек th. Для данного компонента доступны такие атрибуты, как rowspan, colspan и headers.</p>

25 <p>Выше можно увидеть наглядный пример создания ячеей тела HTML-таблицы.</p>

26 <h2>Добавление подписи (заголовка)</h2>

27 <p>Для более приятного глазу отображения таблиц на странице можно добавлять к ним заголовки (подписи). За соответствующий элемент отвечает тег caption. Он создает подпись HTML-таблицы и добавляется непосредственно после тега table. Он должен быть размещен за пределами строк и ячеек.</p>

28 <h2>Группировка </h2>

29 <p>Группировку можно осуществлять различными способами:</p>

30 <ol><li>Тег colgroup формирует структурную группу столбцов. Он выделяет логически однородные td. Используется для группировки одного или более столбцов для дальнейшего единого форматирования. С помощью colgroup получится повторять стили для каждой ячейки и строки. Добавляться должен прямо после table или caption.</li>

31 <li>Тег col используется для формирования групп столбцов, которые делят таблицу на разделы, не относящиеся к общей табличной структуре (не включающие в себя информацию одного и того же типа). Col позволяет задавать свойства столбцов для каждого столбца в пределах colgroup.</li>

32 <li>Атрибут style позволяет менять основной цвет фона ячеек. Для col доступен атрибут span, который задает количество столбцов, подлежащих объединению.</li>

33 <li>Thead используется для создания группы заголовков для строк таблицы с целью формирования единого оформления. Применяется совместно с tbody и tfoot.</li>

34 <li>Tbody - тег, позволяющий группировать основное содержимое имеющейся таблицы. Он применяется в сочетании с tfoot и thead.</li>

35 <li>Tfoot - используется для создания группы строк для представления данных о суммах или итогах, расположенную в нижней части HTML-таблицы. В каждой таблице может применяться всего один раз. Размещается после thead, но перед tr и tbody.</li>

36 </ol><p>Ячейки в HTML-таблице можно не только группировать, но и объединять. Для этого используются атрибуты colspan и rowspan. Первый параметр используется для задания количества ячеек, объединяемых по горизонтали, второй - по вертикали.</p>

37 <h2>Атрибуты табличных элементов</h2>

38 <p>Перед изменением ширины таблицы в HTML необходимо получше изучить азы работы с табличными компонентами. Вот их атрибуты:</p>

39 АтрибутОписание и принимаемые значенияspanКоличество колонок, объединяемых для задания единого CSS стиля. По умолчанию значение этого атрибута равняется единице. В качестве принимаемых значений может выступать любое целое число (положительное).headersИспользуется для задания списка ячеек заголовка, включающих в себе информацию о заголовке текущей ячейки данных. Используется для речевых браузеров. Принимаемые значения - это список имен ячеек, разделенных пробелами. Соответствующие имена присваиваются через атрибут id.colspanКоличество ячеек в строке для объединения по горизонтали. Принимаемые значения: от 1 до 999 включительно. Пример использования: td colspan="6".rowspanКоличество ячеек в столбце для их объединения по вертикали. Диапазон значений будет точно таким же, как и у colspan. Пример использования: td rowspan="4".<p>С основными операция по созданию таблиц удалось ознакомиться. Теперь можно более подробно рассмотреть особенности размера HTML-таблиц и их корректировку.</p>

40 <h2>Размер таблицы</h2>

41 <p>Если разработчик не указывает размер заданной таблицы, он определяется количеством текста или иного контента, находящегося внутри рассматриваемого элемента. HTML-таблица будет растягиваться по размеру контейнера, в котором она размещается.</p>

42 <p>Размер таблицы можно указывать вручную. Для этого необходимо использовать:</p>

43 <ul><li>width - ширина таблицы;</li>

44 <li>height - высота таблицы.</li>

45 </ul><p>Ширина обычно измеряется в процентах или пикселях. Если указать 100 % ширину таблицы, она растянется на весь экран.</p>

46 <p>Чтобы указать размер table, нужно использовать атрибут style со свойствами width и height. Он поможет задать размер HTML-таблицы, строк и столбцов.</p>

47 <p>Выше можно увидеть наглядный пример кода, в котором таблица будет иметь ширину 400 пикселей.</p>

48 <h3>Ширина ячеек</h3>

49 <p>Ширина ячеек в таблице определяется атрибутом width тега td. Соответствующее значение устанавливается только тогда, когда ширина ячейки таблицы должна быть задана.</p>

50 <p>Вот наглядный пример, когда ширина td (ячейки) должна быть указана:</p>

51 <p>Здесь необходимо создать на веб-сайте две колонки, одна из которых имеет размер 200 пикселей, а вторая - занимает все оставшееся пространство. Для этого формируется таблица с двумя td. Для левого td используется параметр width="200". Единицы измерения здесь ставить не нужно. Это связано с тем, что браузер сам понимает, что заданное число - это пиксели.</p>

52 <p>Ширина td может меняться, несмотря на то, что она указана точно. Такое происходит, если в td добавляется рисунок, размер которого оказывается больше соответствующего "поля". Для того, чтобы вместить используемое изображение, td будет расширяться. На размер ячейки может оказывать влияние текстовое содержимое. Примером служит очень длинное слово.</p>

53 <p>Чтобы избежать соответствующей ситуации, необходимо придерживаться некоторых правил:</p>

54 <ol><li>Не добавлять в td (ячейку) фиксированной ширины изображения, превышающие по ширине td width.</li>

55 <li>Для тега table использовать свойство table-layout с параметром fixed. В этом случае рисунок будет обрезан, если он не помещается полностью в td.</li>

56 </ol><p>Теперь понятно, как работать с таблицами на веб-страницах и изменять их ширину. Быстрее разобраться с азами веб-разработки и использовании CSS помогут дистанционные компьютерные курсы.</p>

57 <p><em>Хотите освоить современную IT-специальность? Огромный выбор курсов по востребованным IT-направлениям есть в <a>Otus</a>!</em> </p>