Главная » Языки программирования

Рамка вокруг таблицы

Содержание
  1. HTML Таблицы
  2. Пример: Простая HTML-таблица
  3. Граница таблицы
  4. Пример: Применение свойства border
  5. Одинарная рамка для таблицы
  6. Пример: Применение свойства border-collapse
  7. Поля и интервалы таблицы
  8. Пример: Применение свойств padding и border-spacing
  9. Ширина таблицы
  10. Пример: Применение свойства width
  11. Объединение ячеек (colspan и rowspan)
  12. Объединение столбцов
  13. Пример: Применение атрибута colspan
  14. Объединение строк
  15. Пример: Применение атрибута rowspan
  16. Заголовок таблицы
  17. Теги группирования элементов таблиц
  18. Задачи
  19. Объединение столбцов
  20. Задача HTML:
  21. Объединение строк
  22. Задача HTML:
  23. Убрать двойную рамку таблицы
  24. Задача HTML:
  25. Широкая таблица
  26. Задача HTML:
  27. Заголовок таблицы
  28. Задача HTML:
  29. Поле внутри ячеек
  30. Задача HTML:
  31. Объединение строк
  32. border-spacing
  33. Try it
  34. Syntax
  35. Values
  36. Formal definition
  37. Formal syntax
  38. Examples
  39. Spacing and padding table cells
  40. HTML
  41. CSS
  42. Result
  43. Specifications
  44. Browser compatibility
  45. See also
  46. Found a content problem with this page?
  47. MDN
  48. Support
  49. Our communities
  50. Developers

HTML Таблицы

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

Элемент служит контейнером для элементов, определяющих содержимое таблицы. Чтобы создать строку таблицы, нужно добавить внутрь элемента парный блочный тег (сокр. от англ. «tаЫе row» – строка таблицы). Сколько тегов вы добавите, столько строк в таблице и будет. Открывающий тег обозначает начало новой строки таблицы. После него помещаются элементы (сокр. от англ. «tаЫе data» – данные таблицы), каждый из которых задает отдельную ячейку в этой строке. Внутрь элемента вы помещаете свой контент (текст, числа, изображения и т.д.), отображаемый в этой ячейке. Конец строки обозначается закрывающим тегом .

Читайте также:  Can install python software properties

Элемент (сокр. от англ. «tаЫе heading» – заголовок таблицы) — необязательный табличный элемент, который используется точно так же, как и элемент , однако его назначение — создание заголовка строки или столбца. Как правило, элемент размещают в первой строке таблицы. Браузеры отображают текст в элементе жирным шрифтом и центрируют его относительно ячейки. Применение в коде элемента помогает людям, которые пользуются программами экранного доступа, а также улучшает результативность индексирования таблиц поисковыми машинами.

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

Пример: Простая HTML-таблица

Заголовок 1 Заголовок 2 Заголовок 3
Ячейка 2×1 Ячейка 2×2 Ячейка 2×3
Ячейка 3×1 Ячейка 3×2 Ячейка 3×3 
  
Заголовок 1Заголовок 2Заголовок 3
 
Ячейка 2x1 Ячейка 2x2 Ячейка 2x3 
 
Ячейка 3x1 Ячейка 3x2 Ячейка 3x3

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

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

Пример: Применение свойства border

Заголовок 1 Заголовок 2 Заголовок 3
Ячейка 2×1 Ячейка 2×2 Ячейка 2×3
Ячейка 3×1 Ячейка 3×2 Ячейка 3×3 
 


   
  
Заголовок 1Заголовок 2Заголовок 3
 
Ячейка 2x1 Ячейка 2x2 Ячейка 2x3 
 
Ячейка 3x1 Ячейка 3x2 Ячейка 3x3
Свойство border следует устанавливать как для самой таблицы так и для её ячеек и .

Одинарная рамка для таблицы

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

Пример: Применение свойства border-collapse

Заголовок 1 Заголовок 2 Заголовок 3
Ячейка 2×1 Ячейка 2×2 Ячейка 2×3
Ячейка 3×1 Ячейка 3×2 Ячейка 3×3 
 


 table < border-collapse: collapse; > th, td 
  
Заголовок 1Заголовок 2Заголовок 3
 
Ячейка 2x1 Ячейка 2x2 Ячейка 2x3 
 
Ячейка 3x1 Ячейка 3x2 Ячейка 3x3

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

По умолчанию размер ячеек таблицы подстраивается под их содержимое, но иногда бывает необходимо оставить вокруг табличных данных немного пространства (padding). Поскольку интервалы и поля относятся к элементам представления данных, это пространство настраивается с помощью стилевых таблиц CSS. Поле ячейки (padding) — это расстояние между содержимым ячейки и ее границей (border). Для его добавления примените свойство padding к элементу или . Интервал ячеек (border-spacing) — это расстояние между ними ( или ). Сначала присвойте значение separate свойству border-collapse элемента , а затем установите расстояние между ячейками, изменив значение параметра border-spacing. Раньше за поля и интервал ячеек отвечали атрибуты cellpadding и cellspacing элемента , но в спецификации HTML5 они были признаны устаревшими.

Пример использования padding и border-spacing:

Пример: Применение свойств padding и border-spacing

padding — это расстояние между содержимым ячейки и ее границей (желтый цвет)
Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4
border-spacing — это расстояние между ячейками (зеленый цвет)
Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4 
 


   
  
Ячейка 1Ячейка 2
 
Ячейка 3Ячейка 4
Примечание: Если к таблице применено свойство border-collapse: collapse, то интервал ячеек (border-spacing) не сработает.

Ширина таблицы

Ширину, занимаемую таблицей в окне браузера, можно указать с помощью свойства width CSS, в пикселях или процентах. Указание ширины таблицы в пикселях позволяет определить её точную ширину. Процентное соотношение позволяет сделать таблицу гибкой, т.е. она будет «растягиваться» или «сжиматься» в зависимости от того, какие еще элементы находятся на странице и какие размеры окна браузера.
Вот пример использования свойства width:

Пример: Применение свойства width

 


 table < border-collapse: collapse; width: 100%; > th, td 
  
Ячейка 1Ячейка 2
 
Ячейка 3Ячейка 4

Объединение ячеек (colspan и rowspan)

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

Объединение столбцов

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

Пример: Применение атрибута colspan

 


 table < border-collapse: collapse; width: 100%; >th, td 
  
colspan="2">Ячейка на два столбца
 
Ячейка 1Ячейка 2
 
Ячейка 3Ячейка 4

Объединение строк

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

Пример: Применение атрибута rowspan

 


 table < border-collapse: collapse; width: 100%; >th, td 
  
rowspan="2">Ячейка на две строки Ячейка 1Ячейка 2
 
Ячейка 3Ячейка 4

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

Для создания заголовка или подписи таблицы используется парный тег (от англ. caption – подпись). Элемент предназначен для организации заголовка таблицы. Располагается сразу после тега , но вне описания строки или ячейки.

Пример: Применение тега

 


 table < border-collapse: collapse; width: 100%; >th, td 
  Это заголовок таблицы
  
Ячейка на две строки Ячейка 1Ячейка 2
 
Ячейка 3Ячейка 4

Теги группирования элементов таблиц

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

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

Пример: Теги , и

 


 table < border-collapse: collapse; width: 100%; >th, td 
  
 
Это шапка таблицы
  
Это подвал таблицы
  
Ячейка 1Ячейка 2Ячейка 3Ячейка 4

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

Задачи

Объединение столбцов

Задача HTML:

Объединение строк

Задача HTML:

Убрать двойную рамку таблицы

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

Задача HTML:

 
Заголовок 1Заголовок 2Заголовок 3
 
Ячейка 1x1 Ячейка 1x2 Ячейка 1x3 
 
Ячейка 2x1 Ячейка 2x2 Ячейка 2x3 
 
 


 table, th, td 
  
Заголовок 1Заголовок 2Заголовок 3
 
Ячейка 1x1 Ячейка 1x2 Ячейка 1x3 
 
Ячейка 2x1 Ячейка 2x2 Ячейка 2x3

Широкая таблица

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

Задача HTML:

 
Заголовок 1Заголовок 2Заголовок 3
 
Ячейка 1x1 Ячейка 1x2 Ячейка 1x3 
 
Ячейка 2x1 Ячейка 2x2 Ячейка 2x3 
 
 


 table th, td 
  
Заголовок 1Заголовок 2Заголовок 3
 
Ячейка 1x1 Ячейка 1x2 Ячейка 1x3 
 
Ячейка 2x1 Ячейка 2x2 Ячейка 2x3

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

Измените приведенный код так, чтобы над таблицей появился основной заголовок (подпись), как показано на рис.1.

Задача HTML:

 
Основной заголовок таблицы 
Заголовок 1Заголовок 2Заголовок 3
 
Ячейка 1x1 Ячейка 1x2 Ячейка 1x3 
 
Ячейка 2x1 Ячейка 2x2 Ячейка 2x3 
 
Рис.1
 


 table th, td 
  
Заголовок 1Заголовок 2Заголовок 3
 
Ячейка 1x1 Ячейка 1x2 Ячейка 1x3 
 
Ячейка 2x1 Ячейка 2x2 Ячейка 2x3

Поле внутри ячеек

Измените приведенный код так, чтобы между текстом внутри ячеек и их границей появился зазор (поле) шириной 25px, как показано на рис.1.

Задача HTML:

 
Ячейка 1Ячейка 2
 
Ячейка 3Ячейка 4
 
Рис.1
 


 table, td 
  
Ячейка 1Ячейка 2
 
Ячейка 3Ячейка 4

Объединение строк

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

—>

фурма ананасы персики
бананы груши
авокадо 
     table < border-collapse: collapse; width: 100%; >th, td  
 
фурма ананасы персики 
 
бананы груши 
 
авокадо

Источник

border-spacing

The border-spacing CSS property sets the distance between the borders of adjacent cells in a . This property applies only when border-collapse is separate .

Try it

The border-spacing value is also used along the outside edge of the table, where the distance between the table’s border and the cells in the first/last column or row is the sum of the relevant (horizontal or vertical) border-spacing and the relevant (top, right, bottom, or left) padding on the table.

Syntax

/* */ border-spacing: 2px; /* horizontal | vertical */ border-spacing: 1cm 2em; /* Global values */ border-spacing: inherit; border-spacing: initial; border-spacing: revert; border-spacing: revert-layer; border-spacing: unset;

The border-spacing property may be specified as either one or two values.

  • When onevalue is specified, it defines both the horizontal and vertical spacings between cells.
  • When twovalues are specified, the first value defines the horizontal spacing between cells (i.e., the space between cells in adjacent columns), and the second value defines the vertical spacing between cells (i.e., the space between cells in adjacent rows).

Values

The size of the spacing as a fixed value.

Formal definition

Formal syntax

Examples

Spacing and padding table cells

This example applies a spacing of .5em vertically and 1em horizontally between a table’s cells. Note how, along its outside edges, the table’s padding values are added to its border-spacing values.

HTML

table> tr> td>1td> td>2td> td>3td> tr> tr> td>4td> td>5td> td>6td> tr> tr> td>7td> td>8td> td>9td> tr> table>

CSS

table  border-spacing: 1em 0.5em; padding: 0 2em 1em 0; border: 1px solid orange; > td  width: 1.5em; height: 1.5em; background: #d2d2d2; text-align: center; vertical-align: middle; >

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Feb 21, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Оцените статью
© 2024 Программирование