diff options
Diffstat (limited to 'files/ru/learn/html/tables')
| -rw-r--r-- | files/ru/learn/html/tables/advanced/index.html | 14 | ||||
| -rw-r--r-- | files/ru/learn/html/tables/basics/index.html | 16 |
2 files changed, 15 insertions, 15 deletions
diff --git a/files/ru/learn/html/tables/advanced/index.html b/files/ru/learn/html/tables/advanced/index.html index fbfdfa13d9..388c093001 100644 --- a/files/ru/learn/html/tables/advanced/index.html +++ b/files/ru/learn/html/tables/advanced/index.html @@ -26,7 +26,7 @@ translation_of: Learn/HTML/Tables/Advanced <p>Вы можете добавить заголовок для таблицы установив его в элементе {{htmlelement("caption")}} и этот элемент необходимо поместить внутрь элемента {{htmlelement("table")}}. Причём вам нужно поместить его сразу после открытия тега <code><table></code>.</p> -<pre class="brush: html notranslate"><table> +<pre class="brush: html"><table> <caption>Dinosaurs in the Jurassic period</caption> ... @@ -83,7 +83,7 @@ translation_of: Learn/HTML/Tables/Advanced <li>Сохраните, перезагрузите и вы увидите, что добавление элемента <code><tfoot></code> привело к тому, что строка "SUM" опустилась к нижней части таблицы.</li> <li>Далее, добавьте атрибут {{htmlattrxref("colspan","td")}}, чтобы ячейка "SUM" занимала первые четыре столбца, таким образом числовое значение "Cost" появится в последнем столбце.</li> <li>Давайте добавим несколько простых дополнительных стилей к таблице, чтобы дать вам представление насколько эти элементы полезны при использовании CSS. Внутри в <code><head></code> вашего HTML документа вы увидите пустой элемент {{htmlelement("style")}}. Внутри этого элемента добавьте следующие строки CSS кода: - <pre class="brush: css notranslate">tbody { + <pre class="brush: css">tbody { font-size: 90%; font-style: italic; } @@ -105,7 +105,7 @@ tfoot { <div class="hidden"> <h6 id="Hidden_example">Hidden example</h6> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -224,7 +224,7 @@ tfoot { <p>Разметка простой вложенной таблицы:</p> -<pre class="brush: html notranslate"><table id="table1"> +<pre class="brush: html"><table id="table1"> <tr> <th>title1</th> <th>title2</th> @@ -363,7 +363,7 @@ tfoot { <p>Новая тема в этой статье это атрибут {{htmlattrxref("scope","th")}}, который может быть добавлен к элементу <code><th></code> он сообщает скринридеру какие ячейки точно являются заголовками — например, заголовок строки в которой он находится или столбца. Возвращаясь назад к нашему примеру с записями расходов, вы могли однозначно определить заголовки столбцов как здесь:</p> -<pre class="brush: html notranslate"><thead> +<pre class="brush: html"><thead> <tr> <th scope="col">Purchase</th> <th scope="col">Location</th> @@ -375,7 +375,7 @@ tfoot { <p>И у каждой строки может быть определён заголовок, как здесь (если мы добавили заголовки строк и заголовки столбцов):</p> -<pre class="brush: html notranslate"><tr> +<pre class="brush: html"><tr> <th scope="row">Haircut</th> <td>Hairdresser</td> <td>12/09</td> @@ -400,7 +400,7 @@ tfoot { <p>Вернёмся к нашему примеру с расчётом затрат, его можно переписать следующим образом:</p> -<pre class="brush: html notranslate"><thead> +<pre class="brush: html"><thead> <tr> <th id="purchase">Purchase</th> <th id="location">Location</th> diff --git a/files/ru/learn/html/tables/basics/index.html b/files/ru/learn/html/tables/basics/index.html index bd9b5f4fb4..282ccd6039 100644 --- a/files/ru/learn/html/tables/basics/index.html +++ b/files/ru/learn/html/tables/basics/index.html @@ -128,10 +128,10 @@ translation_of: Learn/HTML/Tables/Basics <li>Прежде всего, создайте локальную копию <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html">blank-template.html</a> и <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> в новой папке на вашем компьютере.</li> <li>Содержимое любой таблицы заключается между двумя тегами : <strong><code><a href="/en-US/docs/Web/HTML/Element/table"><table></table></a></code></strong>. Добавьте их в тело HTML.</li> <li>Самым маленьким контейнером в таблице является ячейка, она создаётся элементом <strong><code><a href="/en-US/docs/Web/HTML/Element/td"><td></a></code></strong> ('td' - сокращение от 'table data'). Введите внутри тегов table следующее: - <pre class="brush: html notranslate"><td>Hi, I'm your first cell.</td></pre> + <pre class="brush: html"><td>Hi, I'm your first cell.</td></pre> </li> <li>Чтобы получить строку из четырёх ячеек, необходимо скопировать эти теги три раза. Обновите содержимое таблицы так, чтобы она выглядела следующим образом: - <pre class="brush: html notranslate"><td>Hi, I'm your first cell.</td> + <pre class="brush: html"><td>Hi, I'm your first cell.</td> <td>I'm your second cell.</td> <td>I'm your third cell.</td> <td>I'm your fourth cell.</td></pre> @@ -145,7 +145,7 @@ translation_of: Learn/HTML/Tables/Basics <ol> <li>Поместите четыре уже созданных ячейки между тегами <code><tr></code> как здесь показано: - <pre class="brush: html notranslate"><tr> + <pre class="brush: html"><tr> <td>Hi, I'm your first cell.</td> <td>I'm your second cell.</td> <td>I'm your third cell.</td> @@ -182,7 +182,7 @@ translation_of: Learn/HTML/Tables/Basics <p>Теперь обратимся к табличным заголовкам — особым ячейкам, которые идут вначале строки или столбца и определяют тип данных, которые содержит данная строка или столбец (как "Person" и "Age" в первом примере данной статьи). Чтобы показать, для чего они нужны, возьмём следующий пример. Сначала исходный код:</p> -<pre class="brush: html notranslate"><table> +<pre class="brush: html"><table> <tr> <td>&nbsp;</td> <td>Knocky</td> @@ -294,7 +294,7 @@ translation_of: Learn/HTML/Tables/Basics <p>Исходная разметка выглядит так:</p> -<pre class="brush: html notranslate"><table> +<pre class="brush: html"><table> <tr> <th>Animals</th> </tr> @@ -374,7 +374,7 @@ translation_of: Learn/HTML/Tables/Basics <p>Возьмём простой пример:</p> -<pre class="brush: html notranslate"><table> +<pre class="brush: html"><table> <tr> <th>Data 1</th> <th style="background-color: yellow">Data 2</th> @@ -410,7 +410,7 @@ translation_of: Learn/HTML/Tables/Basics <p>Он не идеален, поскольку нам пришлось повторить информацию о стиле для всех трёх ячеек в столбце (в реальном проекте, возможно, придётся вводить <code>class</code> на всех трёх и вводит правило в таблице стилей). Вместо этого, мы можем задать информацию один раз, в элементе <code><col></code>. <code>Элемент <col></code> задаётся в контейнере <code><colgroup></code> сразу же за открывающим тегом <code><table></code>. Эффект, который мы видели выше, можно задать так:</p> -<pre class="brush: html notranslate"><table> +<pre class="brush: html"><table> <colgroup> <col> <col style="background-color: yellow"> @@ -433,7 +433,7 @@ translation_of: Learn/HTML/Tables/Basics <p>Если бы мы хотели применить информацию о стиле к обоим столбцам, мы могли бы просто ввести один элемент <code><col></code> с атрибутом span, таким образом:</p> -<pre class="brush: html notranslate"><colgroup> +<pre class="brush: html"><colgroup> <col style="background-color: yellow" span="2"> </colgroup></pre> |