From c058fa0fb22dc40ef0225b21a97578cddd0aaffa Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:51:05 +0100 Subject: unslug ru: move --- .../css/building_blocks/styling_tables/index.html | 525 +++++++++++++++++++++ 1 file changed, 525 insertions(+) create mode 100644 files/ru/conflicting/learn/css/building_blocks/styling_tables/index.html (limited to 'files/ru/conflicting/learn/css/building_blocks/styling_tables') diff --git a/files/ru/conflicting/learn/css/building_blocks/styling_tables/index.html b/files/ru/conflicting/learn/css/building_blocks/styling_tables/index.html new file mode 100644 index 0000000000..82b7edae60 --- /dev/null +++ b/files/ru/conflicting/learn/css/building_blocks/styling_tables/index.html @@ -0,0 +1,525 @@ +--- +title: Таблицы +slug: Web/Guide/CSS/Getting_started/Таблицы +tags: + - CSS + - Веб + - Руководство +translation_of: Learn/CSS/Building_blocks/Styling_tables +translation_of_original: Web/Guide/CSS/Getting_started/Tables +--- +

{{CSSTutorialTOC}}{{previousPage("/ru/docs/Web/Guide/CSS/Getting_Started/Layout", "Layout")}}

+ +

Это 13-я секция руководства CSS Начало работы; оно описывает более продвинутые селекторы и некоторые специфичные способы, которыми вы можете стилизовать таблицу. Вы создаете новый пример документа, содержащий таблицу и таблицу стилей для неё.

+ +

Информация: Таблицы

+ +

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

+ +

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

+ +

Не используйте таблицы необычным способом для создания особенной визуальной разметки. Техники на предыдущей странице руководства (Разметка) предпочтительнее для этой цели.

+ +

Структура таблицы

+ +

В таблице, каждый кусок информации отображается в ячейке (cell).

+ +

Ячейки, лежащие на одной линии, составляют строку (row).

+ +

В некоторыех таблицах, строки могут быть сгруппирированы. Специальная группа строк в начале таблицы - заголовок (header), в конце - нижний колонтитул (footer). Главные строки таблицы - тело (body), и они могут быть также сгруппирированы.

+ +

Ячейки в линии сверху вниз, составляют столбец (column), но столбцы имеют ограниченное приминение в таблицах CSS.

+ +
+
Пример
+ +

Таблица Селекторов, основанных на отношении в Селекторы имеет десять ячеек в пяти строках.

+ +

Первая строка - заголовок. Остальные четыре строки - тело таблицы. Нижнего колонтитула нет.

+ +

У неё два столбца.

+
+ +

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

+ +

Рамки

+ +

Ячейки не имеют границ.

+ +

У ячеек нет рамок и наполнений. По умолчанию, рамки разделены значениями таблицы, свойство {{cssxref("border-spacing")}}. Вы можете также полностью удалить пространство, установив свойство таблицы {{cssxref("border-collapse")}} в collapse.

+ +
+
Пример
+ +

Здесь три таблицы.

+ +

У таблицы слева интервал рамки 0.5 em. У таблицы по центру он составляет ноль. Таблица справа имеет сжатые границы:

+ + + + + + + + + +
+ + + + + + + + + + + +
ClubsHearts
DiamondsSpades
+ 		+ + + + + + + + + + + +
ClubsHearts
DiamondsSpades
+ 		+ + + + + + + + + + + +
ClubsHearts
DiamondsSpades
+
+
+ +

Заголовок

+ +

{{HTMLElement("caption")}} элемент - это метка, которая применяется ко всей таблице. По умолчанию, она отображается вверху таблицы.

+ +

Чтобы переместить её вниз, установите её свойство {{cssxref("caption-side")}} в bottom. Это свойство наследуется, поэтому, в качестве альтернативы вы можете установить это свойство у таблицы или у другого элемента предка.

+ +

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

+ +
+
Пример
+ +

У этой таблицы заголовок внизу

+ +
#demo-table > caption {
+  caption-side: bottom;
+  font-style: italic;
+  text-align: right;
+}
+
+ + + + + + + +
+ + + + + + + +
Подходит
+ + + + + + + + + + + +
КлубыСердца
АлмазыЛопаты
+
+
+
+ +

Пустые ячейки

+ +

Вы можете отобразить пустые ячейки (т.е. их рамки и фон) указывав {{cssxref("empty-cells")}}: show; для элемента таблицы.

+ +

Вы можете скрыть их, указав empty-cells: hide;. Тогда, если у элемента родителя ячейки есть фон, он будет отображен через пустую ячейку.

+ +
+
Пример
+ +

Эти таблицы имеют бледно-зелёный фон. Их ячейки имеют бледно-серый фон и тёмно-серые рамки.

+ +

В таблице слева пустая таблица отображается. В таблице справа, она скрыта:

+ + + + + + + + +
+ + + + + + + + + + + +
 Сердца
АлмазыЛопаты
+ 		+ + + + + + + + + + + +
 Сердца
АлмазыЛопаты
+
+
+ +
+
Детали
+ +

Для подбробной информации о таблицах, смотрите Таблицы в Спецификации CSS.

+ +

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

+
+ +

Действие: Стилизация таблицы

+ +
    +
  1. Создайте новый HTML документ, doc3.html. Скопируйте и вставьте содержимое отсюда: + +
    + 
    <!DOCTYPE html>
+<html>
+  <head>
+    <title>Документ примера 3</title>
+    <link rel="stylesheet" href="style3.css">
+  </head>
+  <body>
+    <table id="demo-table">
+      <caption>Океаны</caption>
+      <thead>
+        <tr>
+          <th></th>
+          <th>Площадь</th>
+          <th>Средняя глубина</th>
+        </tr>
+        <tr>
+          <th></th>
+          <th>млн. км<sup>2</sup></th>
+          <th>м</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th>Северный Ледовитый</th>
+          <td>13,000</td>
+          <td>1,200</td>
+        </tr>
+        <tr>
+          <th>Атлантический</th>
+          <td>87,000</td>
+          <td>3,900</td>
+        </tr>
+        <tr>
+          <th>Тихий</th>
+          <td>180,000</td>
+          <td>4,000</td>
+        </tr>
+        <tr>
+          <th>Индийский</th>
+          <td>75,000</td>
+          <td>3,900</td>
+        </tr>
+        <tr>
+          <th>Южный</th>
+          <td>20,000</td>
+          <td>4,500</td>
+        </tr>
+      </tbody>
+      <tfoot>
+        <tr>
+          <th>Общая</th>
+          <td>361,000</td>
+          <td></td>
+        </tr>
+        <tr>
+          <th>Средняя</th>
+          <td>72,000</td>
+          <td>3,800</td>
+        </tr>
+      </tfoot>
+    </table>
+  </body>
+</html>
+
    +
    +
    2. +
  2. Создайте новую таблицу стилей, style3.css. Скопируйте и вставьте содержимое отсюда: + 
    /*** Style for doc3.html (Tables) ***/
+
+#demo-table {
+  font: 100% sans-serif;
+  background-color: #efe;
+  border-collapse: collapse;
+  empty-cells: show;
+  border: 1px solid #7a7;
+}
+
+#demo-table > caption {
+  text-align: left;
+  font-weight: bold;
+  font-size: 200%;
+  border-bottom: .2em solid #4ca;
+  margin-bottom: .5em;
+}
+
+
+/* basic shared rules */
+#demo-table th,
+#demo-table td {
+  text-align: right;
+  padding-right: .5em;
+}
+
+#demo-table th {
+  font-weight: bold;
+  padding-left: .5em;
+}
+
+
+/* header */
+#demo-table > thead > tr:first-child > th {
+  text-align: center;
+  color: blue;
+}
+
+#demo-table > thead > tr + tr > th {
+  font-style: italic;
+  color: gray;
+}
+
+/* fix size of superscript */
+#demo-table sup {
+  font-size: 75%;
+}
+
+/* body */
+#demo-table td {
+  background-color: #cef;
+  padding:.5em .5em .5em 3em;
+}
+
+#demo-table tbody th:after {
+  content: ":";
+}
+
+
+/* footer */
+#demo-table tfoot {
+  font-weight: bold;
+}
+
+#demo-table tfoot th {
+  color: blue;
+}
+
+#demo-table tfoot th:after {
+  content: ":";
+}
+
+#demo-table > tfoot td {
+  background-color: #cee;
+}
+
+#demo-table > tfoot > tr:first-child td {
+  border-top: .2em solid #7a7;
+}
+
    +
    3. +
  3. Откройте документ в вашем браузере. Он должен выглядеть наподобие этого: + + + + + + +
    +

    Океаны

    + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
     ПлощадьСредняя глубина
     млн. км2м
    Северный Ледовитый:13,0001,200
    Атлантический:87,0003,900
    Тихий:180,0004,000
    Индийский:75,0003,900
    Южный:20,0004,500
    Общая:361,000 
    Средняя:72,0003,800
    +
    +
    +
    4. +
  4. Сравните правила в таблице стилей с отображенной таблицей, чтобы гарантировать, что вы понимаете действие для каждого правила. Если вы найдете правило, значение которого вы не понимаете, то закомментируйте его и обновите страницу, чтобы посмотреть, что изменилось. Вот несколько заметок об этой таблице: +
      +
    • Заголовок находится снаружи рамки таблицы.
      • +
    • Если у вас установлен минимальный размер точки в Опциях, это может повлиять на верхний индекс в km2.
      • +
    • Три пустые ячейки. Через две из них  позволено показывать фон таблицы. У третьей есть фон и верхняя рамка.
      • +
    • Двоеточия добавлены с помощью таблицы стилей.
      • +
    +
    5. +
+ +
+
Вызов
+ +

Измените таблицу стилей, чтобы она выглядела, как эта:

+ + + + + + + +
+
+ + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 ПлощадьСредняя глубина
 млн. км2м
Северный Ледовитый:13,0001,200
Атлантический:87,0003,900
Тихий:180,0004,000
Индийский:75,0003,900
Южный:20,0004,500
Общая:361,000 
Средняя:72,0003,800
+
+
+ +

Океаны

+
+
+ +

Посмотреть решение для этой задачи.

+ +

Что дальше?

+ +

{{nextPage("/ru/docs/Web/Guide/CSS/Getting_Started/Media", "Media")}}Это последняя страница в этом руководстве, которая фокусируется на CSS свойствах и значениях. Для полного обзора свойств и значений, смотрите все свойства таблиц в CSS Спецификациях.

+ +

Следующая страница тоже рассматривает цель и структуру CSS таблиц.

-- cgit v1.2.3-54-g00ecf