Партнерка на США и Канаду по недвижимости, выплаты в крипто
- 30% recurring commission
- Выплаты в USDT
- Вывод каждую неделю
- Комиссия до 5 лет за каждого referral
Пример 11_5:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www. w3.org/TR/html4/strict. dtd">
<html>
<head>
<title>Пример 11_5</title>
</head>
<body>
<dl>
<dt>термин 1</dt>
<dd>определение 1</dd>
<dt>термин 2</dt>
<dd>определение 2</dd>
</dl>
</body>
</html>
Таблицы в HTML
Таблица - один из основных инструментов для создания web-страниц. Любая таблица представляет собой набор строк и столбцов, на пересечении которых находятся ячейки.
Таблицы выполняют две функции:
1) оформление табличной информации: различные расписания, графики дежурств, результаты экспериментов и т. п.
2) позиционирование элементов страницы.
Тэги, используемые для построения таблицы в html:
<table>…</table> - обязательный тэг, открывающий и закрывающий таблицу
<caption>…</caption> - необязательный тег, обозначающий заголовок таблицы
<th>…</th> - необязательный тег, в открывающий и закрывающий теги которого вписывается название столбца. Как правило, выделяется жирным шрифтом и выравниванием по центру.
<tr>…</tr> - обязательный тег, с которого открывается и закрывается строка
<td>…</td> - обязательный тег, обозначающий открытие и закрытие ячейки в строке
Структура таблицы показана в примере 12_1.
Пример 12_1:
<html>
<head>
<title>Пример 12_1</title>
</head>
<body>
<table> <!-- обозначаем открытие таблицы -->
<tr> <!-- обозначаем начало первой строки -->
<caption>Название таблицы</caption>
<th> <!-- обозначаем название первого столбца -->
Стобец 1
</th> <!-- закрываем название первого столбца -->
<th> <!-- обозначаем название второго столбца -->
Стобец 2
</th> <!-- закрываем название второго столбца -->
</tr> <!-- конец первой строки -->
<tr> <!-- обозначаем начало второй строки -->
<td> <!-- обозначаем первую ячейку во второй строке -->
Текст в первой ячейке
</td> <!-- закрываем первую ячейку во второй строке -->
<td> <!-- обозначаем вторую ячейку во второй строке -->
Текст во второй ячейке
</td> <!-- закрываем вторую ячейку во второй строке -->
</tr> <!-- конец второй строки -->
</table> <!-- закрываем таблицу -->
</body>
</html>
У тэга <table> есть следующие атрибуты:
width - ширина таблицы. может быть в пикселях width="300" или % от ширины экрана width="50%" .
bgcolor - цвет фона ячеек таблицы
background - заливает фон таблицы рисунком
border - рамка и границы в таблице. Толщина указывается в пикселях
cellpadding - отступ в пикселях между содержимым ячейки и её внутренней границей (по умолчанию 0 пикселей)
align - выравнивание таблицы. Её можно расположить слева (left), справа (right), по центру (center)
cellspacing - расстояние между ячейками таблицы. Указывается в пикселях (по умолчанию 0 пикселей)
Пример 12_2:
<html>
<head>
<title>Пример 12_2</title>
</head>
<body>
<table border="1" width="300"> <!-- Задаём границу в 1 пиксель и ширину в 300 пикселей -->
<tr bgcolor="Gainsboro"> <!-- Задаём цвет ячеек для всей первой строки -->
<td>
Стобец 1
</td>
<td>
Стобец 2
</td>
</tr>
<tr>
<td>
Текст в первой ячейке первого столбца
</td>
<td>
Текст во второй ячейке второго столбца
</td>
</tr>
</table>
</body>
</html>
У тэгов <tr> и <td> есть следующие атрибуты:
align - выравнивание текста внутри ячейки. По левому краю (left), по правому краю (right), по центру (center)
valign - выравнивание текста внутри ячейки по вертикали. Вверх (top), вниз (bottom), по центру (middle)
bgcolor - задает цвет строки
width - ширина столбца (все ячейки ниже примут данный параметр) указывается в пикселях или в процентах, где 100% ширина всей таблицы
height - высота ячейки (все ячейки в строке примут данный параметр)
colspan - определяет количество столбцов, на которые простирается данная ячейка. По умолчанию имеет значение 1.
rowspan - определяет количество рядов, на которые простирается данная ячейка. По умолчанию имеет значение 1.
Пример 12_3:
<html>
<head>
<title>Пример 12_3</title>
</head>
<body>
<table width="400" cellspacing="5" cellpadding="10">
<!-- Задаём ширину 400 пикселей. Таблицу выравниваем по центру. Расстояние между ячейками 5 пикселей. Отступ между содержимым ячейки и её границей 10 пикселей -->
<tr bgcolor="Gainsboro"> <!-- Задаём цвет ячеек для всей первой строки -->
<td>
Стобец 1
</td>
<td>
Стобец 2
</td>
</tr>
<tr>
<td align="left">
Текст в первой ячейке первого столбца
</td>
<td align="right">
Текст во второй ячейке второго столбца
</td>
</tr>
</table>
</body>
</html>
Часто надо сделать заголовок таблицы на несколько столбцов. Для этого принимают атрибут colspan тэга <th> или <td>. Значение этого заголовка - количество столбцов, охваченных заголовком.
Пример 12_4:
<html>
<head>
<title>Пример 12_4</title>
</head>
<body>
<table border="1">
<tr><th colspan="3">месяц</th></tr>
<tr>
<td>январь</td>
<td>февраль</td>
<td>март</td>
</tr>
</table>
</body>
</html>
Для объединения строк используется аналогичный атрибут rowspan.
Пример 12_5:
<html>
<head>
<title>Пример 12_5</title>
</head>
<body>
<table border="1">
<tr>
<th rowspan="3">Привет, </th>
<td>Вася!</td>
</tr>
<tr>
<td>Петя!</td>
</tr>
<tr>
<td>Коля!</td>
</tr>
</table>
</body>
</html>
Так как таблицы и ячейки могут иметь фиксированную ширину, разработчик страницы может определять, где на экране будет располагаться тот или иной элемент страницы. С помощью таблиц можно сверстать очень даже неплохую страницу (табличная верстка). В ячейки можно вставлять не только текст, но и изображения, ссылки, списки. Если ширина задается в процентах, то это называется «резиновая верстка», а если в пиксалах, то – «жесткая верстка».
Сейчас на профессиональных сайтах используют блочную верстку, при которой разделены содержание web-страницы (HTML-код) и ее оформление (таблицы стилей CSS). Это позволяет уменьшить объем web-страницы и увеличить скорость ее загрузки.
Ссылки:
http://html. manual. ru/
http://tradebenefit. ru
http:///HTML
, Еремин . Углубленный уровень. Учебник для 11 класса часть 1, Бином, 2013 г.
|
Из за большого объема этот материал размещен на нескольких страницах:
1 2 3 4 5 6 7 |
