Изучаем таблицы — FAQ по HTML

Переходим к самому интересному в HTML – это работа с таблицами.

Чем интересна таблица:

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

Давайте вместе разбираться, как построить простую таблицу средствами HTML.

Таблица состоит из строк и столбцов ячеек. В каждой ячейки могут размещаться текст и рисунки.

Для добавления таблицы на страницу мы применим тег table.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML .01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equin="Content-Type" content="text/html; charset=utf-8">
<title>Изучаем таблицы</title>
</head>
 
<body>
<table>
<tr>
   <td>Содержимое таблицы</td>
</tr>
</table>
</body> 
</html>

В данном примере мы создали таблицу с одной строкой.

Для добавления строк используется тег tr. Чтобы разделить строки на колонки применяются теги td и th. В основном используют тег td. Тег th используется для создания заголовков. Заголовки обозначается жирным начертанием и выравнивается по центру. В остальном данные теги одинаковы.

<body>
<table border="1">
<tr>
   <th>Ячейка 1</th>
   <th>Ячейка 2</th>
</tr>
<tr>
   <th>Ячейка 3</th>
   <th>Ячейка 4</th>
</tr>
</table>
</body>

Необходимо знать несколько особенностей при работе с таблицами.

можно размещать несколько таблиц в нутрии одной. Это применяют некоторые веб-мастера. Первую таблицу они создают в качестве шаблона (модульной сетки), а в остальных таблицах размещают полезную часть сайта;
к таблице можно легко добавить рамку с помощью параметра border. Важно знать что рамка первоначально будет, отображается как трехмерная. Для того чтобы превратить рамку в однотонную, необходимо прописывать параметр bordercolor;
если вы разместили контент в нутрии таблицы, то визуально при загрузки страницы содержимое появиться только тогда когда таблица загрузиться полностью;
поля в нутрии таблиц можно регулировать с помощью параметров cellpadding, а расстояние между ячейками определяются значением cellspacing;

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

Общее правило написания параметров такое:

1	<table параметр1="..." параметр2="..." параметр3="...">

Перечислю только более важные параметры, которые особо часто применяются в работе.

Для задание ширины таблицы применяют свойство width. Оно может быть как в процентах, так и в пикселях.

width="100%"

width="750"

Для выравнивание таблицы применяют свойство align, которое может принимать значение left, right, center

align="left"

align="right"

align="center"

Цвет фона таблицы задается свойством bgcolor.

bgcolor="#f0f0f0"

Остальные свойства были рассмотрены ранее – это создание рамки и отступов между ячейками.

В следующем примере применим все свойства на практике.

<body>
<table width="200" bgcolor="f0f0f0" cellspacing="0" cellpadding="5" 
border="1" align="center">
<tr>
   Содержимое таблицы
</tr>
</table>
</body>

Мы создали таблицу светло серого цвета с одной строкой с внутренними отступами в 5 px, которая имеет ширину 200 px и оформлена в рамку толщиной 1px.

Как видите, нечего сложного нет.

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

Еще хочу отметить, что все свойства, о которых я вам рассказал можно применить и к ячейкам таблицы. Так же можно изменить ширину и высоту каждой ячейки задав свойства width и height. Задать ширину и высоту можно как в процентах, так и в пикселях.

Для того чтобы выровнять текст в нутрии ячейки применяют свойство valign. Оно может принимать значение top, midlle, bottom.

Для того чтобы объединить несколько строк таблицы в одну применяют свойство rowspan, а если необходимо объединить несколько колонок то colspan.

<body>
<table width="90%" cellspacing="0" cellpadding="4" border="1">
<tr>
   <th width="27%" bgcolor="#f0f0f0">Итого</th>
   <th colspan="2" bgcolor="#f0f0f0">Месяц</th>
</tr>
<tr>
   <th width="37%" bgcolor="#f0f0f0">Январь</th>
   <th width="37%" bgcolor="#f0f0f0">Февраль</th>
</tr>
<tr>
<td>3700 подписчиков</td>
<td>1000 подписчиков</td>
<td>2700 подписчиков</td>
</tr>
</table>
</body>

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

<table width="90%" cellspacing="0" cellpadding="4" border="1">
<caption>Количество подписчиков за январь, февраль</caption>
<tr>
   <th width="27%" bgcolor="#f0f0f0">Итого</th>
   <th colspan="2" bgcolor="#f0f0f0">Месяц</th>
</tr>
<tr>
   <th width="37%" bgcolor="#f0f0f0">Январь</th>
   <th width="37%" bgcolor="#f0f0f0">Февраль</th>
</tr>
<tr>
<td>3700 подписчиков</td>
<td>1000 подписчиков</td>
<td>2700 подписчиков</td>
</tr>
</table>