Топ-100 HTML уроки, 4 часть: таблицы, списки - Разработка сайтов на WordPress
HTML уроки, 4 часть: таблицы, списки

HTML-таблицы

Таблицы в HTML задаются тегами <table> и </table> – соответственно, начало и конец. Таблицы разделяют на ряды: <tr> и </tr>, а каждая линия может быть разделена на отдельные клетки, описанные  <td> и </td>. Сама ячейка может содержать текст, изображения, списки или даже другие таблицы. Описание таблицы происходит построчно, каждая строка и ячейки описываются одна за другой слева направо.

Вот и пример:

<table border="2">
<tr>
<td> имя</td>
<td> фамилия </td>
</tr>
<tr>
<td> Иван </td>
<td> Иванов </td>
</tr>
</table>

В браузере таблица будет выглядеть так:

имя фамилия
Иван Иванов

Рамки таблицы

Для того, чтобы показать рамки таблицы, вы должны указать это с помощью border=”a” в тег <table>, но вместо “а” поставить нужную толщину рамки в пикселях. Если вы не хотите, чтобы у таблицы были рамки, просто не используйте border – по умолчанию таблицы отображаются без рамок.

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

Названия, как часть самой таблицы можно установить между <th> и </th>, а заголовок самой таблицы указывается между <caption> и </caption>. Браузер автоматически выделяет заголовки, заданные в <th> – как правило, жирным шрифтом.

<table border="2">
<caption>Визитка</caption>
<tr>
<th> имя</th>
<th> фамилия </th>
</tr>
<tr>
<td> Иван    </td>
<td> Иванов </td>
</tr>
</table>

В браузере таблица будет выглядеть так:

Визитка
имя фамилия
Иван Иванов

 

Ячейки, которые занимают больше одного ряда или столбца

Если вы хотите, чтобы конкретная ячейка занимала два столбца, укажите это с помощью colspan = “2”. Соответственно, чтобы занять ячейку с двумя строками, необходимо написать rowspan = “2” в тег td или th, с помощью которого вы создаете ячейку.

Форматирование ячеек

Расстояние от рамки ячейки до ее содержимого задается с помощью cellpadding = “a”, где “a” – это число в пикселях. Расстояние от рамки таблицы до самих ячеек обозначается как cellspacing = “a”. Оба расстояния должны быть указаны в исходной <table>.

Добавить цвет фона

Чтобы закрасить всю таблицу одним цветом, используйте bgcolor = “color-name” в <table>, используя одно из допустимых имен цветов в HTML вместо имени цвета. Точно также цвет задается для отдельной ячейки, разница только в месте определения: вместо <table> – в <td>. Вместо цвета фона вы можете поместить фоновое изображение: background = “filename.jpg”, конечно, вместо имени filename.jpg укажите имя изображения, которое вы хотите в качестве фона.


HTML списки

В HTML вы можете использовать три типа списков:

  • неупорядоченный: отдельные элементы списка выделены одним и тем же графическим символом: круг, квадрат, галочка и т. д. – все, что вы укажете;
  • упорядоченный: элементам в списке присваиваются свои номера: римские, арабские цифры, латинские строчные или прописные буквы в алфавитном порядке и т. д.
  • определений: с помощью этого типа списков вы можете перечислять элементы и определять их (определения).

Давайте рассмотрим более подробно каждый из трех типов списков.

Неупорядоченные списки

Они обозначены тегом <ul> в начале и </ ul> в конце. Отдельные элементы в списке отмечены тегами <li> и </ li>. Вот пример неупорядоченного списка:

<ul>
 <li>Список 1</li>
 <li>Список 2</li>
 <li>Список 3</li>
 <li>Список 4</li>
 <li>Список 5</li>
 </ul>

На экране браузера этот список будет выглядеть так:

  • Список 1
  • Список 2
  • Список 3
  • Список 4
  • Список 5

Упорядоченные списки

С этими списками перечисленным пунктам присваивается номер. Синтаксис практически идентичен синтаксису неупорядоченных списков: единственное отличие состоит в том, что <ol> и </ ol> используются вместо <ul> и </ ul> для начала и окончания списка. Вот пример:

<ol>
<li> Список 1 </li>
<li> Список 2 </li>
<li> Список 3 </li>
</ol>

В браузере список будет выглядеть так:

  1. Список 1
  2. Список 2
  3. Список 3

Список определений:

Эти списки устанавливаются с помощью <dl> и </ dl> соответственно для начала и конца списка. Ниже приведен список понятий (между тегами <dt> и </ dt>) и их определения (между тегами <dd> и </ dd>). Список определений может выглядеть так:

<dl>
<dt> Вино </dt>
<dd> жидкость, которая питается от героев</dd>
<dt> Молоко</dt>
<dd> временный заменитель вина; течет из фонтанов только в присутствии мёда</dd>
</dl>

Браузер автоматически сделает отступ для определений, поэтому список будет выглядеть так:

Вино
жидкость, которая питается от героев
Молоко
временный заменитель вина; течет из фонтанов только в присутствии мёда

 

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

Читайте далее: HTML уроки, 5 часть: формы

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

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

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

Заказ услуги

Pin It on Pinterest

Открыть чат
1
Задать вопрос
Здравствуйте! 👋
У вас возникли вопросы?