Html форматирование таблицы – HTML таблицы продвинутые возможности и доступность — Изучение веб-разработки

Leave a Comment / Html / By /

Содержание

Учебник HTML. Урок 7. Создание таблиц и их форматирование | DesigNonstop

Учебник HTML. Урок 7. Создание таблиц и их форматирование

6

Учебник HTML. Урок 7. Создание таблиц и их форматированиеВ этом уроке речь идет о том, как в HTML выполняется построение таблиц и как таблицы можно использовать для управления компоновкой и внешним видом веб-страниц. Начнем мы с самых простых таблиц и узнаем, какие теги задействованы при их создании. После этого перейдем к форматированию. В этой части мы разберемся с основными стилевыми атрибутами, предназначенными для украшения таблиц. Следующий раздел посвящен более сложным таблицам. Мы узнаем как можно объединить ячейки или столбцы и какие атрибуты при этом используются. Рассмотрим подробно на примере — сначала как выглядит сам код, а потом, как выглядит таблица в окне браузера.


 
 

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

 
 

Таблица — это способ представления информации в виде распределенных по строкам и столбцам данных. На пересечении строки и столбца находится ячейка.

 
 

Создавать таблицы в HTML совсем несложно, однако это занятие требует некоторого предварительного планирования. В кодах HTML все таблицы начинаются тегом <table> и оканчиваются тегом </table>. Этот тег обозначает начало и окончание таблицы. Все содержание таблицы должно заключаться внутри этих тегов. Между этими двумя тегами могут присутствовать в разных сочетаниях три других тега:

 
 

<tr> — который определяет горизонтальную строку
<td> — определяющий ячейку в этой строке
<th> — который определяет ячейку в строке заголовка таблицы. Браузеры последних версий применяют к содержанию таких ячеек полужирный стиль начертания и выравнивание по центру.

 
 

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

 
 

<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>Простая таблица</title>
<style type="text/css">
</style>
</head>

<body>
<table>
<tr><th>Столбец 1</th><th>Столбец 2</th></tr>
<tr><td>Строка 2</td><td>Строка 2</td></tr>
<tr><td>Строка 3</td><td>Строка 3</td></tr>
</table>
</body>
</html>

 
 

На этом рисунке показано, как эта таблица из двух столбцов и трех строк выглядит в окне веб-браузера.Учебник HTML. Урок 7. Создание таблиц и их форматирование

 
 

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

 
 

align — Выравнивание содержимого ячейки по горизонтали; возможные значения: left (по умолчанию), right, center и char. Применяется ко всем тегам.
 
bgcolor — Фоновый цвет. Применяется ко всем тегам.
 
border — Толщина разделительной линии (значение указывается в пикселях). По умолчанию значение 0. Применяется с тегом <table>.
 
cellpadding — Расстояние между разделительной линий и содержимым ячейки (значение указывается в пикселях). По умолчанию значение 0. Применяется с тегами <td> и <tr>.
 
cellspacing — Расстояние между ячейками (значение указывается в пикселях). По умолчанию значение 0. Применяется с тегами <td> и <tr>.
 
colspan — Количество столбцов, которое должна занимать текущая ячейка. По умолчанию значение 1. Применяется с тегами <td> и <tr>.

 
rowspan — Количество строк, которое должна занимать текущая ячейка. По умолчанию значение 1. Применяется с тегами <td> и <tr>.
 
rules — Применяется для отображения линеек между ячейками; возможные значения: rows, cols и all. Применяется с тегом <table>.
 
valign — Выравнивание содержимого ячейки по вертикали; возможные значения: top, bottom и baseline. По умолчанию значение center. Применяется с тегами <td>, <th> и <tr>.
 
width — Ширина таблицы или ячейки (значение указывается в пикселях или в процентном выражении относительно ширины страницы). Применяется со всеми тегами.

 
 

Ниже представлен HTML код таблицы, к которой применяется форматирование.

 
 

<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>Моя новая HTML таблица</title>
<style type="text/css">
th {
background-color:lightblue;
color:red;
font-family:Arial
}
td
{
color:blue;
font-family:Times New Roman
}
</style>
</head>

<body>
<table border="1" rules="all">
<tr><th>Столбец 1</th><th>Столбец 2</th></tr>
<tr><td align="center">Строка 2</td><td align="center">Строка 2</td></tr>
<tr><td align="center">Строка 3</td><td align="center">Строка 3</td></tr>
</table>
</body>
</html>

 
 

На этом рисунке вид этой же таблицы в окне веб-браузера.Учебник HTML. Урок 7. Создание таблиц и их форматирование

 
 

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

 
 

<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>Моя новая HTML таблица</title>
<style type="text/css">
th {
background-color:lightblue;
color:red;
font-family:Arial
}
td
{
color:blue;
font-family:Times New Roman
}
</style>
</head>

<body>
<table border="1" rules="all">
<tr><th colspan="2">Столбец 1 и Столбец 2 объединены</th></tr>
<tr><td align="center">Строка 2</td>
<td rowspan="2">Строка 2 и 3 объединены</td></tr>
<tr><td align="center">Строка 3</td></tr>
</table>
</body>
</html>

 
 

На этом рисунке вид этой же таблицы в окне веб-браузера.Учебник HTML. Урок 7. Создание таблиц и их форматирование

 
 

По материалам книги Дидре Хейз «Освой самостоятельно HTML«.

Форматирование таблиц в HTML. Основные теги — МегаЛекции

Форматирование текста в HTML. Основные теги

Форматирование таблиц в HTML. Основные теги

Функция Тег Атрибут Значение Примечание
Формирование заголовков <h2>..</h2> <h3>..</h3> ………….. <h6>..</h6> Align Left Right Center Организация заголовков. <h2- верхний уровень в иерархии заголовков. <h6> — нижний (самый мелкий).
Формирование абзаца <p> Align Left Right Center Justify Задает начало абзаца и вставляет соответствующий пустой интервал для отделения данного абзаца от предыдущего. Парный тег можно опустить
Принудительный разрыв строки <br>     Перенос оставшейся части текста абзаца на следующую строку. Это непарный тег. Не увеличивает интервал в тексте.
Горизонтальные линии
Встраивание горизонталь-ной линии <Hr> Align Left Right Center Выравнивание линии по горизонтали. По умолчанию линия выравнивается по центру. ALIGN=LEFT – смещение линии к левому краю экрана. ALIGN=CENTER –по умолчанию. Линия выравнивается горизонтально по центру экрана. ALIGN=RIGHT – смещение линии к правому краю экрана.
Noshade   Выключение теней. В окне браузера линии изображаются трехмерными. Задание атрибута NOSHADE подавляет иллюзию трехмерности.
Size n – где n-количество пикселов (по умолчанию=3) Задает толщину линии. SIZE=N, где N определяет толщину линии в пикселях. При использовании больших значений size линия превращается в прямоугольник.
Width N N% Задает длину линии. WIDTH=N– устанавливает длину линии в пикселях равной n.WIDTH = N% -длина линии задается в процентах от ширины экрана. 100% — установка по умолчанию.
Начертания шрифтов <b>…</b>     Текст полужирным шрифтом.
<i>…</i>     Текст в курсивном начертании
<u>…</u>     Подчеркнутый текст
Нижние и верхние индексы <sub>..</sub> <sup>..</sup>     Текст будет опущен на полстроки ниже (поднят выше), чем обычный текст, но будет изображаться шрифтом того же размера
Изменение шрифта <font> </font> Size N используется для задания абсолютного размера между 1 и 7. SIZE = +n или –n – увеличивает или уменьшает шрифт относительно текущего значения.
    Color   COLOR=“ИМЯ” задает цвет текста.
    Face Имя шрифта Задает имя шрифта, используемого для отображения данного фрагмента текста через запятую. Использоваться будет тот, чье имя найдено первым
Нумерованные и маркированные списки
Маркированные списки <ul>…</ul> Type 1. Disc 2. Circle 3. Square — закрашенный круг — окружность — квадрат
Отдельный элемент маркированного списка <li> Type 1. Disc 2. Circle 3. Square —//—
Нумерован-ные списки. <ol>…</ol> Start N Задает число, с которого начинается список
Задание способа нумерации элементов   Type   Type=1 Type=A Type=A Type=I Нумерация выполняется арабскими цифрами Нумерация выполняется строчными буквами Нумерация выполняется прописными буквами Нумерация выполняется римскими цифрами
Отдельный элемент нумерованного списка <li> Type    
Бегущая строка
Организация бегущей строки <marquee>.. </marquee> Align Top     Middle   Bottom Выравнивает верхнюю границу поля по самому верхнему краю самого высокого элемента в текущей текстовой строке Центрирует поле по осевой линии текущей текстовой строки Выравнивает нижнюю границу поля по нижней линии текущей текстовой строки
    Direction Left   Right Движение строки справа на лево (по умолчанию) Движение строки слева на право
    Bgcolor Цвет Задает цвет фона бегущей строки.
    Behavior Scroll   Slide   Alternate BEHAVIOR =SCROLL –по умолчанию. Строка “вбегает” со стороны, определенной атрибутом direction в пустое поле и выходит из него на противоположной стороне. Behavior=Slide – текст не “выбегает” с другой стороны поля, а останавливается. BEHAVIOR=ALTERNATE – текст появляется в окне, “добегает” до противоположного конца окна, останавливается и начинает движение в противоположном направлении.
    Height N N% Высота поля бегущей строки В %
    Width N N% Ширина поля бегущей строки В %
    Hspace N Расстояние до текста по горизонтали в пикселях
    Vspace N Расстояние до текста по вертикали в пикселях
    Loop N Infinite n- кратное прохождение строки по экрану — повторяет бегущую строку до тех пор, пока отображение документа не будет прервано
    Scrollamount N задает количество пикселов, на которое бегущая строка перемещается за один шаг
    Scrolldelay N Задает количество миллисекунд, которое ожидает Internet Explorer после каждого выполненного шага, прежде чем строка побежит дальше (плавность движения)
Функция Тег Атрибут Значение
Организация таблицы <table>… </table> Align Выравнивание таблицы по горизонтали. Обычно таблица отображается на левом краю страницы. ALIGN = LEFT ‑ выравнивание таблицы по левому краю. ALIGN = RIGHT ‑ выравнивание таблицы по правому краю. ALIGN = CENTER ‑ выравнивание таблицы по центру.
    Bgcolor Задает цвет фона таблицы. Фон таблицы соответствует фону всего HTML-документа.
    Border Задает толщину границ ячеек таблицы. Значение n определяет ширину рамки таблицы в пикселях <TABLE BORDER=1>. При отсутствии атрибута BORDER или равному нулю, рамка у таблицы не отображается, но пустое место для нее будет отведено.
    Bordercolor Задает цвет границ таблицы и ее ячеек <TABLE BORDERCOLOR=ЦВЕТ>.
    Width Задает ширину таблицы в процентах от ширины окна браузера или в пикселях (100% — полная ширина окна) <TABLE WIDTH=50%> или <TABLE WIDTH=200>.
    Height Задает высоту таблицы в пикселях или в процентах от высоты окна браузера.
Организация строки таблицы <tr>…</tr> Align Задает выравнивание всех элементов строки. Каждая ячейка имеет собственное выравнивание. Оно подавляет выравнивание, заданное Align ‑ атрибутом строки. ALIGN=LEFT — выравнивание по левому краю. ALIGN=CENTER — выравнивание по центру. ALIGN=RIGHT – выравнивание по правому краю.
    Bgcolor Задает для каждой строки собственный фоновый цвет
    Bordercolor Задает цвет рамки для строки
    Valign Задает выравнивание по вертикали для содержимого элементов строки таблицы. По умолчанию элементы центрируются по вертикали. VALIGN=TOP ‑ выравнивание верхнему краю. VALIGN=CENTER ‑ центрирует по вертикали. VALIGN=BOTTOM ‑ выравнивание по нижнему краю. VALIGN=BASELINE ‑ выравнивание по самой верхней текстовой строке.
Организация ячейки таблицы <th> </th>   Ячейка заголовка (содержимое горизонтально центрируется и выделяется полужирным шрифтом)
  <td>…</td>   Ячейка данных
    Align Выравнивание данных в ячейке по горизонтали. ALIGN=LEFT –выравнивание по левому краю. ALIGN=CENTER ‑ выравнивание по центру. ALIGN=RIGHT ‑ выравнивание по правому краю.
    Bgcolor Цвет фона ячейки
    Bordercolor Цвет рамки ячейки
    Colspan Ширина ячейки, выраженную в столбцах. COLSPAN=N, где N определяет, сколько табличных столбцов займет данная ячейка в пределах строки.
    Rowspan Высота ячейки, выраженную в строках. ROWSPAN=N определяет, сколько табличных строк займет данная ячейка.
    Nowrap Выключает разрыв строки. Содержимое ячейки таблицы форматируется как текст в окне, то есть в нужных местах вставляются разрывы строк <br> и <p>. Задание атрибута NOWRAP отменяет верстку строк и отображает все содержимое ячейки в одну строку.
    Valign Выравнивание данных в ячейке по вертикали VALIGN=TOP – выравнивание по верхнему краю VALIGN=BOTTOM – выравнивание по нижнему краю VALIGN=CENTER – выравнивание по центру VALIGN=BASELINE – по самой верхней текстовой строке всех находящихся в данной строке данных.
    Width Ширина ячейки таблицы в пикселях или в процентах от ширины таблицы. Если же ячейка в действительности шире (то есть ее содержимое требует для размещения больше места, чем задано этим атрибутом), WIDTH игнорируется.
    Height Задание высоты ячейки в пикселях.
Caption   Align Выравнивание названия по горизонтали относительно ширины таблицы. ALIGN=LEFT – по левому краю таблицы. ALIGN=CENTER ‑ по центру таблицы. ALIGN=RIGHT ‑ по правому краю таблицы.
    Valign VALIGN=TOP – название размещается над таблицей. VALIGN= BOTTOM – название размещается под таблицей.

3.3. Форматирование табличных данных

Таблицы являются важнейшим элементом HTML-документов, т.к. кроме богатых возможностей по представлению структурированных данных они широко применяются как средство дл создания «каркасов» Web-страниц.

Таблицы в HTML определяются при помощи контейнера <TABLE>…</TABLE>, заключающего в себе другие элементы таблицы: название, заголовки ячеек и их содержимое. Атрибутами контейнера <TABLE> задается формат линии-сетки и общие правила форматирования (общий формат действуют, если иной формат не задан атрибутами формата конкретных строк и ячеек ).

Наименование таблицы определяется при помощи контейнера <CAPTION>…</CAPTION>. Выравнивание наименования задается при помощи атрибута ALIGN, который может принимать значения TOP (сверху таблицы) и BOTTOM (снизу таблицы).

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

Строки таблицы разбиваются на ячейки при помощи тегов ячеек-заголовков <TH>…</TH> и тегов ячеек-данных <TD>…</TD> (допускается форма записи без закрывающих тегов). Как и для строк таблицы при помощи специальных атрибутов тегов <TD> и <TH> можно управлять форматированием конкретных ячеек таблицы.

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

<TABLE> — начало контейнера таблицы

<CAPTION> название таблицы </CAPTION>

<TR> <TH> 1 заголовок </TH>…<TH> N заголовок </TH> </TR> — первая строка / шапка

<TR> <TD> ячейка 1/1 </TD>…<TD> ячейка N/1 </TD> </TR> — 1 строка

<TR> <TD> ячейка 1/i </TD>…<TD> ячейка N/i </TD> </TR> — i строка

<TR> <TD> ячейка 1/M </TD>…<TD> ячейка N/M </TD> </TR> — последняя строка

</TABLE> — конец контейнера таблицы

Таким образом, простейшая таблица, без линий сетки, в HTML-документе определяется следующим образом:

<TABLE>

<CAPTION ALIGN=TOP>Список друзей и подруг</CAPTION>

<TR><TH>ФИО</TH><TH>Телефон</TH></TR>

<TR><TD>Иванов Иван Иваныч</TD><TD>35-35-35</TD></TR>

<TR><TD>Валина Валентина Валентиновна</TD><TD>46-46-46</TD></TR>

</TABLE>

А вот, что у нас получится в окне броузера:

Список друзей и подруг

ФИО

Телефон

Иванов Иван Иваныч

35-35-35

Валина Валентина Валентиновна

46-46-46

Управление выравниванием элементов таблиц

Для выравнивания элементов таблиц в тегах <TABLE>,<TH> и <TD> используется много различных атрибутов. Рассмотрим наиболее полезные и общеупотребимые из них:

Атрибут

Теги

Описание

ALIGN

<TABLE>

Общее горизонтальное выравнивание таблицы на странице — LEFT/RIGHT/CENTER

<TR>

Общее выравнивание элементов строки — LEFT/RIGHT/CENTER/CHAR

<TH>

Выравнивание заголовка — LEFT/RIGHT/CENTER/CHAR (по умолчанию CENTER)

<TD>

Выравнивание данных в ячейке — LEFT/RIGHT/CENTER/CHAR (по умолчанию LEFT )

CHAR

ALIGN=CHAR

Задает символ-выравниватель, при использование атрибута выравнивания ALIGN=CHAR. Например:

<TR ALIGN=CHAR CHAR=»,»><TD>1,35</TD></TR>

CHAROFF

ALIGN= CHAR

Задает отступ (в % ширины ячейки или в пикселях) относительно начала ячейки, символов заданных атрибутом CHAR. Например:

<TR ALIGN=CHAR CHAR=»,» CHAROFF=»10%»> <TD>1,35</TD><TD>-1,45</TD></TR>

VALIGN

<TABLE>

Общее вертикальное выравнивание элементов таблицы — BOTTOM/MIDDLE/TOP (по умолчанию MIDDLE ).

<TR>

Общее выравнивание элементов строки — BOTTOM/MIDDLE/TOP/BASELINE

<TH>

Выравнивание заголовка — BOTTOM/MIDDLE/TOP

<TD>

Выравнивание данных в ячейке — BOTTOM/MIDDLE/TOP

CELLPADDING

<TABLE>

Свободное пространство между содержимым ячеек и их границами

CELLSPACING

<TABLE>

Свободное пространство между границами смежных ячеек

WIDTH

<TABLE>

Ширина таблицы в пикселях или процентах ширины окна броузера.

<TH>,<TD>

Ширина ячейки таблицы в пикселях или процентах от ширины таблицы.

HEIGHT

<TABLE>

Высота таблицы в пикселях или процентах ширины окна броузера

<TH>,<TD>

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

Управление линиями сетки таблиц

Для управления линиями сетки таблиц используется атрибут BORDER контейнера <TABLE>, который задает толщину рамки таблицы в пикселях (по умолчанию рамки нет, BORDER=0). В стандарте HTML 4, появились новые атрибуты таблиц, строк и ячеек: FRAME для более гибкого управления линиями сетки таблиц и RULES для создания дополнительных линий разделителей групп в таблицах.

Данные атрибуты поддерживаются современными броузерами и могут принимать следующие значения:

Атрибут FRAME:

  • VOID — без рамки;

  • BOX — с рамкой;

  • ABOVE — верхняя сторона рамки;

  • BELOW — нижняя сторона рамки;

  • LHS — левая сторона рамки;

  • RHS — правая сторона рамки;

  • VSIDES — вертикальные линии;

  • HSIDES — горизонтальные линии;

Атрибут RULES:

  • NONE — без разделителя групп;

  • GROUPS — вертикальные и горизонтальные линии разделители групп;

Например:

<TABLE >…</TABLE> равнозначно <TABLE FRAME=VOID>…</TABLE>

<TABLE BORDER>…</TABLE> равнозначно <TABLE FRAME=BOX>…</TABLE>

Управление цветом элементов таблиц

Атрибуты управления цветом элементов таблиц появились в HTML как расширения стандарта, предлагаемые основными поставщиками Web-броузеров (Microsoft и Netscape).

Расширения управления цветом: BORDERCOLOR — цвет рамки и BGCOLOR — цвет фона, используются как атрибуты для тегов: <TABLE>, <TR>, <TH>, <TD>. Соответственно областью их действия может быть вся таблица, строка или отдельно взятая ячейка.

Например:

<TABLE BORDER BORDERCOLOR=RED BGCOLOR=YELLOW>…</TABLE> — таблица.

<TR BORDERCOLOR=RED BGCOLOR=YELLOW></TR> — строка.

<TD BORDERCOLOR=RED BGCOLOR=YELLOW></TD> — ячейка.

Объединение элементов таблиц.

Для создания сложных таблиц не обойтись без объединения строк и столбцов. Для объединения ячеек соседних строк и столбцов таблицы, в HTML используются атрибуты ROWSPAN и COLSPAN тегов <TH> и <TD>. Данные атрибуты задают количество объединяемых ячеек в строке (ROWSPAN=N) или столбце (COLSPAN=N). Рассмотрим использование данных атрибутов на примере таблицы.

HTML код таблицы:

<TABLE BORDER ALIGN=CENTER>

<TR ALIGN=CENTER>

<TH COLSPAN=3>ДРУЗЬЯ И ПОДРУГИ</TH>

</TR>

<TR ALIGN=CENTER>

<TD ROWSPAN=2>ДРУЗЬЯ</TD><TD>Коля</TD><TD>44-44-44</TD>

</TR>

<TR ALIGN=CENTER>

<TD>Вася</TD><TD>33-33-33</TD>

</TR>

<TR ALIGN=CENTER>

<TD ROWSPAN=2>ПОДРУГИ</TD><TD>Маша</TD><TD>11-11-11</TD>

</TR>

<TR ALIGN=CENTER>

<TD>Глаша</TD><TD>22-22-22</TD>

</TR>

</TABLE>

Внешний вид таблицы:

ДРУЗЬЯ И ПОДРУГИ

ДРУЗЬЯ

Коля

44-44-44

Вася

33-33-33

ПОДРУГИ

Маша

11-11-11

Глаша

22-22-22

В стандарте HTML 4 появились новые теги для группировки (не объединения, а именно группировки) строк и столбцов таблицы в группы с общими свойствами. Это теги <COLGROUP> и <COL> — группировка и описание свойств столбцов, <THEAD> — определение шапки таблицы, <TBODY> — определение группы тело-таблицы, <TFOOT> — определение нижней строки. Полезным атрибутом тегов <COLGROUP> и <COL> является атрибут SPAN=N, который распространяет свойства, заданные данными тегами на N-столбцов в группе.

Использование данных тегов существенно облегчает компоновку и форматирование таблиц. Схема их применения следующая (в данном примере применяется одиночная форма записи тегов <THEAD>, <TBODY> и <TFOOD>, но в случае использования одного из них, необходимо применять контейнерную форму):

<TABLE атрибуты таблицы>

<COLGROUP общие атрибуты 1-ой группы>

<COL SPAN=10 доп. атрибуты первых 10 столбцов таблицы>

<COL доп. атрибуты 11 столбца таблицы>

…

<COLGROUP общие атрибуты последней группы>

<COL доп. атрибуты j столбца таблицы>…<COL доп. атрибуты N столбца таблицы>

<THEAD>

<TH><TH>1 заголовок</TH>…<TH>N заголовок</TH><TR>

<TBODY>

<TR><TD>1 столбец</TD>…<TD>N столбец</TD><TR>

…

<TR><TD>1 столбец</TD>…<TD>N столбец</TD><TR>

<TFOOT>

<TR><TD>1 итоговый столбец</TD>…<TD>N итоговый столбец</TD><TR>

</TABLE>

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

Старый подход

Новый подход

<table border align=center> <tr> <th width=80>тип <th width=120>название <th width=50>1998 <th width=50>1999 <th width=50>2000 </tr> <tr align=center> <td width=80>тип1 <td width=120>название1 <td width=50 align=right>1,2 <td width=50 align=right>1,3 <td width=50 align=right>1,4 </tr> <tr align=center> <td width=80>тип2 <td width=120>название2 <td width=50 align=right>2,2 <td width=50 align=right>2,3 <td width=50 align=right>2,4 </tr> </table>

<table border align=center> <col width=80 align=center> <col width=120 align=center> <col width=50 align=right span=3> <tr> <th>тип<th>название <th align=center>1998<th align=center>1999<th align=center>2000 </tr> <tr> <td>тип1<td>название1 <td>1,2<td>1,3<td>1,4 </tr> <tr> <td>тип2<td>название2 <td>2,2<td>2,3<td>2,4 </tr> </table>

А вот результат обоих наших деяний:

тип

название

1998

1999

2000

тип1

название1

1,2

1,3

1,4

тип2

название2

2,2

2,3

2,4

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

Пример 5.Форматирование таблиц.

<HTML>

<HEAD>

<TITLE>Использование таблиц в документах</TITLE>

</HEAD>

<BODY BGCOLOR=»WHITE», TEXT=»BLACK», LINK=»BLUE», ALINK=»RED», VLINK=»NAVY»>

<h2align=center>Список моих друзей и подруг</h2>

</P>

<TABLE BORDER ALIGN=CENTER VALIGN=MIDDLE WIDTH=»50%»>

<TR BGCOLOR=#FAD503>

<TH>Категория</TH><TH>ФИО</TH><TH>Фото</TH><TH>Телефон</TH>

</TR> <TR ALIGN=CENTER>

<TD ROWSPAN=2 BGCOLOR=#05C9FA>ДРУЗЬЯ</TD><TD>Коликов Коля</TD>

<TD WIDTH=50 HEIGHT=50><IMG SRC=»boy1.gif»></TD><TD>44-44-44</TD>

</TR>

<TR ALIGN=CENTER>

<TD>Васюков Вася</TD>

<TD WIDTH=50 HEIGHT=50><IMG SRC=»boy2.gif»></TD><TD>33-33-33</TD>

</TR>

<TR ALIGN=CENTER>

<TD ROWSPAN=2 BGCOLOR=#F9ACDE>ПОДРУГИ</TD><TD>Машина Маша</TD>

<TD WIDTH=50 HEIGHT=50><IMG SRC=»girl1.gif»></TD><TD>11-11-11</TD>

</TR>

<TR ALIGN=CENTER>

<TD>Глашева Глаша</TD>

<TD WIDTH=50 HEIGHT=50><IMG SRC=»girl2.gif»></TD><TD>22-22-22</TD>

</TR>

</TABLE>

</P>

<HR>

<P ALIGN=CENTER>&copy 2001 Вебмастер

<AHREF=»mailto:[email protected]»>Попробуй связаться со мной</A>

</BODY>

</HTML>

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

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

Форматирование таблицы CSS в таблицу HTML

Я пытаюсь предоставить форматирование CSS для двух таблиц HTML, но я не могу. Я настраиваю веб-страницу в HTML & CSS (с CSS во внешнем листе), и макет веб-сайта зависит от таблиц.

Есть 2 стола, один для головы, а другой для тела. Они настроены, в то время как содержимое расположено в одном среднем столбце ширины 60%, с одним столбцом на каждой стороне центра с шириной 20% каждый, наряду с другим форматированием таблицы.

Мой вопрос — как я могу отформатировать таблицы в CSS? Я успешно отформатировал их в HTML, но это не будет сделано. Это код CSS для таблиц, каждая таблица имеет идентификатор layouttable:

#layouttable{border:0px;width:100%;}
#layouttable td{width:20%;vertical-align:top;}
#layouttable td{width:60%;vertical-align:top;background-color:#E8E8E8;}
#layouttable td{width:20%;vertical-align:top;}

Таблицы в документе html оба имеют, в соответствующем порядке, эти элементы (с содержимым внутри не показано):

<table><tr><td></td><td></td><td></td></tr></table>

Кто-нибудь знает, почему этот CSS не работает, или может написать код, чтобы исправить это? Если требуется дополнительное объяснение, пожалуйста, спросите.

html css formatting html-table

Поделиться Источник Relentless     25 мая 2010 в 03:23

2 Ответа


4

Метод кхнле отлично сработал для меня, попробуйте поместить некоторый контент внутрь <td></td>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
    #header { width:100%; background-color:#CCCCCC; text-align:center;}
    #layouttable{border:0px;width:100%; text-align:center;}
    #layouttable td.col1{width:20%;vertical-align:top;}
    #layouttable td.col2{width:60%;vertical-align:top;background-color:#E8E8E8;}
    #layouttable td.col3{width:20%;vertical-align:top;}
</style>
</head>

<body>
<table>
    <tr>
        <td>This is the header</td>
    </tr>
</table>
<table>
    <tr>
        <td>20% column</td>
        <td>60% column</td>
        <td>20% column</td>
    </tr>
</table>
</body>
</html>

Если только это не что-то совершенно другое, что вы хотите! Надеюсь, это поможет!

Поделиться Ryano     25 мая 2010 в 16:27


2

Попробовать следующее:

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

#layouttable{border:0px;width:100%;}
#layouttable td.col1{width:20%;vertical-align:top;}
#layouttable td.col2{width:60%;vertical-align:top;background-color:#E8E8E8;}
#layouttable td.col3{width:20%;vertical-align:top;}

То, что у вас было раньше, не сработало, потому что они переписали друг друга.

Поделиться Kevin Le — Khnle     25 мая 2010 в 03:30


Пропустить форматирование css в одной таблице html

Я CSS предметы для всех моих элементов таблицы ( <table> , <tr> , и т. д…) но у меня есть одна таблица, для которой я не хочу, чтобы CSS применялся. Каков самый быстрый способ, чтобы…


Примените форматирование чисел к стилю Pandas HTML CSS

В Pandas есть новая опция стилизатора для форматирования CSS ( http://pandas.pydata.org/pandas-docs/version/0.17.1/generated/pandas.core.style.Styler.html ). Раньше, когда я хотел сделать свои цифры…


Как создать HTML таблиц и сопровождающих CSS с помощью R Markdown или HTML Sweave?

Ранее я задавал вопрос о том, как экспортировать таблицу HTML в R и иметь контроль над границами линий . Я привык к LaTeX, где при создании таблицы форматирование таблицы в значительной степени…


Css Форматирование Таблицы

Я хотел бы повторить форматирование таблиц в HTML и CSS. Мне не нужны параметры поиска, разбиения на страницы или отображения записей, просто базовая форма макета, которую я могу применить к…


Преобразование таблицы docx в html (сохраняя все форматирование) или изображение для использования в html

Я использовал python-docx для создания некоторых таблиц, используя указанный формат стиля в моем файле docx. Теперь мне нужно использовать эти таблицы с таким же форматированием. Есть ли способ,…


Связывание файла css нарушает формат таблицы html

Я работаю над некоторыми Java Servlets, и в основном я вывожу результаты запроса sql в таблицу. У меня есть некоторое базовое форматирование для таблицы в коде html, но я также хочу связать файл…


CSS таблица отображения против обычной HTML таблицы

По какой-то причине мне нужно отображать табличные данные в моем веб-приложении, но не использовать собственные, семантические таблицы, теги thead, tbody, th, td. Я нашел CSS свойств, которые делают…


Django/Python: сохраните таблицу HTML в Excel

У меня есть таблица HTML, которую я хотел бы экспортировать в файл Excel. У меня уже есть возможность экспортировать таблицу в файл IQY, но я бы предпочел что-то, что не позволяло пользователю…


Преобразование поворот заголовка таблицы в HTML и CSS

По какой-то причине мне нужно сделать эту (уродливую) таблицу в HTML и CSS. Я узнаю, что значение поворота для атрибута transform может помочь мне, но я действительно не могу сделать это точно так,…


HTML форматирование выравнивание кнопок в коробке

Я освежил в памяти html, css и javascript, работая над небольшим проектом, который, как мне казалось, был бы полезен. Это поиск рецептов, основанный на том, какие рецепты у меня есть дома. В любом…


Таблицы в HTML

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

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

Таблицы являются незаменимым инструментом структурирования информации.

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

Для создания таблицы html используется контейнер <table>…</table>. Для создания строк служит тег <tr> ,а для столбцов – <td>. Давайте создадим простую таблицу, состоящую из 3х строк и 3х столбцов.

<table>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

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

Атрибуты таблиц в HTML.

У таблиц в HTML существуют следующие атрибуты:

  • align – задает выравнивание по горизонтали. Возможные значения: left, center, right. По умолчанию таблицы выравниваются по левому краю окна браузера.
  • valign – вертикальное выравнивание содержимого таблицы. Принимаемые значения: top, bottom, middle.
  • border – Задает внешнюю рамку таблицы. 1 – рамка есть, 0 – рамки нет. То есть, при использовании 0 таблица визуально не будет видна.
  • cellpadding – расстояние между границей каждой отдельной ячейки и ее содержимым.
  • cellspacing – расстояние между границами близлежащих ячеек.
  • width – ширина таблицы. Может быть заданна в абсолютном значении (пиксели) или в относительном (проценты).
  • height – высота таблицы. Может быть заданна в абсолютном значении (пиксели) или в относительном (проценты).
  • bgcolor – задает цвет фона для таблицы.
  • background – устанавливает рисунок в качестве фона таблицы.

Форматирование таблиц.

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

Объединение 2х ячеек по горизонтали, цвет фона красныйОбъединение 3х ячеек по вертикали и выравнивание по верху, цвет фона синий
Выравнивание по низу и цвет рамки синий
Выравнивание по верху и цвет рамки белый, цвет фона белый
Объединение 2х ячеек по горизонтали выравнивание по низу и цвет рамки синий

<table width=»358″ height=»452″ border=»1″ align=»right» bordercolor=»#FF0000″>
<tr>
<td height=»107″ colspan=»2″ class=»text» bgcolor=»#FF0000″> </td>

<td width=»37″ class=»text»>&nbsp;</td>
<td width=»111″ rowspan=»3″ valign=»top» class=»text» bgcolor=»#0000FF»> </td>
</tr>
<tr >
<td width=»69″ height=»169″ class=»text»>&nbsp;</td>
<td width=»113″ valign=»bottom» bordercolor=»#0000FF» class=»text»> </td>
<td class=»text»>&nbsp;</td>

</tr>
<tr>
<td height=»102″ class=»text»>&nbsp;</td>
<td valign=»top» bordercolor=»#FFFFFF»
class=»text» bgcolor=»#FFFFFF»> </td>
<td class=»text»>&nbsp;</td>

</tr>
<tr>
<td height=»60″ class=»text»>&nbsp;</td>
<td colspan=»2″ valign=»bottom»
bordercolor=»#0000FF» class=»text»> </td>

<td class=»text»>&nbsp;</td>
</tr>
</table>

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

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

В следующий раз речь пойдет о создании и использовании списков HTML.

Таблицы в HTML. теги . Вставка таблиц. форматирование таблиц

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

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

Для добавления таблицы на страницу используется тег <TABLE> </TABLE>, он служит контейнером для остальных тегов таблицы. Как уже говорили любая таблица состоит из строк и ячеек в строке, в HTML для обозначения строк используется тег <TR>, а для определения ячеек в строке используется тег <TD>. Так же для обозначения ячеек может применяться тег <TH>, в основном он используется как заголовки столбцов таблицы, так как текст содержащийся в данном теге будет выведен браузером жирным начертанием и выровненный по центру ячейки.

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Моя первая таблица</title>
  </head>
  <body>
   <table>
  <caption align=top>Заголовок таблицы</caption>
      <tr>
        <td>Ячейка 1</td>
        <td>Ячейка 2</td>
      </tr>
      <tr>
        <td>Ячейка 3</td>
        <td>Ячейка 4</td>
      </tr>
   </table>
  </body>
</html>

Для написания заголовков таблицы используется специальный тег <CAPTION>. По умолчанию заголовок созданный с помощью данного тега центрируется и размещается либо над таблицей либо под таблицей, за расположение заголовка отвечает атрибут ALIGN тега <CAPTION>, данный атрибут может принимать значения TOP (сверху) или BOTTOM (снизу).

<caption align=top> заголовок таблицы вверху</caption>

<caption align=bottom> заголовок таблицы внизу</caption>

Атрибуты тега <TABLE>

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

bgcolor — атрибут устанавливает цвет фона таблицы, в качестве значений используются цвета системы RGB, либо названия цвета.

align — задает выравнивание таблицы на странице, таблица может быть выровнена по левому краю, по центру и по правому краю. Если у таблицы задано выравнивание по левому или правому краю то текст на странице будет обтекать таблицу сбоку и снизу.

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

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

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

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

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

Теги <THEAD>, <TBODY>, <TFOOT>.

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

<THEAD> </THEAD> -Заголовочная часть таблицы, с помощью данного тега в таблице определяются заголовки столбцов, Строк в данной части может быть несколько и создаются они с помощью привычного  тега <TR></TR>, ячейки внутри строки создаются с помощью тега <TH></TH>. Текст помещенный в данные контейнеры будет отформатирован автоматически по центру ячейки, полужирным начертанием.

<TBODY> </TBODY> — основная часть таблицы. Содержит основной набор строк и столбцов которые необходимо вывести браузеру.

<TFOOT> </TFOOT> — помимо заголовка каждый столбец может иметь и подвал, например для подсчета итоговой суммы значений ячеек столбца или для пояснения или комментария к данному столбцу. Повал задается после определения заголовков столбцов, то есть сразу после тега <THEAD>.

Отличительная особенность данных тегов состоит в том что при создании таблицы в начале определяются заголовочная часть <THEAD> и подвал <TFOOT>, а только после этого создается основная часть <TBODY>.

Пример использования тегов структуры таблицы:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Моя первая таблица</title>
  </head>
  <body>
   <table border=2px>
  <caption align=top>Заголовок таблицы</caption>
<thead>
      <tr>
        <th> Заголовок столбца 1</th>
        <th>Заголовок столбца 2</th>
      </tr>
</thead>
<tfoot>      
<tr>
        <td>подвал столбца 1</td>
        <td>подвал столбца 2</td>
      </tr>
</tfoot>
<tbody>
   <tr>
    <td>Ячейка 1</td>
    <td>ячейка 2</td>
   </tr>
</tbody>
   </table
  </body>
</html>

Работа данного примера

Атрибуты тегов <TR> и <TD>

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

COLSPAN — Атрибут тега <TD>? служит для объединения нескольких столбцов в один. Значением данного атрибута является количество столбцов которые необходимо соединить в один. Например: colspan=3, говорит о том, что данный столбец замещает собой три столбца таблицы (себя и еще два следующих), столбцы которые были соединены создавать данной строке больше не нужно.

ПРИМЕР:

<table border=2px>
  <tr>
    <td colspan=2>ячейка состоящая из соединенных 2 столбцов</td>
  </tr>
   <tr>
    <td>Ячейка 2</td>
    <td>ячейка 3</td>
   </tr>
</table>

ROWSPAN — атрибут тега <TD> позволяющий объединять строки таблицы для данного столбца. Значение атрибута является число строк в столбце необходимое для объединения.

ПРИМЕР

<table border=2px>
  <tr>
    <td rowspan=2>ячейка состоящая из соединенных 2 строк</td>
    <td> ячейка 2</td>
  </tr>
   <tr>
    <td>Ячейка 3</td>
   </tr>
</table>

ALIGN — атрибут позволяет задать выравнивание текста в ячейке, может принимать три значения: по центру (center), по левому краю (left), по правому краю (right).

VALIGN — позволяет установить вертикальное выравнивание содержимого ячейки. по умолчанию содержимое ячейки располагается по вертикали в центре. Может принимать четыре значения: по центру (middle), по верхнему краю (top), по нижнему краю (bottom), по базовой линии (baseline, при этом происходит привязка содержимого ячейки к одной линии).

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

Лабораторная работа 6. Таблицы в HTML (pdf)

HTML Форматирование

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

Что такое семантика?

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

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

Жирный текст

Чтобы сделать текст жирным и привлечь к нему внимание мы будем использовать строчный элемент <strong>. Есть два тега, с помощью которых можно выделить текст жирным шрифтом: теги <strong> и <b>. Важно понимать семантическую разницу между ними.

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

HTML-код с тегами <strong> и <b>:

<!-- Важное значение -->
<p><strong>Внимание:</strong> крутой спуск.</p>
  
<!-- Стилистическое выделение -->
<p>Это рецепты <b>оливье</b> и <b>винегрета</b>.</p>

Пример: важный и жирный текст


Внимание: крутой спуск.
  
Это рецепты оливье и винегрета.
<!-- Важное значение -->
<p><strong>Внимание:</strong> крутой спуск.</p>
  
<!-- Стилистическое выделение -->
<p>Это рецепты <b>оливье</b> и <b>винегрета</b>.</p>

Курсивный текст

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

Тег <em> применяется чтобы сделать акцент на фрагменте текста — это наиболее популярный вариант для курсива. Другой вариант — это использование тега <i>, который применяется просто для создания курсивного текста.

HTML-код с тегами <em> и <i>:

<!-- Акцент на слове-->
<p>Я <em>люблю</em> Родину!</p>

<!-- Просто курсив -->
<p>Имя <i>Виктория</i> означает победа.</p>

Пример: акцент и курсив

Я люблю Родину!
Имя Виктория означает победа.
<!-- Акцент на слове-->
<p>Я <em>люблю</em> Родину!</p>

<!-- Просто курсив -->
<p>Имя <i>Виктория</i> означает победа.</p>

Теги <small> и <big>

Тег <small> уменьшает размер шрифта на единицу по сравнению с обычным текстом. В HTML размер шрифта измеряется в условных единицах от 1 до 7, средний размер текста, используемый по умолчанию, принят 3. Таким образом, добавление тега <small> уменьшает текст на одну условную единицу. Тег <big> наоборот увеличивает размер шрифта на единицу по сравнению с обычным текстом.

HTML-код с тегами <small> и <big>:

<p>Это обычный текст.</p>
<p><small>Это текст с меньшими буквами.</small></p>
<p><big>Это текст с большими буквами.</big></p>

Пример: уменьшенный и увеличенный шрифт

Это обычный текст.
Это текст с меньшими буквами.
Это текст с большими буквами.
<p>Это обычный текст.</p>
<p><small>Это текст с меньшими буквами.</small></p>
<p><big>Это текст с большими буквами.</big></p>
Внимание: Это чисто презентационный код, элемент <big> удален в HTML5 и вы не должны больше им пользоваться. Вместо элемента <big> веб — разработчики должны использовать CSS свойства.

HTML тег <mark>

Тег <mark> используется для выделения или подсветки текста из-за его актуальности в контексте. Хорошим примером является выделение слова, которое искал пользователь в документе. Обычно в браузерах фоновый цвет текста внутри контейнера <mark>выделяется желтым цветом</mark>как чернильным маркером.

HTML тег <del>

Тег <del> используется для выделения текста, который был удален в новой версии документа. Подобное форматирование позволяет отследить, какие изменения в исправленном тексте документа были сделаны. Браузеры обычно помечают текст в контейнере <del>как перечеркнутый</del>.

HTML тег <ins>

Тег <ins> предназначен для выделения текста, который был добавлен в новую версию документа. Подобное форматирование позволяет отследить, какой фрагмент содержимого был добавлен во время последнего обновления документа. Браузеры обычно помечают текст в контейнере <ins>как подчеркнутый</ins>.

HTML тег <sub>

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

HTML тег <sup>

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

Перевод строк и горизонтальные линии

Тег <br> (перевод строк)

Как вы уже видели раньше, тег <p> позволяет логически и физически отделить один абзац текста от другого, но что делать, если внутри абзаца нужно перенести текст на новую строку? Специально для этих целей предназначен одинарный тег <br>. Одним из видимых с первого взгляда отличий данного тега от <p> является отсутствие отступов после и перед тегом <br>. Это позволяет располагать смежные строки текста ближе друг к другу. Возможность самостоятельно определить место переноса может пригодиться при записи стихов либо для отделения различных элементов в документе. Добавьте элемент <br> в любую строку, где хотите оборвать поток текста и вставить разрыв строки.

Тег <hr> (горизонтальная линия)

Горизонтальные линии позволяют разделить длинный формально неограниченный текст на отдельные подразделы. Горизонтальные линии в веб-документе играют такую же роль, как орнаментальные полосы в печатных изданиях. Для вставки горизонтальной линии используется одинарный тег <hr>. Данный блочный одинарный тег позволяет вставить горизонтальную черту, ширина которой равна либо всей ширине контейнера, в который вложен тег, либо ширине окна браузера.

Пример: перевод строк и горизонтальные линии

Эти строки отделены друг от друга с помощью абзаца (p):

Это первый абзац.

Это второй абзац.

Это линия:

Эти строки отделены друг от друга с помощью тега br:
Наша Таня громко плачет
Уронила в речку мячик

<p>Эти строки отделены друг от друга с помощью абзаца (p):</p>
<p>Это первый абзац.</p>
<p>Это второй абзац.</p>
<p>Это линия:</p><hr>
<p>Эти строки отделены друг от друга с помощью тега br:<br>
Наша Таня громко плачет<br>Уронила в речку мячик</p>

HTML-код с тегами <mark>, <del>, <ins>, <sub>, <sup>:

<p>В тексте есть слово: <mark>удача</mark>.</p>
<p>Слово <del>беда</del> было удалено из текста.</p>
<p>Слово <ins>победа</ins> было добавлено в текст.</p>
<p>Формула воды: Н<sub>2</sub>O.</p>
<p>Скорость ветра: 20м<sup>3</sup>/сек.</p>

Пример: форматирование текста

В тексте есть слово: удача.
Слово беда было удалено из текста.
Слово победа было добавлено в текст.
Формула воды: Н2O.
Скорость ветра: 20м3/сек.
<p>В тексте есть слово: <mark>удача</mark>.</p>
<p>Слово <del>беда</del> было удалено из текста.</p>
<p>Слово <ins>победа</ins> было добавлено в текст.</p>
<p>Формула воды: Н<sub>2</sub>O.</p>
<p>Скорость ветра: 20м<sup>3</sup>/сек.</p>

Задачи

Итоговое задание [5-10]

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

Пришло время повторить изученное и выполнить пять несложных заданий:

Семантически сильное слово

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Семантически сильное слово</title>  
 </head>
 <body>
  <p>Ты должен стать профессионалом своего дела</p>
 </body>
</html>
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Семантически сильное слово</title>  
 </head>
 <body>
  <p>Ты должен стать <strong>профессионалом</strong> своего дела</p>
 </body>
</html>

Акцент на слове

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Акцент на слове</title>  
 </head>
 <body>
  <p>За год Земля делает полный оборот вокруг Солнца.</p>
 </body>
</html>
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Акцент на слове</title>  
 </head>
 <body>
  <p>За год Земля делает <em>полный</em> оборот вокруг Солнца.</p>
 </body>
</html>

Фоновое выделение

Создайте словно маркером фоновое выделение на слове «равномерно».

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Фоновое выделение</title>  
 </head>
 <body>
  <p>Когда тело падает — его скорость равномерно возрастает.</p>
 </body>
</html>
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Фоновое выделение</title>  
 </head>
 <body>
  <p>Когда тело падает — его скорость <mark>равномерно</mark> возрастает.</p>
 </body>
</html>

Верхний индекс

Примените форматирование к тексту так, чтобы цифра «2» оказалась в верхнем индексе.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Верхний индекс</title>  
 </head>
 <body>
  <p>Единица измерения площади — м2.</p>
 </body>
</html>
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Верхний индекс</title>  
 </head>
 <body>
  <p>Единица измерения площади — м<sup>2</sup>.</p>
 </body>
</html>

Эффект перечеркивания

Примените к слову «чая», которое должно быть удалено, эффект перечеркивания.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Эффект перечеркивания</title>  
 </head>
 <body>
  <p>Я люблю утром выпить чашечку чая кофе.</p>
 </body>
</html>
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Эффект перечеркивания</title>  
 </head>
 <body>
  <p>Я люблю утром выпить чашечку <del>чая</del> кофе.</p>
 </body>
</html>


Please enable JavaScript to view the comments powered by Disqus.

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

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