Таблицы в 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 вы можете использовать три типа списков:
Давайте рассмотрим более подробно каждый из трех типов списков.
Они обозначены тегом <ul> в начале и </ ul> в конце. Отдельные элементы в списке отмечены тегами <li> и </ li>. Вот пример неупорядоченного списка:
<ul> <li>Список 1</li> <li>Список 2</li> <li>Список 3</li> <li>Список 4</li> <li>Список 5</li> </ul>
На экране браузера этот список будет выглядеть так:
С этими списками перечисленным пунктам присваивается номер. Синтаксис практически идентичен синтаксису неупорядоченных списков: единственное отличие состоит в том, что <ol> и </ ol> используются вместо <ul> и </ ul> для начала и окончания списка. Вот пример:
<ol> <li> Список 1 </li> <li> Список 2 </li> <li> Список 3 </li> </ol>
В браузере список будет выглядеть так:
Список определений:
Эти списки устанавливаются с помощью <dl> и </ dl> соответственно для начала и конца списка. Ниже приведен список понятий (между тегами <dt> и </ dt>) и их определения (между тегами <dd> и </ dd>). Список определений может выглядеть так:
<dl> <dt> Вино </dt> <dd> жидкость, которая питается от героев</dd> <dt> Молоко</dt> <dd> временный заменитель вина; течет из фонтанов только в присутствии мёда</dd> </dl>
Браузер автоматически сделает отступ для определений, поэтому список будет выглядеть так:
В дополнение к способам изменения стилей списка, перечисленным выше, вы также можете воспользоваться гораздо более богатыми возможностями CSS. Вы можете прочитать больше о CSS в этом руководстве.
Читайте далее: HTML уроки, 5 часть: формы