Как добавить таблицу в html: Атрибут border | htmlbook.ru

Содержание

Атрибуты тега | htmlbook.ru

Тот факт, что таблицы применяются достаточно часто и не только для отображения табличных данных обязан не только их гибкости и универсальности, но и обилию атрибутов тегов <table>, <tr> и <td>. Далее перечислены некоторые атрибуты тега <table>, которые применяются наиболее часто.

align

Задает выравнивание таблицы по краю окна браузера. Допустимые значения: left — выравнивание таблицы по левому краю, center — по центру и right — по правому краю. Когда используются значения left и right, текст начинает обтекать таблицу сбоку и снизу.

bgcolor

Устанавливает цвет фона таблицы.

border

Устанавливает толщину границы в пикселах вокруг таблицы. При наличии этого атрибута также отображаются границы между ячеек.

cellpadding

Определяет расстояние между границей ячейки и ее содержимым. Этот атрибут добавляет пустое пространство к ячейке, увеличивая тем самым ее размеры. Без cellpadding текст в таблице «налипает» на рамку, ухудшая тем самым его восприятие. Добавление же cellpadding позволяет улучшить читабельность текста. При отсутствии границ особого значения этот атрибут не имеет, но может помочь, когда требуется установить пустой промежуток между ячейками.

cellspacing

Задает расстояние между внешними границами ячеек. Если установлен атрибут border, толщина границы принимается в расчет и входит в общее значение.

cols

Атрибут cols указывает количество столбцов в таблице, помогая браузеру в подготовке к ее отображению. Без этого атрибута таблица будет показана только после того, как все ее содержимое будет загружено в браузер и проанализировано. Использование атрибута cols позволяет несколько ускорить отображение содержимого таблицы.

rules

Сообщает браузеру, где отображать границы между ячейками. По умолчанию рамка рисуется вокруг каждой ячейки, образуя тем самым сетку. В дополнение можно указать отображать линии между колонками (значение cols), строками (rows) или группами (groups), которые определяются наличием тегов <thead>, <tfoot>, <tbody>, <colgroup> или <col>. Толщина границы указывается с помощью атрибута border.

width

Задает ширину таблицы. Если общая ширина содержимого превышает указанную ширину таблицы, то браузер будет пытаться «втиснуться» в заданные размеры за счет форматирования текста. В случае, когда это невозможно, например, в таблице находятся изображения, атрибут width будет проигнорирован, и новая ширина таблицы будет вычислена на основе ее содержимого.

Таблицы (table, tr, td, th) в HTML

В статье будут рассмотрены несколько вопросов: как сделать HTML таблицу, как добавить строку и ячейку в таблицу, как объединить строки или ячейки в таблице.

Для создания таблицы необходимо использовать тег <table>. Внутри таблицы для создания строк используется тег <tr>, для столбцов - <td>. В итоге, HTML код таблиц выглядит примерно так:

<table border="1" cellspacing="1" cellpadding="1">
   <tr>
      <td>Ячейка 1</td>
      <td>Ячейка 2</td>
      <td>Ячейка 3</td>
   </tr>
   <tr>
      <td>Ячейка 4</td>
      <td>Ячейка 5</td>
      <td>Ячейка 6</td>
   </tr>
   <tr>
      <td>Ячейка 7</td>
      <td>Ячейка 8</td>
      <td>Ячейка 9</td>
   </tr>
</table>
Код из этого примера отобразит на странице следующую стаблицу:
Ячейка 1 Ячейка 2 Ячейка 3
Ячейка 4 Ячейка 5 Ячейка 6
Ячейка 7 Ячейка 8 Ячейка 9

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

Разберём атрибуты, которые указаны в примере таблицы:

cellspacing

cellspacing="1" - этот атрибут определят расстояние между ячейками таблицы. Если его поставить, к примеру, равным 10, то таблица будет выглядеть так:
Ячейка 1 Ячейка 2 Ячейка 3
Ячейка 4 Ячейка 5 Ячейка 6
Ячейка 7 Ячейка 8 Ячейка 9

cellpadding

cellpadding="1" - значение этого атрибута атрибута задает отступ от текста внутри ячеек таблицы от стенок. Если поставить значение, к примеру, равным 10, то таблица будет выглядеть так:
Ячейка 1 Ячейка 2 Ячейка 3
Ячейка 4 Ячейка 5 Ячейка 6
Ячейка 7 Ячейка 8 Ячейка 9

border

border="1" - устанавливает толщину рамки таблицы в пикселях. Если поставить значение, к примеру, равным 10, то таблица будет выглядеть так
Ячейка 1 Ячейка 2 Ячейка 3
Ячейка 4 Ячейка 5 Ячейка 6
Ячейка 7 Ячейка 8 Ячейка 9

Рамки таблицы и ячеек можно скрыть совсем, если задать стиль. Читайте подробнее об этом в курсе по CSS.

Высота и ширина таблицы

У тега есть атрибуты, которые задают ширину (width) и высоту (height) таблицы. Значения этих атрибутов задают ширину и высоту в пикселях.

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

Ячейка 1 Ячейка 2 Ячейка 3
Ячейка 4 Ячейка 5 Ячейка 6
Ячейка 7 Ячейка 8 Ячейка 9

Значение width можно задать в процентах от ширины родительского элемента, в котором находится таблица. К примеру,

Если задать, то получится такой результат:
Ячейка 1 Ячейка 2 Ячейка 3
Ячейка 4 Ячейка 5 Ячейка 6
Ячейка 7 Ячейка 8 Ячейка 9

HTML: Создание таблицы | Таблица внутри таблицы

Таблица - набор данных, распределенных по строкам и ячейкам. В большинстве ячеек размещаются табличные данные, остальные содержат заголовки для строк и столбцов, описывающие содержимое.

Для создания таблицы в HTML-документе используется тег <table>, он представляет собой контейнер, в котором находится все содержимое таблицы.

Создание таблицы всегда начинается со строк, которые определяются с помощью тега <tr>, каждая строка, в свою очередь, состоит из ячеек. Тег <tr> может содержать в себе только теги для создания ячеек.

В HTML существует два разных тега для создания ячеек, первым из них является <td>, он создает обычные ячейки с данными. По умолчанию, содержимое тегов <td> выравнивается по левому краю. Второй тег для создания ячеек - это тег <th>, он позволяет определять ячейки, которые содержат заголовки для столбцов или строк, содержимое таких ячеек отображается жирным текстом и выравнивается по центру. Теги <td> и <th> могут включать в себя любые HTML-элементы, которые доступны для использования в теле документа.


<table border="1">
  <tr><th>Первый заголовок</th><th>Второй заголовок</th></tr>
  <tr><td>строка 1, ячейка 1</td><td>строка 1, ячейка 2</td></tr>
  <tr><td>строка 2, ячейка 1</td><td>строка 2, ячейка 2</td></tr>
</table>
Попробовать »

Таблица внутри таблицы

В HTML есть возможность создания вложенных таблиц, то есть таких таблиц, которые расположены внутри других таблиц. Чтобы сделать вложенную таблицу надо код таблицы, которую требуется сделать вложенной, поместить внутрь любого тега <td>.

Для примера, возьмём уже созданную ранее нами таблицу и поместим этот код во вторую ячейку второй строки:


<table border="1">
  <tr><th>Первый заголовок</th><th>Второй заголовок</th></tr>
  <tr><td>строка 1, ячейка 1</td><td>строка 1, ячейка 2</td></tr>
  <tr><td>строка 2, ячейка 1</td>
    <td>строка 2, ячейка 2
	  <table border="1">
        <tr><th>Первый заголовок</th><th>Второй заголовок</th></tr>
        <tr><td>строка 1, ячейка 1</td><td>строка 1, ячейка 2</td></tr>
        <tr><td>строка 2, ячейка 1</td><td>строка 2, ячейка 2</td></tr>
      </table>
	</td>
  </tr>
</table>
Попробовать »

В итоге у нас получилась таблица внутри ячейки другой таблицы, то есть таблица внутри таблицы.

С этой темой смотрят:

Добавление таблицы на страницу

Вы можете добавлять таблицы на классические страницы, чтобы структурировать текст, изображения или объекты на странице. Это можно сделать, чтобы показать данные в таблице, прайс-, сравнить продукты, список терминов и определений и т. д. Это также можно сделать для размещения содержимого, например Показать biographies сотрудников, контактные данные или рабочие часы. В этой статье объясняется, как разместить или структурировать содержимое на странице с помощью редактора таблиц на сайте и других методов, таких как HTML.

В этой статье

Вставка таблицы

  1. Перейдите на страницу, на которую вы хотите добавить таблицу.

  2. Откройте вкладку страница .

  3. Нажмите кнопку " изменить ".

  4. Щелкните страницу, на которую вы хотите добавить таблицу.

  5. Откройте вкладку Вставка.

  6. Нажмите кнопку " Таблица ".

  7. Существует два способа добавления таблицы:

    • Щелкните стрелку, чтобы развернуть сетку таблицы, наведите указатель мыши на сетку таблицы, а затем щелкните нужное количество ячеек таблицы.

    • Или нажмите кнопку Вставить таблицу , введите нужное количество столбцов и строк, а затем нажмите кнопку ОК.

  8. Таблица будет добавлена на страницу, на которой можно добавить в нее содержимое или настроить ее, а также описанные ниже задачи.

К началу страницы

Настройка таблицы

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

Добавление строк и столбцов

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

  1. Отредактируйте веб-страницу, содержащую таблицу.

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

  3. Откройте вкладку Макет таблицы .

  4. Выберите один из указанных ниже вариантов.

    • Вставить сверху , чтобы добавить строку над выделенной ячейкой.

    • Чтобы добавить строку под выделенной ячейкой, вставьте поле ниже .

    • Вставить слева , чтобы добавить столбец слева от выделенной ячейки.

    • Вставка вправо для добавления столбца справа от выделенной ячейки.

Совет: Если вы не хотите, чтобы результат в новых ячейках не устраивает, вы можете отменить действие, нажав клавиши CTRL + Z или открыв вкладку Формат текста и выбрав команду отменить.

Вы увидите, что изменения немедленно применены к таблице. Если в ячейках есть текст или изображения, они будут помещены вместе в новую объединенную ячейку.

К началу страницы

Объединение ячеек

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

  1. Измените страницу, содержащую таблицу.

  2. Поместите курсор в ячейку таблицы, которую вы хотите объединить.

  3. Откройте вкладку Макет таблицы .

  4. Нажмите кнопку объединить ячейки и выберите один из указанных ниже вариантов.

    • Объединение сверху и слияние с указанной выше ячейкой.

    • Объедините ниже , чтобы объединить с ячейкой ниже.

    • Объединить слева , чтобы объединить ячейки слева.

    • Объединение справа , чтобы объединить ячейки справа.

Совет: Если результат объединения ячеек вам не устраивает, вы можете отменить это действие, нажав клавиши CTRL + Z или открыв вкладку Формат текста и выбрав команду отменить.

Вы увидите, что изменения немедленно применены к таблице. Если в ячейках есть текст или изображения, они будут помещены вместе в новую объединенную ячейку.

К началу страницы

Разделение ячеек

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

  1. Отредактируйте веб-страницу, содержащую таблицу.

  2. Поместите курсор в ячейку таблицы, которую вы хотите разделить.

  3. Откройте вкладку Макет таблицы .

  4. Щелкните разбить ячейки и выберите один из следующих вариантов:

    • Разделите ячейки по горизонтали , чтобы разделить ее на две ячейки, рядом друг с другом.

    • Разделите по вертикали , чтобы разделить ячейку на две ячейки.

Совет: Если вы не хотите выводить результаты разбиения ячеек, вы можете отменить действие, нажав клавиши CTRL + Z или открыв вкладку Формат текста и выбрав команду отменить.

Вы увидите, что изменения немедленно применены к таблице. Если в ячейке есть текст или изображения, они останутся в исходной ячейке, а не в новой.

К началу страницы

Изменение размера таблицы

Вы можете изменить размер таблицы, а также отдельных строк и столбцов, образующих таблицу. Это можно сделать, чтобы разместить больше содержимого в ячейке таблицы или освободить место в оставшейся части страницы для другого содержимого. Вы можете указать размер таблицы или ячейки в пикселях (ПКС) или процентах (%). Одновременно можно изменить размер только всей строки, столбца или таблицы, а не отдельных ячеек.

  1. Измените страницу, содержащую таблицу.

  2. Поместите курсор в таблицу, размер которой нужно изменить.

  3. Откройте вкладку Макет таблицы .

  4. В разделе " Ширина таблицы" введите значение в процентах или пикселах. Значение 100% или 700px или больше использует всю область содержимого страницы.

  5. В разделе " высота таблицы" введите значение в процентах или пикселах. Имейте в виду, что число абзацев также определяет высоту таблицы.

  6. В разделе Ширина столбцавведите значение в процентах или пикселах. Значение 100% или 700px или больше использует всю область содержимого страницы.

  7. В разделе Высота столбцавведите значение в процентах или пикселах. Имейте в виду, что число абзацев также определяет высоту таблицы ячейки.

    Совет: Если результат изменения размера таблицы или ячейки вам не устраивает, вы можете отменить действие, нажав клавиши CTRL + Z или открыв вкладку Формат текста и выбрав команду отменить.

Вы увидите, что изменения немедленно применены к таблице. Если в ячейках есть текст или изображения, они остаются в ячейке с измененным размером.

К началу страницы

Изменение стиля таблицы

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

  1. Измените страницу, содержащую таблицу.

  2. Поместите курсор в таблицу, которую вы хотите настроить.

  3. Откройте вкладку Конструктор.

  4. В разделе Параметры стиля таблицы выберите один из приведенных ниже параметров стиля таблицы. (Возможно, не будут видны различия форматирования, если к таблице применен стиль таблицы "светлое" или "очистить".)

    • Строка заголовков применяет специальное форматирование к первой строке таблицы.

    • Строка нижнего колонтитула применяет специальное форматирование к последней строке таблицы.

    • Первый столбец применяет специальное форматирование к первому столбцу таблицы.

    • Последний столбец применяет специальное форматирование к последнему столбцу таблицы.

  5. Выберите стиль таблицы. Каждый стиль изменяет цвет границы, цвет ячейки и цвет верхнего или нижнего колонтитула. (Некоторые стили изменяют верхний и нижний колонтитулы только в том случае, если вы выбрали этот параметр выше.)

    • Стиль таблицы по умолчанию — светлый: тонкие, светлые, серые границы сетки.

    • Стиль таблицы 1 — Clear: нет видимых границ.

    • Стиль таблицы 2 — светлая: светлые горизонтальные линии, все остальные строки, затененные серым цветом.

    • Стиль таблицы 3 – средние два тона: синий верхний колонтитул, все остальные строки выделены темно-синим цветом.

    • Стиль таблицы 4 — светлые линии: серый верхний колонтитул, светло-синие горизонтальные линии.

    • Стиль таблицы 5 — сетка: серые границы сетки, все остальные строки, затененные серым цветом.

    • Стиль таблицы 6 — диакритические 1: синие границы сетки, синий заголовок.

    • Стиль таблицы 7 — диакритические символы 2; Светло-синие границы сетки, светло-синий заголовок.

    • Стиль таблицы 8 — диакритические 3: зеленые границы сетки, зеленый верхний колонтитул.

    • Стиль таблицы 9 — диакритические 4: оливковый — границы сетки, оливковый заголовок.

    • Стиль таблицы 10 — диакритические 5: красные границы сетки, красный заголовок.

    • Стиль таблицы 11 — ударения 6: фиолетовые границы сетки, фиолетовый заголовок.

  6. Нажмите кнопку Показать линии сетки , чтобы отобразить или скрыть линии сетки таблицы. Это просто визуальное подсказка в случае, если вы применили стиль очистки таблицы или другие границы таблицы, но все же нужно просмотреть таблицу для работы с ней.

Вы увидите, что изменения немедленно применены к таблице. Если в ячейке есть текст или изображения, они останутся в исходной ячейке с примененным новым стилем.

К началу страницы

Добавление текста или объектов в таблицу

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

  1. Измените страницу, содержащую таблицу.

  2. Поместите курсор в ячейку таблицы, в которую вы хотите добавить содержимое.

  3. Чтобы добавить текст, просто начните вводить текст или вставьте текст в ячейку таблицы. Чтобы изменить шрифт или размер шрифта, откройте вкладку Формат текста и выберите в нем параметры шрифта.

  4. Чтобы вставить изображение, видео или другой объект, откройте вкладку Вставка и вставьте объект, как на любой из ваших веб-страниц. (Если изображение или видео больше ячейки таблицы, размер ячейки таблицы изменится автоматически в соответствии с изображением или видео.)

Чтобы удалить текст, изображения или объекты, выделите их в ячейке и нажмите клавишу Delete на клавиатуре.

К началу страницы

Удаление ячейки, строки, столбца или таблицы

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

  1. Измените страницу, содержащую таблицу.

  2. Поместите курсор в ячейку, строку, столбец или таблицу, которую вы хотите удалить.

  3. Откройте вкладку Макет таблицы .

  4. Нажмите кнопку Удалить и выберите один из указанных ниже вариантов.

  5. Удалите ячейку , чтобы удалить отдельную ячейку, в которой находится курсор.

  6. Удалить столбец , чтобы удалить столбец, в котором находится курсор.

  7. Удалить строку , чтобы удалить строку, в которой находится курсор.

  8. Удалите таблицу , чтобы удалить всю таблицу, в которой находится курсор.

  9. Продолжайте настраивать таблицу или содержимое на странице.

К началу страницы

Создание настраиваемой таблицы или использование HTML-контента

Если вы хотите создать настраиваемую таблицу или использовать собственный HTML-код для размещения содержимого на странице, это можно сделать, добавив код HTML в редактор веб-страниц, например Expression Web или Dreamweaver.

  1. Измените страницу, на которую вы хотите добавить таблицу или HTML-контент.

  2. Откройте вкладку Формат текста и выберите команду изменить источник в группе исправлений.

  3. В окне исходного HTML- кода введите или вставьте собственный HTML-код или измените существующее содержимое, например применение тегов Div. (Окно исходного кода HTML также полезен для копирования таблицы из одной части веб-сайта в другую, что быстрее, чем повторное создание и настройка таблицы.)

  4. Нажмите кнопку ОК , а затем сохраните страницу.

Совет: Для дальнейшей настройки макета и расположения контента на странице можно создать собственный макет страницы.

К началу страницы

Таблицы в HTML | Учебные курсы

Таблицы в HTML предназначены только для табличных данных, а это любой тип содержимого, который может быть семантически расположен в строках и столбцах.

Это похоже на электронную таблицу в Excel.

Синтаксис

Построение таблицы в HTML требует определённой структуры:

  • открыть <table>;
  • добавить строки через <tr>;
  • добавить обычные ячейки через <td> или заглавные ячейки через <th>.

Эта иерархия обязательна и все три элемента необходимы для построения таблицы.

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

<table>
  <tr>
    <td>Джон Леннон</td>
    <td>Ритм-гитара</td>
  </tr>
  <tr>
    <td>Пол Маккартни</td>
    <td>Бас</td>
  </tr>
  <tr>
    <td>Джордж Харрисон</td>
    <td>Соло-гитара</td>
  </tr>
  <tr>
    <td>Ринго Старр</td>
    <td>Барабаны</td>
  </tr>
</table>

Как вы можете видеть, таблица в HTML является довольно многословной: много тегов для всего нескольких строк данных.

<thead>, <tfoot> и <tbody>

Так же, как веб-страница может содержать «шапку» и «подвал», таблица может содержать головную, основную и нижнюю части. Как и всё в HTML, это чисто по семантическим причинам: предоставление большей структуры вашей таблице.

<thead>, <tfoot> и <tbody> представляют собой наборы строк. Как таковые, они являются прямыми детьми <table> и прямыми родителями одного или более <tr>. Короче говоря, они добавляют один уровень иерархии.

<thead> и <tfoot> используются в качестве резюме столбцов.

Давайте улучшим предыдущую таблицу с <thead> и <tbody>:

<table>
  <thead>
    <tr>
      <th>Имя</th>
      <th>Инструмент</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Джон Леннон</td>
      <td>Ритм-гитара</td>
    </tr>
    <tr>
      <td>Пол Маккартни</td>
      <td>Бас</td>
    </tr>
    <tr>
      <td>Джордж Харрисон</td>
      <td>Соло-гитара</td>
    </tr>
    <tr>
      <td>Ринго Старр</td>
      <td>Барабаны</td>
    </tr>
  </tbody>
</table>

<tfoot> отдельно

Давайте также добавим <tfoot> к таблице:

<table>
  <thead>
    <tr>
      <th>Имя</th>
      <th>Инструмент</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Имя</th>
      <th>Инструмент</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Джон Леннон</td>
      <td>Ритм-гитара</td>
    </tr>
    <tr>
      <td>Пол Маккартни</td>
      <td>Бас</td>
    </tr>
    <tr>
      <td>Джордж Харрисон</td>
      <td>Соло-гитара</td>
    </tr>
    <tr>
      <td>Ринго Старр</td>
      <td>Барабаны</td>
    </tr>
  </tbody>
</table>

Несмотря на то, что мы перед <tbody> добавили <tfoot>, он, тем не менее, появляется в конце.

Это исходит из того, что <tbody> может содержать много строк. Но браузер хочет отобразить нижнюю часть до получения всех (потенциально многочисленных) строк данных. Вот почему <tfoot> идёт сперва в коде.

colspan и rowspan

Вы можете объединить столбцы или строки с помощью colspan и rowspan соответственно. Имейте в виду, для того чтобы объединить столбцы, вам нужно использовать атрибут colspan, так как он позволяет охватить столбец в несколько строк.

<table>
  <tr>
    <th colspan="2">Синглы Майкла Джексона</th>
  </tr>
  <tr>
    <th rowspan="3">1979</th>
    <td>Don't Stop 'Til You Get Enough</td>
  </tr>
  <tr>
    <td>Rock with You</td>
  </tr>
  <tr>
    <td>Off the Wall</td>
  </tr>
</table>

Ячейка «Синглы Майкла Джексона» охватывает два столбца, так что следующая строка включает в себя две ячейки.

Так как ячейка «1979» охватывает три строки, две следующие строки включают в себя только одну ячейку, чтобы добавить пространство для столбца «1979».

Может быть трудно отслеживать, сколько клеток отсутствуют или лишних. Есть один простой способ — сперва постройте полную таблицу 2 на 4, а затем удалите клетки, добавляя атрибуты colspan и rowspan.

В нашем случае у нас должно быть восемь ячеек. Мы пишем только пять ячеек, а colspan="2" и rowspan="3" добавляют три дополнительных ячейки.

Таблицы. Учебник html table

Глава 4

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

Тег <table> задаёт начало и конец таблицы, любая таблица, как известно, состоит из строк и столбцов, для этого есть ещё два тега:

<tr> - строка таблицы
<td> - столбец таблицы

Вместе эти теги пишутся так:

<table>
<tr>
<td>ячейка</td>
</tr>
</table>

Такая запись это самая маленькая таблица, в ней всего одна строка, содержащая один столбец - ячейку

Поставим перед собой задачу нарисовать таблицу из трёх строк и трёх столбцов, а заодно вспомним атрибут border "рамка", который добавит нам наглядности.

<html>
<head>
<title>Таблица</title>
</head>
<body>
<table border="1">
<tr>
<td>строка1 ячейка1</td>
<td>строка1 ячейка2</td>
<td>строка1 ячейка3</td>
</tr>
<tr>
<td>строка2 ячейка1</td>
<td>строка2 ячейка2</td>
<td>строка2 ячейка3</td>
</tr>
<tr>
<td>строка3 ячейка1</td>
<td>строка3 ячейка2</td>
<td>строка3 ячейка3</td>
</tr>
</table>
</body>
</html>

Разобрались? Если да, идем дальше..

Часто при работе с таблицами возникает необходимость объединить те или иные ячейки в одну.

На самом деле слово "объединить" здесь неуместно, использовал я его лишь для того, что бы вызвать ассоциации в Вашей голове. Вспомните тот же Word, добавив там таблицу Вы выделяете нужные ячейки и нажимаете кнопку "объединить".. здесь всё происходит не совсем так, и правильнее было бы говорить не "объединить" а "растянуть".

Эту задачу решают атрибуты colspan и rowspan

  • colspan - определяет какое количество столбцов будет занимать данная ячейка
  • rowspan - количество рядов занимаемое ячейкой

Предположим что в нашем примере нам необходимо "объединить" в третьей строке вторую и третью ячейку, для этого атрибуту colspan присваиваем значение 2 (растянуть на два столбца) и вставляем его в нужное место.

<html>
<head>
<title>Таблица</title>
</head>
<body>
<table border="1">
<tr>
<td>строка1 ячейка1</td>
<td>строка1 ячейка2</td>
<td>строка1 ячейка3</td>
</tr>
<tr>
<td>строка2 ячейка1</td>
<td>строка2 ячейка2</td>
<td>строка2 ячейка3</td>
</tr>
<tr>
<td>строка3 ячейка1</td>
<td colspan="2">строка3 ячейка2</td>
<td>строка3 ячейка3</td>
</tr>
</table>
</body>
</html>

Как видите ячейка растянулась на два столбца, но при этом сдвинула третью ячейку, которая собственно нам теперь не нужна, а по сему мы её просто напросто удаляем. Специально допустил эту оплошность, чтобы Вы поняли принцип данного действия.

Исправленный пример:

<html>
<head>
<title>Таблица</title>
</head>
<body>
<table border="1">
<tr>
<td>строка1 ячейка1</td>
<td>строка1 ячейка2</td>
<td>строка1 ячейка3</td>
</tr>
<tr>
<td>строка2 ячейка1</td>
<td>строка2 ячейка2</td>
<td>строка2 ячейка3</td>
</tr>
<tr>
<td>строка3 ячейка1</td>
<td colspan="2">строка3 ячейка2</td>
</tr>
</table>
</body>
</html>

Теперь попробуем объединить весь первый столбец в одну ячейку, используя атрибут rowspan, ну точнее растянем ячейку первой строчки первого столбца на три строки и на сей раз сразу уберём лишнее.

<html>
<head>
<title>Таблица</title>
</head>
<body>
<table border="1">
<tr>
<td rowspan="3">строка1 ячейка1</td>
<td>строка1 ячейка2</td>
<td>строка1 ячейка3</td>
</tr>
<tr>
<td>строка2 ячейка2</td>
<td>строка2 ячейка3</td>
</tr>
<tr>
<td colspan="2">строка3 ячейка2</td>
</tr>
</table>
</body>
</html>

Всё просто.. главное быть внимательным!

Если Вы самостоятельно тренировались с рисованием таблицы то наверняка обратили внимание на то, что размеры таблицы и ячеек по умолчанию ограничены вставленным в неё текстом.. и "ползают" себе как хотят. Вспомните про атрибуты width - ширина и height - высота, которые мы использовали для растягивания рисунков, они так же применимы к тегам <table>, <tr>и <td>. С этими атрибутами Вы знакомы, так что рассусоливать не буду.. просто приведу пример. В нём заданы размеры таблицы и отдельных её ячеек, а заодно и вся таблица выровнена по центру знакомым тегом <center>

Пример:

<html>
<head>
<title>Таблица</title>
</head>
<body>
<center>
<table border="1" width="640">
<tr>
<td rowspan="3" width="150">строка1 ячейка1</td>
<td>строка1 ячейка2</td>
<td>строка1 ячейка3</td>
</tr>
<tr>
<td height="30">строка2 ячейка2</td>
<td>строка2 ячейка3</td>
</tr>
<tr>
<td colspan="2" >строка3 ячейка2</td>
</tr>
</table>
</center>
</body>
</html>

Обратите внимание на то, что длина и ширина заданы не для всех ячеек. А зачем? Если и так таблица будет выровнена по самым широким и длинным ячейкам.. на то она и таблица..

Еще не всё рассказал..

Значения атрибутов width и height в таблице могут указываться не только в пикселях, но и в процентах

Вот пример:

<html>
<head>
<title>Таблица</title>
</head>
<body>
<center>
<table border="1">
<tr height="25%">
<td width="15%"> строка1 ячейка1</td>
<td width="25%">строка1 ячейка2</td>
<td width="60%">строка1 ячейка3</td>
</tr>
<tr height="50%">
<td>строка2 ячейка1</td>
<td>строка2 ячейка2</td>
<td>строка2 ячейка3</td>
</tr>
<tr height="25%">
<td>строка3 ячейка1</td>
<td>строка3 ячейка2</td>
<td>строка3 ячейка3</td>
</tr>
</table>
</center>
</body>
</html>

В этом примере от общей ширины таблицы в 640 пикселей мы отдали 15% первой ячейке, 25% второй и 60% третьей. А по высоте из 480 пикселей по 25% первой и третьей строчке, а добрую половину места второй.. Короче справедливости в мире нет.. Ну до это Вам решать, сколько кому места отчуждать, главное, чтобы в сумме было 100%, иначе неразбериха будет.. смутное время.. революция..

Посмотрите на этот пример с таблицей, он Вам ничего не напоминает??

<html>
<head>
<title>Верстка страницы</title>
</head>
<body>
<center>
<table border="1">
<tr>
<td colspan="5"><center>Заголовок</center></td>
</tr>
<tr>
<td><center>кнопка1</center></td>
<td><center>кнопка2</center></td>
<td><center>кнопка3</center></td>
<td><center>кнопка4</center></td>
<td><center>кнопка5</center></td>
</tr>
<tr>
<td valign="top">содержание:</td>
<td colspan="4"><center>куча текста</center></td>
</tr>
</table>
</center>
</body>
</html>

Как видите, таблица это хороший и главное удобный инструмент для верстки страницы..

Любая ячейка таблицы может служить самостоятельной ёмкостью для наполнения другими тегами и текстовым содержанием, а также иметь те или иные индивидуальные свойства - атрибуты.

Давайте освежим в голове уже пройденный материал, применив эти знания к таблице. Покажу на примерах, мы это уже проходили..

Добавим красок:

<html>
<head>
<title>Таблица и краски</title>
</head>
<body>
<center>
<table>
<tr>
<td bgcolor="#c0e4ff">1</td>
<td bgcolor="#c5ffa0">2</td>
<td bgcolor="#c0e4ff">3</td>
</tr>
<tr>
<td bgcolor="#c5ffa0">4</td>
<td bgcolor="#ffa0c5">5</td>
<td bgcolor="#c5ffa0">6</td>
</tr>
<tr>
<td bgcolor="#c0e4ff">7</td>
<td bgcolor="#c5ffa0">8</td>
<td bgcolor="#c0e4ff">9</td>
</tr>
</table>
</center>
</body>
</html>

Выровняем текст:

Здесь появляется новый атрибут valign - Вертикальное выравнивание. До этого момента нам был знаком атрибут align - горизонтальное выравнивание.

<html>
<head>
<title>Выравнивание в таблице</title>
</head>
<body>
<center>
<table>
<tr>
<td bgcolor="#c0e4ff" valign="top">1</td>
<td bgcolor="#c5ffa0" valign="top"><center>2</center></td>
<td bgcolor="#c0e4ff" align="right" valign="top">3</td>
</tr>
<tr>
<td bgcolor="#c5ffa0">4</td>
<td bgcolor="#ffa0c5"><center>5</center></td>
<td bgcolor="#c5ffa0" align="right">6</td>
</tr>
<tr>
<td bgcolor="#c0e4ff" valign="bottom">7</td>
<td bgcolor="#c5ffa0" valign="bottom"><center>8</center></td>
<td bgcolor="#c0e4ff" align="right" valign="bottom">9</td>
</tr>
</table>
</center>
</body>
</html>

Теперь о новых атрибутах.

Cellspacing - задаёт расстояние в пикселях между ячейками таблицы. Задав значение cellspacing="0" можно избавиться от "зазора" между ячейками.

Пример, увеличим "зазор":

<html>
<head>
<title>Расстояние между ячейками</title>
</head>
<body>
<center>
<table cellspacing="15">
<tr>
<td bgcolor="#c0e4ff" valign="top">1</td>
<td bgcolor="#c5ffa0" valign="top"><center>2</center></td>
<td bgcolor="#c0e4ff" align="right" valign="top">3</td>
</tr>
<tr>
<td bgcolor="#c5ffa0">4</td>
<td bgcolor="#ffa0c5"><center>5</center></td>
<td bgcolor="#c5ffa0" align="right">6</td>
</tr>
<tr>
<td bgcolor="#c0e4ff" valign="bottom">7</td>
<td bgcolor="#c5ffa0" valign="bottom"><center>8</center></td>
<td bgcolor="#c0e4ff" align="right" valign="bottom">9</td>
</tr>
</table>
</center>
</body>
</html>

Атрибут cellpadding (не путайте с cellspacing) - в пикселях задаёт поля ячеек (отступ от границ ячеек до текста)

Пример:

<html>
<head>
<title>Поля таблицы</title>
</head>
<body>
<center>
<table cellspacing="0" cellpadding="25">
<tr>
<td bgcolor="#c0e4ff" valign="top">1</td>
<td bgcolor="#c5ffa0" valign="top"><center>2</center></td>
<td bgcolor="#c0e4ff" align="right" valign="top">3</td>
</tr>
<tr>
<td bgcolor="#c5ffa0">4</td>
<td bgcolor="#ffa0c5"><center>5</center></td>
<td bgcolor="#c5ffa0" align="right">6</td>
</tr>
<tr>
<td bgcolor="#c0e4ff" valign="bottom">7</td>
<td bgcolor="#c5ffa0" valign="bottom"><center>8</center></td>
<td bgcolor="#c0e4ff" align="right" valign="bottom">9</td>
</tr>
</table>
</center>
</body>
</html>

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

Смотрим пример:

<html>
<head>
<title>Вложенная таблица</title>
</head>
<body>
<center>
<table border="1">
<tr>
<td colspan="2"><center>Заголовок</center></td>
</tr>
<tr>
<td valign="top">содержание:</td>
<td valign="top">
<center>
<br><br>
В одну ячейку вложена целая таблица!!
<br><br><br>
<table cellspacing="0" cellpadding="15">
<tr>
<td bgcolor="#c0e4ff" valign="top">1</td>
<td bgcolor="#c5ffa0" valign="top"><center>2</center></td>
<td bgcolor="#c0e4ff" align="right" valign="top">3</td>
</tr>
<tr>
<td bgcolor="#c5ffa0">4</td>
<td bgcolor="#ffa0c5"><center>5</center></td>
<td bgcolor="#c5ffa0" align="right">6</td>
</tr>
<tr>
<td bgcolor="#c0e4ff" valign="bottom">7</td>
<td bgcolor="#c5ffa0" valign="bottom"><center>8</center></td>
<td bgcolor="#c0e4ff" align="right" valign="bottom">9</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</center>
</body>
</html>

Такой вот растянутый код получился… Сложно? Запутанно? Может быть на первый взгляд оно так и есть, но ведь не зря же я приводил столько примеров! Если что то не понятно вернитесь назад, перечитайте, идите от простого к более сложному и тогда всё станет на свои места! Практика - залог успеха. Не ленитесь, пробуйте писать код самостоятельно..

Ну и уже по традиции подвожу итог главы.. Итак, что у Вас там за страничка получилась..?

У меня она уже вот такая:

<html>
<head>
<title>Мой первый сайт </title>
</head>
<body text="#484800" bgcolor="#ffffff" background="graphics/fon.jpg">
<center>
<table cellpadding="5" cellspacing="2" border="1">
<tr>
<td colspan="3" bgcolor="#b2ff80">
<center><img src="graphics/privet.png" alt="Привет мир!!!"></center>
</td>
</tr>
<tr>
<td bgcolor="#ffa0cf"><center><b>Обо мне!!!</b></center></td>
<td bgcolor="#c0e4ff"><center><b>Здесь мои фотки!!</b></center></td>
<td bgcolor="#c0e4ff"><center><b>Напишите мне письмо..</b></center></td>
</tr>
<tr>
<td colspan="3" valign="top" bgcolor="#b2ff80">
<p align="justify">
<img src="graphics/foto.jpg" align="left" hspace="10" alt="Это моя фотка!!!" title="Это моя фотка!!">
&nbsp;&nbsp;&nbsp;Разрешите представиться Карлсон! который живет на крыше.
Спокойствие! Только спокойствие! подумаешь с жильём проблемы..<br> Я - умный, красивый, в меру упитанный мужчина, в полном расцвете сил! Женщины сходят по мне сходят с ума.. эх.. какая досада.. в общем со мной не соскучишься..
</p>
<p>&nbsp;&nbsp;&nbsp;По телевизору показывают жуликов... Ну чем я хуже?! - так что вот решил сделать свою страничку!</p>
<p>&nbsp;&nbsp;&nbsp;Хочу здесь найти себе новых друзей, для того чтобы вместе гулять по крышам!</p>
<p>&nbsp;&nbsp;&nbsp;Я очень очень сильно люблю <font size="+1" color="#ff0000"> варенье</font> !!! С нетерпеньем буду ждать Вашего приглашения на чай.. побалуемся плюшками… пошалим…</p>
<center><b>Прилечу!!</b></center>
<p>&nbsp;&nbsp;Ну зачем тебе этот щенок? Я же лучше, Малыш…</p>
</td>
</tr>
</table>
</center>
</body>
</html>

Читайте так же: И снова таблицы..

  • При создании больших сложных таблиц рекомендую сначала рисовать их на бумаге. Так будет удобнее представить её общую картину, подсчитать количество строк и столбцов, увидеть с какой ячейки и на какое количество следует растягивать "объединять" те или иные ячейки.

  • При выборе будущих размеров Вашей страницы, особенно это касается её ширины (атрибут width), ориентируйтесь на стандартные разрешения мониторов 640 на 480, 800 на 600, 1024 на 768… Но самое главное помните, что у разных пользователей в зависимости от их мониторов и зрения выставлены разные разрешения и если указанные Вами размеры будут выходить за их рамки то соответственно на экранах таких пользователей будут появляться полосы прокрутки. Вертикальная полоса это беда нестрашная, благо колёсико на мышке придумали, да и пишут у нас слева направо, а не сверху вниз.. а вот горизонтальная полоса прокрутки уже вызывает значительные неудобства при чтении страницы.. Так что не советую указывать большую ширину страницы. По-моему ширина в 1024 пикселей будет оптимальным размером… хотя… ну да ладно.. решайте сами.



HTML таблицы

HTML таблицы

Для создания таблиц в HTML используется элемент <table>. Он служит контейнером для элементов, которые определяют содержимое таблицы.

Строки в таблице задаются парным блочным тегом <tr> (сокр. от англ. “table row” - строка таблицы). Каждая строка в таблице записывается в отдельный тег <tr>.

В тег <tr> записываются ячейки таблицы, которые добавляются при помощи тега <td> (сокр. от англ. “table data” - данные таблицы). Каждая ячейка записывается в отдельный тег <td>. В ячейках записывается содержимое таблицы (числа, текст и т.д.).

Заголовок строки или столбца таблицы задается при помощи тега <th> (сокр. от англ. “table head” - строка таблицы). Тег <th> размещается в первой строке таблицы. В браузере он автоматически выделяется жирным.

Синтаксис¶

Тег <table> парный, содержимое записывается между открывающим (<table>) и закрывающим (</table>) тегами.

Тег <th> не является обязательным элементом таблицы, но мы рекомендуем включать его в таблицу, так как он помогает лучше структурировать контент, а также помогает поисковым машинам лучше индексировать таблицы.

Пример¶

<!DOCTYPE html>
<html>
<head>
    <title>Заголовок окна веб-страницы</title>
</head>
<body>
  <table> 
    <tr>
      <th>Месяц</th>
      <th>Дата</th>
    </tr>
    <tr>
      <td>Январь</td>
      <td>10.01.2018</td>
    </tr>
    <tr>
      <td>Февраль</td>
      <td>10.01.2018</td>
    </tr>
  </table>
</body>
</html>
Попробуйте сами!

Результат¶

Месяц Дата
Январь 10.01.2018
Февраль 10.01.2018

Границы таблицы¶

Как видно из примера, браузер по умолчанию не отображает рамки таблицы. Добавить их можно двумя способами, используя атрибут border, либо при помощи CSS стилей. Рассмотрим подробно оба варианта.

Атрибут span>border устанавливает рамку вокруг таблицы, а также границы между ячеек. Если значение атрибута не указано, то браузер отображает рамку толщиной в один пиксель. По умолчанию рамка изображается двойной.

Выглядит это так:

<!DOCTYPEhtml><html><head><title>Заголовок окна веб-страницы</title></head><body><tableborder="1"><tr><th>Месяц</th><th>Дата</th></tr><tr><td>Январь</td><td>10.01.2014</td></tr><tr><td>Февраль</td><td>10.01.2014</td></tr></table></body></html>
Попробуйте сами!

Результат¶

МесяцДата
Январь10.01.2014
Февраль10.01.2014

Установить границы таблицы можно также при помощи CSS свойства border, которое задаёт толщину и стиль рамки.

Пример¶

<!DOCTYPEhtml><html><head><title>Заголовок окна веб-страницы</title><style>table,th,td{border:1pxsolid#cccccc}</style></head><body><table><tr><th>Месяц</th><th>Дата</th></tr><tr><td>Январь</td><td>10.01.2018</td></tr><tr><td>Февраль</td><td>10.01.2018</td></tr></table></body></html>
Попробуйте сами!

Результат¶

МесяцДата
January10.01.2018
Февраль10.01.2018

Группировка элементов таблицы¶

Содержимое таблицы можно группировать в логические блоки. Для этого в HTML предусмотрены следующие теги:

  • Тег<thead>- (сокр. от англ. “table head” - "голова" таблицы) группирует одну или несколько верхних строк в таблице, то есть создает “шапку” таблицы.
  • Тег<tbody>- (сокр. от англ. “table body” - "тело" таблицы) группирует центральные строки в таблице с основным содержанием. (В одной таблице допускается использование нескольких таких блоков).
  • Тег<tfoot>- (сокр. от англ. “table footer” - нижний колонтитул таблицы) группирует нижние строки, формируя "подвал" таблицы. (В одной таблице можно использовать только один тег <tfoot>).

В коде тег <tfoot> ставится до тега <tbody>. Делается это потому, что браузеру необходимо отобразить нижнюю часть таблицы до того, как он получит все (потенциально многочисленные) данные, которые могут содержаться в теге <tbody>.

Пример¶

<!DOCTYPEhtml><html><head><title>Заголовок окна веб-страницы</title><style>table,th,td{border:1pxsolid#cccccc}</style></head><body><table><thead><tr><th>Месяц</th><th>Дата</th></tr></thead><tfoot><tr><td>Общая сумма</td><td>200$</td></tr></tfoot></table><tbody><tr><td>Июнь</td><td>150$</td></tr><tr><td>Июль</td><td>50$</td></tr></tbody></body></html>
Попробуйте сами!

Результат¶

МесяцДата
Общая сумма200$
Июнь150$Июль50$

Объединение ячеек¶

Для объединения ячеек в таблице используются атрибутыcolspanиrowspan. Атрибутcolspanустанавливает число ячеек, которые должны быть объединены по горизонтали, аrowspan- по вертикали.

Пример объединения ячеек по горизонтали¶

<!DOCTYPEhtml><html><head><title>Заголовок окна веб-страницы</title><style>table,th,td{border:1pxsolid#cccccc}</style></head><body><table><tr><thcolspan="2">Месяц и Дата</th></tr><tr><td>Январь</td><td>10.01.2018</td></tr><tr><td>Февраль</td><td>10.01.2018</td></tr></table></body></html>
Попробуйте сами!

Результат¶

Месяц и Дата
Январь10.01.2018
February10.01.2018

Пример объединения ячеек по вертикали¶

<!DOCTYPEhtml><html><head><title>Заголовок окна веб-страницы</title><style>table,th,td{border:1pxsolid#cccccc}</style></head><body><table><tr><th>Месяц</th><th>Дата</th></tr><tr><td>Январь</td><tdrowspan="2">10.01.2018</td></tr><tr><td>Февраль</td></tr></table></body></html>
Попробуйте сами!

Результат¶

МесяцДата
Январь10.01.2018
Февраль



Приносим извинения за это

Как мы можем улучшить это?

Спасибо за ваш отзыв!

Спасибо за ваш отзыв!

Считаете ли это полезным?ДаНет


Похожие статьи

We use cookies to improve user experience, and analyze website traffic.Accept

Основы работы с таблицами HTML - Изучите веб-разработку

Эта статья поможет вам начать работу с HTML-таблицами, охватывая самые основы, такие как строки и ячейки, заголовки, создание ячеек, охватывающих несколько столбцов и строк, и то, как сгруппировать все ячейки в столбце для стилизации.

Предварительные требования: Основы HTML (см. Введение в HTML).
Цель: Для базового знакомства с таблицами HTML.

Таблица - это структурированный набор данных, состоящий из строк и столбцов ( табличные данные ). Таблица позволяет вам быстро и легко находить значения, которые указывают на некую связь между различными типами данных, например, человеком и его возрастом, или днем ​​недели, или расписанием местного плавательного бассейна.

Таблицы

очень широко используются в человеческом обществе и использовались в течение долгого времени, о чем свидетельствует этот документ переписи населения США от 1800:

Поэтому неудивительно, что создатели HTML предоставили средства для структурирования и представления табличных данных в сети.

Как работает стол?

Суть стола в том, что он жесткий. Информация легко интерпретируется путем создания визуальных ассоциаций между заголовками строк и столбцов. Посмотрите, например, на приведенную ниже таблицу и найдите газового гиганта Юпитера с 62 лунами. Вы можете найти ответ, связав соответствующие заголовки строк и столбцов.

Данные о планетах нашей солнечной системы (Факты о планетах взяты из Таблицы данных о планетах НАСА - метрическая система.
Имя Масса (10 24 кг) Диаметр (км) Плотность (кг / м 3 ) Плотность (м / с 2 ) Продолжительность светового дня (часы) Расстояние от Солнца (10 6 км) Средняя температура (° C) Количество лун Банкноты
Планеты Земли Меркурий 0.330 4 879 5427 3,7 4222,6 57,9 167 0 Ближайший к Солнцу
Венера 4,87 12 104 5243 8,9 2802,0 108,2 464 0
Земля 5,97 12 756 5514 9.8 24,0 149,6 15 1 Наш мир
Марс 0,642 6,792 3933 3,7 24,7 227,9 -65 2 Красная планета
планет Юпитера Газовые гиганты Юпитер 1898 142 984 1326 23.1 9,9 778,6 -110 67 Самая большая планета
Сатурн 568 120 536 687 9,0 10,7 1433,5 -140 62
Ледяные гиганты Уран 86,8 51,118 1271 8,7 17.2 2872,5 -195 27
Нептун 102 49 528 1638 11,0 16,1 4495,1 -200 14
Карликовые планеты Плутон 0,0146 2,370 2095 0,7 153,3 5906.4 -225 5 Рассекречен как планета в 2006 году, но это остается спорным.

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

Стиль таблицы

Вы также можете посмотреть живой пример на GitHub! Вы заметите, что таблица там выглядит немного более читаемой - это потому, что таблица, которую вы видите выше на этой странице, имеет минимальный стиль, тогда как в версии GitHub применен более значительный CSS.

Не питайте иллюзий; Чтобы таблицы были эффективны в Интернете, вам необходимо предоставить некоторую информацию о стилях с помощью CSS, а также хорошую прочную структуру с помощью HTML. В этом модуле мы сосредоточены на части HTML; Чтобы узнать о части CSS, вы должны посетить нашу статью «Таблицы стилей» после того, как вы закончите здесь.

Мы не будем заострять внимание на CSS в этом модуле, но мы предоставили вам минимальную таблицу стилей CSS, которая сделает ваши таблицы более читабельными, чем стандартные, которые вы получаете без каких-либо стилей.Вы можете найти здесь таблицу стилей, а также можете найти HTML-шаблон, который применяет эту таблицу стилей - вместе они станут хорошей отправной точкой для экспериментов с HTML-таблицами.

Когда НЕ следует использовать HTML-таблицы?

Таблицы HTML должны использоваться для табличных данных - это то, для чего они предназначены. К сожалению, многие люди использовали HTML-таблицы для компоновки веб-страниц, например одна строка для заголовка, одна строка для столбцов содержимого, одна строка для нижнего колонтитула и т. д.Вы можете найти более подробную информацию и пример в разделе «Макеты страниц» нашего учебного модуля по специальным возможностям. Это часто использовалось, потому что поддержка CSS в браузерах была ужасной; макеты таблиц в наши дни встречаются гораздо реже, но вы все еще можете встретить их в некоторых уголках сети.

Короче говоря, использование таблиц для разметки, а не методов разметки CSS - плохая идея. Основные причины следующие:

  1. Макетные таблицы уменьшают доступность для пользователей с ослабленным зрением. : Программы чтения с экрана, используемые слепыми, интерпретируют теги, которые существуют на странице HTML, и зачитывают содержимое для пользователя.Поскольку таблицы не являются подходящим инструментом для разметки, а разметка более сложна, чем при использовании методов разметки CSS, вывод программ чтения с экрана будет сбивать с толку их пользователей.
  2. Таблицы создают суп тегов : Как упоминалось выше, макеты таблиц обычно включают более сложные структуры разметки, чем надлежащие методы макета. Это может привести к тому, что код будет сложнее писать, поддерживать и отлаживать.
  3. Таблицы не реагируют автоматически : при использовании правильных контейнеров макета (например,
    ,
    ,
    или
    ) их ширина по умолчанию равна 100%. своего родительского элемента.Таблицы, с другой стороны, по умолчанию имеют размер в соответствии с их содержимым, поэтому необходимы дополнительные меры, чтобы стиль макета таблицы эффективно работал на различных устройствах.

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

  1. Прежде всего, создайте локальную копию blank-template.html и minimal-table.css в новом каталоге на вашем локальном компьютере.
  2. Содержимое каждой таблицы заключено в эти два тега:
    .Добавьте их в тело вашего HTML.
  3. Самый маленький контейнер внутри таблицы - это ячейка таблицы, которая создается элементом («td» означает «данные таблицы»). Добавьте в теги таблицы следующее:
       Привет, я твоя первая сотовая.   
  4. Если нам нужна строка из четырех ячеек, нам нужно скопировать эти теги три раза. Обновите содержимое вашей таблицы, чтобы оно выглядело так:
       Привет, я твоя первая сотовая.
     Я твоя вторая камера. 
     Я твоя третья камера. 
     Я твоя четвертая камера.   

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

Чтобы остановить рост этой строки и начать размещение последующих ячеек во второй строке, нам нужно использовать элемент («tr» означает «строка таблицы»).Давайте сейчас исследуем это.

  1. Поместите четыре ячейки, которые вы уже создали, в теги , например:
      
       Привет, я твоя первая ячейка. 
       Я твоя вторая камера. 
       Я твоя третья камера. 
       Я твоя четвертая камера. 
      
  2. Теперь вы создали одну строку, попробуйте создать еще одну или две - каждая строка должна быть заключена в дополнительный элемент , при этом каждая ячейка содержится в .

Результат

В результате должна получиться таблица, которая выглядит примерно так:

  <таблица>
  
     Привет, я твоя первая ячейка. 
     Я твоя вторая камера. 
     Я твоя третья камера. 
     Я твоя четвертая камера. 
  

  
     Вторая строка, первая ячейка. 
     Ячейка 2 
     Ячейка 3 
     Ячейка 4.
  

  
  таблица {
    граница-коллапс: коллапс;
  }
  td, th {
    граница: сплошной черный 1px;
    отступ: 10 пикселей 20 пикселей;
  }
  

Теперь давайте обратим наше внимание на заголовки таблиц - специальные ячейки, которые идут в начале строки или столбца и определяют тип данных, содержащихся в строке или столбце (например, см. Ячейки «Человек» и «Возраст» в первый пример, показанный в этой статье). Чтобы проиллюстрировать, почему они полезны, взгляните на следующий пример таблицы.Сначала исходный код:

  <таблица>
  
     & nbsp; 
     Клоки 
     Флор 
     Элла 
     Хуан 
  
  
     Порода 
     Джек Рассел 
     Пудель 
     Streetdog 
     Кокер-спаниель 
  
  
     Возраст 
     16 
     9 
     10 
     5 
  
  
     Владелец 
     Свекровь 
     Я 
     Я 
     Невестка 
  
  
     Привычки в еде 
     Ест все, что осталось 
     Кусочки еды 
     Сытный любитель 
     Будет есть, пока не взорвется 
  
  
  таблица {
    граница-коллапс: коллапс;
  }
  td, th {
    граница: сплошной черный 1px;
    отступ: 10 пикселей 20 пикселей;
  }
  

Фактическая визуализированная таблица:

Проблема здесь в том, что, хотя вы можете понять, что происходит, не так просто сделать перекрестные ссылки на данные, как это могло бы быть.Если бы заголовки столбцов и строк чем-то выделялись, было бы намного лучше.

Попробуем улучшить эту таблицу.

  1. Сначала создайте локальную копию наших файлов dog-table.html и minimal-table.css в новом каталоге на вашем локальном компьютере. HTML содержит тот же пример Dogs, который вы видели выше.
  2. Чтобы распознать заголовки таблицы как заголовки, как визуально, так и семантически, вы можете использовать элемент (th означает «заголовок таблицы»).Это работает точно так же, как , за исключением того, что обозначает заголовок, а не обычную ячейку. Войдите в свой HTML и измените все элементы , окружающие заголовки таблицы, на элементы .
  3. Сохраните HTML-код и загрузите его в браузер, и вы должны увидеть, что заголовки теперь выглядят как заголовки.

Мы уже частично ответили на этот вопрос - легче найти данные, которые вы ищете, когда заголовки четко выделяются, а дизайн в целом выглядит лучше.

Примечание : Заголовки таблиц имеют некоторый стиль по умолчанию - они выделены жирным шрифтом и центрированы, даже если вы не добавляете свой собственный стиль к таблице, чтобы помочь им выделиться.

Заголовки таблиц

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

Иногда нам нужно, чтобы ячейки занимали несколько строк или столбцов. Возьмем следующий простой пример, в котором показаны названия обычных животных. В некоторых случаях мы хотим отображать имена самцов и самок рядом с именем животного. Иногда мы этого не делаем, и в таких случаях мы просто хотим, чтобы имя животного охватывало всю таблицу.

Начальная разметка выглядит так:

  <таблица>
  
     Животные 
  
  
     Бегемот 
  
  
     Лошадь 
     Кобыла 
  
  
     Жеребец 
  
  
     Крокодил 
  
  
     Курица 
     Курица 
  
  
     Петух 
  
  
  таблица {
    граница-коллапс: коллапс;
  }
  td, th {
    граница: сплошной черный 1px;
    отступ: 10 пикселей 20 пикселей;
  }
  

Но результат не дает нам того, что мы хотим:

Нам нужен способ, чтобы «Животные», «Бегемот» и «Крокодил» занимали две колонки, а «Лошадь» и «Курица» - две строки вниз.К счастью, заголовки и ячейки таблицы имеют атрибуты colspan и rowspan , которые позволяют нам делать именно эти вещи. Оба принимают безразмерное числовое значение, равное количеству строк или столбцов, которые вы хотите охватить. Например, colspan = "2" превращает ячейку в два столбца.

Давайте использовать colspan и rowspan , чтобы улучшить эту таблицу.

  1. Сначала создайте локальную копию наших animals-table.html и minimal-table.css в новом каталоге на вашем локальном компьютере. HTML содержит тот же пример животных, который вы видели выше.
  2. Затем используйте colspan , чтобы разделить «Животные», «Бегемот» и «Крокодил» на два столбца.
  3. Наконец, используйте rowspan , чтобы сделать "Horse" и "Chicken" на двух строках.
  4. Сохраните и откройте свой код в браузере, чтобы увидеть улучшения.

Стиль без

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

Возьмем следующий простой пример:

  <таблица>
  
     Данные 1 
     Данные 2 
  
  
     Калькутта 
     Оранжевый 
  
  
     Роботы 
     Джаз 
  
  
  таблица {
    граница-коллапс: коллапс;
  }
  td, th {
    граница: сплошной черный 1px;
    отступ: 10 пикселей 20 пикселей;
  }
  

Что дает нам следующий результат:

Это не идеально, так как мы должны повторить информацию о стилях для всех трех ячеек в столбце (мы, вероятно, установили бы класс для всех трех в реальном проекте и укажем стиль в отдельной таблице стилей).

Стилизация с помощью

Вместо этого мы можем указать информацию один раз в элементе . Элементы указаны внутри контейнера сразу под открывающим тегом

. Мы могли бы создать тот же эффект, что и выше, указав нашу таблицу следующим образом:

  <таблица>
  
Данные 1 Данные 2
Калькутта Оранжевый
Роботы Джаз

Фактически мы определяем два «столбца стиля», один из которых определяет информацию о стиле для каждого столбца.Мы не стилизуем первый столбец, но мы все равно должны включить пустой элемент - если бы мы этого не сделали, стиль был бы применен только к первому столбцу.

Если бы мы хотели применить информацию о стиле к обоим столбцам, мы могли бы просто включить один элемент с атрибутом span на нем, например:

  
  
  

Так же, как colspan и rowspan , span принимает безразмерное числовое значение, которое указывает количество столбцов, к которым вы хотите применить стиль.

Активное обучение: colgroup и col

Теперь пора попробовать самому.

Ниже вы можете увидеть расписание учителя иностранных языков. В пятницу у нее новый класс, в котором весь день преподается голландский, но она также преподает немецкий несколько уроков по вторникам и четвергам. Она хочет выделить столбцы, содержащие дни, в которые она преподает.

Восстановите таблицу, выполнив следующие действия.

  1. Сначала создайте локальную копию нашего файла timetable.html в новом каталоге на вашем локальном компьютере.HTML содержит ту же таблицу, которую вы видели выше, без информации о стиле столбца.
  2. Добавьте элемент вверху таблицы, сразу под тегом , в который вы можете добавить элементы (см. Оставшиеся шаги ниже).
  3. Первые два столбца следует оставить без стиля.
  4. Добавьте цвет фона к третьему столбцу. Значение атрибута стиля - background-color: # 97DB9A;
  5. Установите отдельную ширину для четвертого столбца.Значение атрибута стиля - width: 42px;
  6. Добавьте цвет фона к пятому столбцу. Значение атрибута стиля - background-color: # 97DB9A;
  7. Добавьте другой цвет фона и рамку к шестому столбцу, чтобы обозначить, что это особенный день и что она ведет новый класс. Значения для атрибута стиля : background-color: # DCC48E; граница: сплошная 4px # C1437A;
  8. Последние два дня - свободные, поэтому просто установите для них не цвет фона, а заданную ширину; значение атрибута стиля равно width: 42px;
  9. Посмотрите, как вы справляетесь с примером.Если вы застряли или хотите проверить свою работу, вы можете найти нашу версию на GitHub как timetable-fixed.html (также смотрите вживую).

    Это почти завершает основы работы с таблицами HTML. В следующей статье мы рассмотрим несколько более продвинутых функций таблиц и начнем думать, насколько они доступны для людей с ослабленным зрением.

    Создайте таблицу HTML быстро и легко с помощью нашего примера кода »

    HTML / Создайте таблицу HTML быстро и легко с помощью нашего примера кода

    в тегах HTML

    Раскрытие информации: Ваша поддержка помогает поддерживать работу сайта! Мы зарабатываем реферальный сбор за некоторые услуги, которые мы рекомендуем на этой странице.Узнать больше
    Что позволяет быстро и легко создать HTML-таблицу с помощью нашего примера кода ?
    Элемент
    используется вместе с дочерними элементами, такими как , <фут>
    , и другими, для добавления табличных данных в документ HTML.
    Дисплей
    встроенный

    Пример кода

      <таблица>
      
    Три самых популярных библиотеки JavaScript
    Библиотека jQuery Bootstrap Modernizr
    Доля рынка 96.1% 17,0% 14,3%
    Абсолютное использование 70,4% 12,4% 10,5%
    Доля рынка - это процент сайтов, использующих любую библиотеку JavaScript, которая использует указанную библиотеку. Абсолютное использование - это процент опрошенных веб-сайтов, включая те, которые не используют библиотеки JavaScript, которые используют указанную библиотеку.Все данные получены от W3Techs и верны по состоянию на июнь 2016 года.
    Три самых популярных библиотеки JavaScript
    Библиотека jQuery Bootstrap Modernizr
    Доля рынка 96,1% 17,0% 17,0%.3%
    Абсолютное использование 70,4% 12,4% 10,5%
    Доля рынка - это процент сайтов, использующих любую библиотеку JavaScript, использующую указанную библиотеку. Абсолютное использование - это процент опрошенных веб-сайтов, включая те, которые не используют библиотеки JavaScript, которые используют указанную библиотеку. Все данные получены от W3Techs и точны по состоянию на июнь 2016 года.

    Таблицы для данных, а не макет

    В первые дни Интернета для управления макетом веб-страниц обычно использовались таблицы HTML.Тогда это была плохая идея, а сейчас это еще хуже. Использование таблиц таким образом не только семантически некорректно, но и может создать проблемы с доступностью и значительно усложнить создание адаптивного дизайна веб-сайта.

    Итак, как правильно использовать таблицы HTML? Для отображения табличных данных. Некоторые наборы данных проще всего понять и усвоить, если они представлены в виде таблицы. Если у вас есть такой набор данных, который нужно добавить на веб-сайт, таблица HTML - правильный инструмент для этой работы.

    Как вы можете видеть в нашем фрагменте кода выше, существует множество элементов, которые используются при создании таблицы HTML.Мы составили руководство по таблицам, которое поможет вам освоить все эти элементы. Мы также составили руководство по стилизации таблиц, которое поможет вам создавать таблицы, которые будут красиво отображаться на любом устройстве - проще сказать, чем сделать.

    Адам - ​​технический писатель, специализирующийся на документации и руководствах для разработчиков.

    Атрибуты быстрого и простого создания HTML-таблицы с помощью нашего примера кода

    Навигация по сообщениям

    Как создавать таблицы в HTML

    Введение

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

    Предварительные требования

    • Знакомство с HTML. Если вы не знакомы с HTML или нуждаетесь в обновлении, вы можете просмотреть первые три руководства из нашей серии руководств «Как создать веб-сайт с помощью HTML».
    • Файл index.html для практики создания таблиц HTML. Если вы не знаете, как создать файл index.html , следуйте инструкциям в нашем кратком руководстве «Как настроить проект HTML».

    Основы HTML-таблиц

    Таблица HTML создается с открывающим тегом

    и закрывающим тегом
    . Внутри этих тегов данные организованы в строки и столбцы с использованием тегов открытия и закрытия строки таблицы и тегов открытия и закрытия данных таблицы .

    Строка таблицы теги используются для создания строки данных. Внутри таблицы открытия и закрытия теги , данные таблицы открытия и закрытия используются для организации данных в столбцы.

    В качестве примера приведем таблицу с двумя строками и тремя столбцами:

      <таблица>
      
         Столбец 1 
         Столбец 2 
         Столбец 3 
      
      
         Столбец 1 
         Столбец 2 
         Столбец 3 
      
    
      

    Чтобы изучить, как таблицы HTML работают на практике, вставьте приведенный выше фрагмент кода в индекс .html или другой html-файл, который вы используете в этом руководстве.

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

    Теперь на вашей веб-странице должна быть таблица с тремя столбцами и двумя строками:

    Чтобы добавить дополнительную строку, добавьте выделенный элемент в нижнюю часть таблицы:

      <таблица>
      
         Столбец 1 
         Столбец 2 
         Столбец 3 
      
      
         Столбец 1 
         Столбец 2 
         Столбец 3 
      
      
         Столбец 1 
         Столбец 2 
         Столбец 3 
      
    
      

    Сохраните результаты и проверьте их в браузере.Вы должны получить что-то вроде этого:

    Чтобы добавить еще один столбец, попробуйте добавить дополнительный элемент данных таблицы внутри каждой строки таблицы элементов:

      <таблица>
      
         Столбец 1 
         Столбец 2 
         Столбец 3 
         Столбец 4 
      
      
         Столбец 1 
         Столбец 2 
         Столбец 3 
         Столбец 4 
      
      
         Столбец 1 
         Столбец 2 
         Столбец 3 
         Столбец 4 
      
    
      

    Сохраните результаты и проверьте их в браузере.На вашей веб-странице должна отображаться таблица с тремя строками и четырьмя столбцами:

    Добавление границы к таблице

    Как правило, таблицы следует стилизовать с помощью CSS. Если вы не знаете CSS, вы можете добавить легкий стиль с помощью HTML, добавив атрибуты к элементу

    . Например, вы можете добавить границу к таблице с атрибутом border :

      
    Ряд 1 Строка 2 Строка 3
    Ряд 1 Строка 2 Строка 3

    Добавьте выделенный атрибут границы в свою таблицу и проверьте результаты в браузере.(Вы можете очистить файл index.html и вставить фрагмент кода HTML выше.) Сохраните файл и загрузите его в браузере. Теперь ваша таблица должна иметь границу, окружающую каждую из ваших строк и столбцов, например:

    Добавление заголовков в строки и столбцы

    Заголовки можно добавлять к строкам и столбцам для облегчения чтения таблиц. Заголовки таблиц автоматически выделяются полужирным шрифтом и центрированным текстом, чтобы визуально отличить их от данных таблицы. Заголовки также делают таблицы более доступными, поскольку они помогают людям, использующим программы чтения с экрана, перемещаться по данным таблицы.

    Заголовки добавляются с помощью открывающих и закрывающих тегов . Чтобы добавить заголовки столбца , вы должны вставить новый элемент в верхнюю часть таблицы, где вы можете добавить имена столбцов с помощью тегов .

    Очистите файл index.html и добавьте строку заголовков столбцов с помощью следующего фрагмента кода:

      
    Заголовок столбца 1 Заголовок столбца 2 Заголовок столбца 3

    Сохраните индекс .html и перезагрузите его в своем браузере. Вы должны получить что-то вроде этого:

    Ваша веб-страница должна отображать одну строку заголовков столбцов. Обратите внимание, что заголовок первого столбца пуст. Вы можете добавить сюда заголовок столбца, если хотите.

    Чтобы добавить заголовки строк, необходимо добавить открывающие и закрывающие теги в качестве первого элемента в каждой строке таблицы элемента. Добавьте заголовки строк и данные, добавив выделенный фрагмент кода под между закрывающим тегом и закрывающим тегом

    таблицы в вашем индексе .html файл:

      
    Заголовок столбца 1 Заголовок столбца 2 Заголовок столбца 3
    Заголовок 1 строки Данные Данные Данные
    Заголовок 2 строки Данные Данные Данные
    Заголовок 3 строки Данные Данные Данные

    Сохраните индекс .html и перезагрузите его в своем браузере. Вы должны получить что-то вроде этого:

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

    Заключение

    В этом руководстве вы создали таблицу HTML, добавили дополнительные строки и столбцы и создали заголовки для строк и столбцов.

    Если вы хотите узнать больше о HTML, вы можете ознакомиться с нашей серией руководств «Как создать веб-сайт с помощью HTML».Чтобы узнать о том, как использовать CSS для стилизации элементов HTML (включая таблицы), посетите нашу серию руководств «Как создать веб-сайт с помощью CSS».

    Как создавать и редактировать таблицы в HTML

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

    В то время как CMS или конструктор веб-сайтов предложат модуль для создания таблиц одним нажатием кнопки, вы можете создавать таблицы с нуля с помощью некоторых базовых HTML и CSS.

    В этом посте мы рассмотрим все, что вам нужно знать об элементе таблицы HTML, в том числе:

    Зачем создавать таблицу в HTML

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

    Вот почему мы используем таблицы в блогах HubSpot. Ниже приведена таблица в конце обзора SiteGround vs. HostGator, в которой кратко излагается статья объемом 2 000 слов менее чем в 200 словах.

    Хотя эта таблица была создана одним нажатием кнопки в CMS Hub, вы также можете использовать HTML и CSS для создания таблиц с нуля. Давайте рассмотрим процесс, описанный ниже, на различных примерах.

    Как создать таблицу в HTML

    Чтобы создать таблицу в HTML, используйте тег

    .Внутри этого тега таблицы вы разместите теги , определяет строку таблицы.
  10. Тег

  11. Затем вы создадите еще три ряда. Внутри этих тегов

    вы должны разместить теги


    Затем вы должны заключить все четыре строки в тег

    и .

    • Тег
    определяет заголовок таблицы. По умолчанию любой текст в теге выделяется полужирным шрифтом и выравнивается по центру.
  12. Тег
  13. определяет данные таблицы (т.е. ячейки таблицы). По умолчанию любой текст в теге не полужирный и выровнен по левому краю.

    Важно отметить, что тег

    может содержать ряд HTML-элементов, а не только текст.Возможные элементы включают изображения, нумерованные или маркированные списки и другие таблицы.

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

    Пример HTML-таблицы

    Допустим, вы создаете таблицу для контактной информации своих сотрудников. Вы хотите указать имя, должность и адрес электронной почты каждого из трех ваших сотрудников. В этом случае вам понадобятся три столбца и четыре строки.

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

    . Вот как будет выглядеть этот код:

      
    Имя Должность Адрес электронной почты
    , содержащие имя, должность и адрес электронной почты каждого сотрудника.Вот как будет выглядеть код для второй строки:

      
    Анна Фицджеральд Штатный писатель [email protected]
    . В целом ваш код будет выглядеть примерно так:

      

    Имя Должность Адрес электронной почты
    Анна Фицджеральд Штатный писатель example @ company.com
    Джон Смит Менеджер по маркетингу [email protected]

    Зендая Грейс Генеральный директор [email protected]

    Вот как таблица будет выглядеть в интерфейсе вашего веб-сайта:

    Обратите внимание, что ширина каждого столбца достаточно велика, чтобы уместить текст, и что нет границ, отделяющих один столбец или строку от следующего.Результат выглядит загроможденным и трудным для чтения.

    Ниже мы рассмотрим несколько способов облегчить чтение этой таблицы.

    Редактирование границы таблицы

    По умолчанию таблицы не имеют границ. Чтобы добавить границы, используйте свойство CSS border.

    Допустим, я хочу добавить простую черную рамку вокруг моей таблицы выше. Тогда мне просто нужно будет добавить следующий CSS в раздел заголовка моего HTML-файла или во внешнюю таблицу стилей.

      
    table, th, td {

    border: 1px сплошной черный;

    }

    HTML в основной части файла HTML останется прежним.

    Вот как это будет выглядеть на интерфейсе:

    Обратите внимание, что границы вокруг таблицы, заголовка таблицы и ячеек таблицы отделены друг от друга. Чтобы свернуть их, используйте свойство CSS border-collapse. Вы просто добавляете это свойство в свой набор правил CSS и устанавливаете значение «свернуть». Вот как теперь будет выглядеть ваш CSS:

      
    table, th, td {

    border: 1px сплошной черный;

    граница-обрушение: обрушение;

    }

    Опять же, HTML остается прежним.

    Вот как это будет выглядеть на интерфейсе:

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

    Редактирование заполнения таблицы

    Как упоминалось выше, таблицы по умолчанию имеют ровно столько, сколько требуется для их содержимого. Итак, ваш второй шаг - добавить больше места вокруг содержимого ячеек таблицы. Для этого используйте свойство CSS padding.

    Поскольку заполнение определяет расстояние между содержимым ячейки и ее границей, вам нужно добавить заполнение только к заголовку таблицы и элементам данных таблицы, но не к самому элементу таблицы.Это означает, что вы создадите новый набор правил CSS, который использует только два селектора CSS: th и td. Затем вы должны установить для свойства CSS padding любое желаемое значение. Ниже я установлю его на 10 пикселей.

    Вот как будет выглядеть CSS:

      
    table, th, td {

    border: 1px сплошной черный;

    граница-обрушение: обрушение;

    }

    th, td {

    padding: 10px;

    }

    HTML остается прежним.

    Вот как это будет выглядеть на интерфейсе:

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

    Редактирование заголовка таблицы

    Чтобы выделить заголовок таблицы, вы можете сделать что-нибудь простое, например добавить цвет фона к этим ячейкам. Вам просто нужно использовать селектор элемента «th», чтобы применить уникальные свойства стиля только к заголовку.

    Ниже вы будете использовать тот же CSS, что и выше, но добавить третий набор правил, содержащий свойство CSS background-color. Затем вы можете установить для свойства конкретное значение цвета, используя шестнадцатеричный цветовой код. В этом примере я буду использовать шестнадцатеричный цветовой код для мягкого оттенка желтого.

    Вот код CSS:

      
    table, th, td {

    border: 1px сплошной черный;

    граница-обрушение: обрушение;

    }

    th, td {

    padding: 10px;

    }

    th {

    background-color: # FDDF95;

    }

    Вот как это будет выглядеть на интерфейсе:

    Эта таблица выглядит все лучше и лучше! Теперь предположим, что вы хотите стилизовать столбец вместо строки. Ниже мы рассмотрим, как это сделать.

    Изменение ширины столбца таблицы

    Если вам нужно было угадать, как задать стиль столбцу, вы могли бы подумать, что вам нужно добавить атрибут стиля к ячейке каждой строки. Это было бы неприятно, правда? Хорошая новость в том, что в этом нет необходимости.

    Вместо этого можно использовать тег . Этот тег определяет группу из одного или нескольких столбцов в таблице, поэтому вы можете применять CSS к столбцам, а не ячейку за ячейкой.

    Чтобы создать эту группу, вы должны добавить тег в раздел body вашего HTML-файла.Затем внутри этого тега вы добавляете тег для каждого столбца в таблице или для каждого столбца, который хотите стилизовать. Вот как выглядит HTML-код:

      

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

    Вот как будет выглядеть CSS:

      
    table, th, td {

    border: 1px сплошной черный;

    граница-обрушение: обрушение;

    }

    th, td {

    padding: 10px;

    }

    th {

    background-color: # FDDF95;

    }

    colgroup {

    width: 250px;

    }

    Вот как будет выглядеть HTML:

      

    Имя Должность Адрес электронной почты
    Анна Фитцджеральд Штатный писатель

    пример @ компания.com
    Джон Смит Менеджер по маркетингу [email protected]

    Зендая Грейс Генеральный директор [email protected]

    Вот как это будет выглядеть на интерфейсе:

    Допустим, вы хотите изменить ширину только одного столбца, например столбца, содержащего адреса электронной почты.Вместо добавления внутреннего CSS в раздел заголовка файла HTML вы можете просто добавить атрибут стиля к третьему тегу в разделе тела. В этом атрибуте вы должны добавить и указать свойство ширины. Вот как будет выглядеть тег :

      


    Вот как это будет выглядеть на интерфейсе:

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

    Диапазон столбцов таблицы HTML

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

    Чтобы ячейка занимала более одного столбца, можно использовать атрибут colspan. Просто добавьте его к открывающему тегу заголовка таблицы (или ячейки таблицы) и установите для него количество столбцов, которое вы хотите, чтобы он охватил.

    В приведенном ниже примере предположим, что вы хотите добавить в таблицу номера мобильных и домашних телефонов своих сотрудников.В этом случае вы должны добавить новый тег с атрибутом colspan, установленным на «2». Затем вы должны добавить еще два тега , содержащих номера телефонов сотрудников, в каждую строку.

    Примечание: мы будем использовать тот же CSS из приведенного выше примера.

    Вот как будет выглядеть HTML:

     
     

    <таблица>

    Имя

    Должность

    Адрес электронной почты

    Телефон

    Анна Фицджеральд

    Штатный писатель

    пример @ компания.ru

    888-888-880

    888-888-881

    Джон Смит

    Менеджер по маркетингу

    [email protected]

    888-888-882

    888-888-883

    Зендая Грейс

    Генеральный директор

    example2 @ company.ru

    888-888-884

    888-888-885

    Вот как это будет выглядеть на интерфейсе:

    Теперь, когда вы изменили отступы, ширину столбцов, выравнивание и другие параметры таблицы, вы, возможно, ищете еще несколько способов выделить свою таблицу на странице. Один из способов - изменить цвет фона не только заголовка, но и всей таблицы.Давайте посмотрим, как это сделать.

    Редактирование цвета фона таблицы

    Чтобы изменить цвет фона всей таблицы, а не только ее заголовка, вы просто определяете свойство цвета фона CSS как для заголовка таблицы, так и для элементов данных таблицы. Вот как будет выглядеть ваш CSS:

      
    table, th, td {

    border: 1px сплошной черный;

    граница-обрушение: обрушение;

    }

    th, td {

    padding: 10px;

    цвет фона: # FDDF95;

    }

    Вот как будет выглядеть HTML:

     
     

    <таблица>

    Имя

    Должность

    Адрес электронной почты

    Анна Фицджеральд

    Штатный писатель

    пример @ компания.ru

    Джон Смит

    Менеджер по маркетингу

    [email protected]

    Зендая Грейс

    Генеральный директор

    [email protected]

    Вот как это будет выглядеть на интерфейсе:

    Если вы хотите, чтобы заголовок таблицы и элементы данных таблицы имели разные цвета фона, просто используйте два селектора элементов, «th» и «td», и установите свойство цвета фона на разные шестнадцатеричные коды цвета или названия цветов.

    Вот как может выглядеть CSS:

      
    table, th, td {

    border: 1px сплошной черный;

    граница-обрушение: обрушение;

    }

    th, td {

    padding: 10px;

    }

    th {

    background-color: # FFB500;

    }

    td {

    background-color: # FDDF95;

    }

    HTML остается прежним.

    Вот как это будет выглядеть на интерфейсе:

    Еще один способ убедиться, что ваша таблица не затеряется среди прочего содержимого на странице, - это увеличить размер шрифта.Ниже мы рассмотрим, как это сделать.

    Размер шрифта таблицы HTML

    Чтобы изменить размер шрифта в таблице HTML, используйте свойство CSS font-size. Вы можете использовать это свойство для заголовка таблицы и элементов данных таблицы. Но допустим, вы хотите увеличить размер шрифта только заголовка таблицы.

    Тогда ваш CSS будет выглядеть так:

      
    table, th, td {

    border: 1px сплошной черный;

    граница-обрушение: обрушение;

    }

    th, td {

    padding: 10px;

    }

    th {

    background-color: # FFB500;

    размер шрифта: 20 пикселей;

    }

    td {

    background-color: # FDDF95;

    }

    Ваш HTML останется прежним.

    Вот как это будет выглядеть на интерфейсе:

    Когда вы будете в основном довольны внешним видом своей таблицы, возможно, вам будет интересно изменить ее положение на странице. Один из способов сделать это - изменить его выравнивание по умолчанию. Давайте посмотрим, как это сделать ниже.

    Центрирование таблицы в HTML

    По умолчанию элементы, включая элемент таблицы, выравниваются по левому краю на странице. Если вы хотите разместить его по центру страницы, используйте свойство CSS margin.

    Сначала вы добавите имя класса к элементу таблицы.В приведенном ниже примере я буду использовать имя «центр». Затем вы можете использовать селектор классов только для выравнивания по центру элемента таблицы. Остальные элементы на странице останутся выровненными по левому краю. Вот как будет выглядеть HTML:

      

    Имя Должность Адрес электронной почты
    Анна Фитцджеральд Штатный писатель

    пример @ компания.com
    Джон Смит Менеджер по маркетингу [email protected]

    Зендая Грейс Генеральный директор [email protected]

    Затем вы добавите еще один набор правил в свой CSS.С помощью селектора класса «.center» вы установите для свойств margin-left и margin-right значение «auto». Таким образом, таблица будет занимать любую ширину, указанную CSS или содержимым, которое она содержит, а браузер будет гарантировать, что оставшееся пространство разделено поровну между левым и правым полями.

    Вот как все вместе будет выглядеть CSS:

     
     

    стол, тыс, т.д {

    граница: сплошной черный 1px;

    граница-коллапс: коллапс;

    }

    т, тд {

    отступ: 10 пикселей;

    }

    тыс. {

    цвет фона: # FFB500;

    размер шрифта: 20 пикселей;

    }

    тд {

    цвет фона: # FDDF95;

    }

    .центр {

    крайнее левое: авто;

    поле справа: авто;

    }

    Вот как это будет выглядеть на интерфейсе:

    Вложенные таблицы в HTML

    Вы можете вкладывать таблицы - или создавать таблицы внутри таблиц - в HTML. Чтобы создать вложенную таблицу, просто создайте другой элемент таблицы с заголовком таблицы, строкой таблицы и тегами данных таблицы и поместите его в любой тег существующей таблицы.

    Допустим, я хочу перечислить домашний и мобильный телефон сотрудника во вложенной таблице.

    Вот как может выглядеть CSS:

     
     

    стол, тыс, т.д {

    граница: сплошной черный 1px;

    граница-коллапс: коллапс;

    }

    т, тд {

    отступ: 10 пикселей;

    }

    тыс. {

    цвет фона: # FDDF95;

    }

    #nested {

    цвет фона: #EEEEEE;

    }

    Вот как может выглядеть HTML:

     
     

    <таблица>

    Имя

    Должность

    Адрес электронной почты

    Вложенная таблица

    Анна Фицджеральд

    Штатный писатель

    пример @ компания.ru

    <таблица>

    Домашний телефон

    Сотовый телефон

    888-888-880

    888-888-881

    Вот как это будет выглядеть на передней панели:

    Создание таблиц в HTML

    Если вы хотите размещать на своем веб-сайте большие объемы данных, используйте таблицы, чтобы представить эти данные таким образом, чтобы посетители могли их легко прочитать и понять.Любой из описанных выше шагов может помочь вам добавить и настроить таблицы на ваш уникальный веб-сайт. Вам просто нужно немного ознакомиться с HTML и CSS.

    Как добавить границу в HTML-таблицу

    Чтобы добавить границу в HTML

    , вам сначала нужно знать, как создать HTML-таблицу. В HTML вы можете создавать таблицы, используя тег
    вместе с тегами ,
    и .

    Узнайте, как создать таблицу HTML здесь.

    Создание границы для таблицы HTML¶

    После создания таблицы HTML вы должны добавить к ней границу, поскольку по умолчанию границы не добавляются.Во-первых, давайте посмотрим на пример, в котором мы используем атрибут границы HTML.

    Пример создания HTML-таблицы с атрибутом границы: ¶

      
    
      
         Название документа 
      
      
        
    Человек Возраст
    Энн 19
    Сьюзи 22
    Попробуйте сами »

    Результат¶

    Человек Возраст
    Ann 19
    Susie 22

    В любом случае, мы рекомендуем использовать свойство CSS border для добавления границы к вашим таблицам.Чтобы добавить границу к вашей таблице, вам нужно определить <таблица>

    Человек Возраст
    Энн 19
    Сьюзи 22
    Попробуйте сами »

    Как изменить стиль границы таблицы HTML с помощью CSS¶

    Вы можете придать стиль своей таблице, используя сокращенное свойство CSS border или border-width, border-style, border- свойства цвета, отдельно.См. Пример ниже, чтобы получить видимый результат этих свойств.

    Пример изменения стиля границы таблицы HTML с помощью CSS: ¶

      
    
      
         Название документа 
        <стиль>
          стол {
            бордюрный стиль: гребень;
            ширина границы: 150 пикселей;
            цвет границы: # 8ebf42;
            цвет фона: # d9d9d9;
          }
          th {
            граница: 5px solid # 095484;
          }
          td {
            граница: углубление 20px # 1c87c9;
          }
        
      
      
        <таблица>
          
             Человек 
             Возраст 
          
          
             Энн 
             19 
          
          
             Сьюзи 
             22 
          
        
      
      
    Попробуйте сами »

    Если вы не хотите, чтобы граница проходила по всему столу (или если вам нужны разные границы с каждой стороны таблицы), вы можете использовать любое из следующих свойств: border -top, border-right, border-bottom и border-left.

    Пример добавления нижних границ в HTML-таблицу: ¶

      
    
      
         Название документа 
        <стиль>
          стол {
            граница-коллапс: коллапс;
          }
          тд,
          th {
            отступ: 10 пикселей;
            нижняя граница: 2px solid # 8ebf42;
            выравнивание текста: центр;
          }
        
      
      
        <таблица>
          
             Человек 
             Возраст 
          
          
             Энн 
             19 
          
          
             Сьюзи 
             22 
          
        
      
      
    Попробуйте сами »

    Как получить скругленные границы¶

    Вы также можете получить скругленные границы, используя свойство CSS border-radius.Помните, что в этом случае вы должны удалить свойство border-collapse для правильной работы. Давайте посмотрим на пример, где все элементы таблицы округлены.

    Пример добавления закругленных границ к HTML-таблице: ¶

      
    
      
         Название документа 
        <стиль>
          стол,
          тд,
          th {
            отступ: 10 пикселей;
            граница: 2px solid # 1c87c9;
            радиус границы: 5 пикселей;
            цвет фона: # e5e5e5;
            выравнивание текста: центр;
          }
        
      
      
        <таблица>
          
             Человек 
             Возраст 
          
          
             Энн 
             19 
          
          
             Сьюзи 
             22 
          
        
      
      
    Попробуйте сами »

    Как добавить рамку к элементам

    ,

    или

    Таким же образом вы можете добавить рамку к другим элементам HTML.Давайте посмотрим на пример добавления границ к элементам

    ,

    и

    .

    Пример добавления границ к элементам

    ,

    и

    : ¶
      
    
      
         Название документа 
        <стиль>
          h3,
          div,
          п {
            отступ: 10 пикселей;
          }
          h3 {
            граница: 3px двойной # 1c87c9;
            цвет фона: # d9d9d9;
          }
          div {
            граница слева: 5px solid # 1c87c9;
            цвет фона: #cccccc
          }
          п {
            граница: канавка 10px # 8ebf42;
          }
        
      
      
        

    Пример границы

    Пример Div для свойства границы.

    Какой-то абзац с рамкой.

    Попробуйте сами »

    Если вы хотите, чтобы границы абзацев были закругленными, следуйте приведенному ниже примеру, чтобы узнать, как это сделать. Используйте свойство border-radius, чтобы получить желаемый результат.

    Пример создания закругленных границ на абзацах: ¶

      
    
      
         Название документа 
        <стиль>
          п {
            отступ: 10 пикселей;
          }
          п.обычный {
            граница: 2px solid # 1c87c9;
          }
          p.round1 {
            граница: 2px solid # 1c87c9;
            радиус границы: 5 пикселей;
          }
          p.round2 {
            граница: 2px solid # 1c87c9;
            радиус границы: 8 пикселей;
          }
          p.round3 {
            граница: 2px solid # 1c87c9;
            радиус границы: 12 пикселей;
          }
        
      
      
        

    Закругленные границы

    Нормальная граница

    Круглая граница

    Круглая граница

    Круглая граница

    Попробуйте сами »

    HTML | Таблицы - GeeksforGeeks

    < html >

    <

    table, th, td {

    border: 1px сплошной черный;

    граница-обрушение: обрушение;

    }

    th, td {

    padding: 5px;

    выравнивание текста: по левому краю;

    }

    таблица # t01 {

    ширина: 100%;

    цвет фона: # f2f2d1;

    }

    стиль >

    головка >

    02

    02

    < таблица стиль = "ширина: 100%" >

    < th > Имя th >

    < th > Фамилия th >

    >

    th >

    tr >

    < tr >

    < td > Priya td >

    td >

    < td > 24 td >

    9000 tr> < tr >

    < td > Arun td >

    < td td td td >

    < td > 32 td >

    tr >

    < tr >

    < td / < td > Watson td >

    < td > 41 td > tr >

    таблица >

    < br /> >

    < таблица id = "t01" >

    < tr >

    < th > Имя < th > Фамилия th >

    < th > Возраст th >

    03 90/

    03 >

    < tr >

    < td > Priya td td Шарма td >

    < td > 24 td >

    tr >

    < tr >

    03 td >

    < td > Singh td >

    < td >

    tr >

    < tr >

    < td 9030

    < td > Watson td >

    903 09 < td > 41 td >

    tr > >

    body >

    html >

    Сортируемые и доступные таблицы: TechWeb: Boston University

    Как сделать сортируемые таблицы

    Добавление класса «сортируемый» к элементу < table > обеспечивает поддержку сортировки по значению столбца.При нажатии на заголовки столбцов строки таблицы будут отсортированы по значению этого столбца. Таблицы должны использовать теги

    и <тело> ...
    Пример сортируемой таблицы - щелкните любую из ячеек заголовка этой таблицы, чтобы отсортировать по этому столбцу:

    Золотая медаль 2012 г., прыгунья на Олимпийских играх

    для работы функции сортировки. Тег определяет ячейку заголовка в таблице HTML. В таблице HTML есть два типа ячеек:

    • Ячейки заголовка - содержат информацию заголовка (создается с помощью элемента
    )
  14. Стандартные ячейки - содержат данные (созданные с помощью элемента
  15. )

    Вам нужно будет создать или отредактировать таблицу с кодами заголовков в текстовом / HTML-представлении WordPress, а не в визуальном представлении, чтобы добавить класс к элементу таблицы и добавить элементы заголовка таблицы.Например, чтобы составить пример таблицы для дайверов с золотой медалью 2012, приведенной ниже, начало кода HTML-таблицы:

      <таблица> 
      
    Спортсмен Возраст Страна Золотые медали
    Дэвид Будиа
    Спортсмен Возраст Страна Золотые медали
    Дэвид Будиа 23 США 1
    Чен Руолинь 19 Китай 2
    He Zi 21 Китай 1
    Цинь Кай 26 Китай 1
    Wu Minxia 26 Китай 2
    Илья Захаров 21 Россия 1
    Цао Юань 17 Китай 1
    Luo Yutong 26 Китай 1
    Ван Хао 19 Китай 1
    Чжан Яньцюань 18 Китай 1

    Как создать таблицы с возможностью поиска и сортировки

    Добавление класса «с возможностью поиска и сортировки» в тег таблицы также добавляет поле поиска в заголовок таблицы.По мере того, как пользователь вводит текст в поле поиска, строки таблицы, значения которых не соответствуют поисковому вводу, будут скрыты. Остальной код будет похож на сортируемую таблицу. Таблицы должны использовать теги

    и <тело> ...
    Пример таблицы с возможностью поиска и сортировки - введите «Китай» в поле поиска для поиска:

    Золотая медаль 2012 Олимпийские пловцы

    для работы функций сортировки и поиска. Тег определяет ячейку заголовка в таблице HTML. В таблице HTML есть два типа ячеек:

    • Ячейки заголовка - содержат информацию заголовка (создается с помощью элемента
    )
  16. Стандартные ячейки - содержат данные (созданные с помощью элемента
  17. )

    Например, чтобы составить пример таблицы Пловцов с золотой медалью 2012, приведенной ниже, начало кода таблицы HTML:

      <таблица> 
      
    Спортсмен Возраст Страна Золотые медали
    Майкл Фелпс
    Майкл Фелпс 27 США 4
    Алисия Куттс 24 Австралия 1
    Мисси Франклин 17 США 4
    Райан Лохте 27 США 2
    Эллисон Шмитт 22 США 3
    Сунь Ян 20 Китай 2
    Натан Адриан 23 США 2
    Янник Агнель 20 Франция 2
    Бриттани Элмсли 18 Австралия 1
    Мэтт Греверс 27 США 2
    Каллен Джонс 28 США 1
    Ranomi Kromowidjojo 21 Нидерланды 2
    Камиль Муффа 22 Франция 1
    Мел Шлангер 25 Австралия 1
    Эмили Сибом 20 Австралия 1
    Ребекка Сони 25 США 2
    Дана Воллмер 24 США 3
    Рики Беренс 24 США 1
    Брендан Хансен 30 США 1
    Джессика Харди 25 США 1
    Чад ле Кло 20 Южная Африка 1
    Клеман Лефер 24 Франция 1
    Амори Лево 26 Франция 1
    Усама Меллули 28 Тунис 1
    Джереми Стравиус 24 Франция 1
    Ник Томан 26 США 1
    Йе Шивэнь 16 Китай 2
    Алисса Андерсон 21 США 1
    Ален Бернар 29 Франция 1
    Рэйчел Бутсма 18 США 1
    Кейт Кэмпбелл 20 Австралия 1
    Тайлер Клэри 23 США 1
    Клэр Донахью 23 США 1
    Конор Дуайер 23 США 1
    Фабьен Жило 28 Франция 1
    Даниэль Гюрта 23 Венгрия 1
    Чарли Хоучин 24 США 1
    Цзяо Люян 22 Китай 1
    Йолан Кукла 16 Австралия 1
    Бриджа Ларсон 20 США 1
    Кэти Ледеки 15 США 1
    Либби Лентон-Трикетт 27 Австралия 1
    Флоран Манауду 21 Франция 1
    Тайлер МакГилл 24 США 1
    Мэтт Маклин 24 США 1
    Ruta Meilutyte 15 Литва 1
    Лорен Пердью 21 США 1
    Éva Risztov 26 Венгрия 1
    Эрик Шанто 28 США 1
    Дэвис Таруотер 28 США 1
    Кэмерон фургон
    дер Бург
    24 Южная Африка 1
    Шеннон Вриланд 20 США 1
    .
Оставить комментарий

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

© 2019 Штирлиц Сеть печатных салонов в Перми

Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми.