Автор: Никита Иванов | 30 января 2013 16:33

Урок 8. Таблицы в html

Таблица в html - один из основных и первых методов вёрстки web-страниц. До того, как CSS стал популярен, web-дизайнеры в основном использовали метод табличной вёрстки и получали очень хороший результат.

Таблица в html состоит из строк и ячеек в этих строках. Это не опечатка, не из строк и столбцов, а именно из строк и ячеек. Считывание информации по таблице в html идёт построчно.

Проще говоря смысл написанного кода такой:
Первая строка - 1-ая, 2-ая ... ячейки, Вторая строка - 1-ая, 2-ая ... ячейки, Третья строка... и так далее.

Теги, используемые для построения таблицы в html

table - обязательный тег, открывающий и закрывающий таблицу
caption - необязательный тег, обозначающий заголовок таблицы
th - необязательный тег, в открывающий и закрывающий теги которого вписывается название столбца. Как правило, выделяется жирным
tr - обязательный тег, с которого открывается и закрывается строка
td - обязательный тег, обозначающий открытие и закрытие ячейки в строке

Пример кода простой таблицы

<html>
   <head>
   <title>Таблица html</title>
   </head>
<body>

<table> <!-- обозначаем открытие таблицы -->

   <tr>  <!-- обозначаем начало первой строки -->
        <caption>Название таблицы</caption>
        <th>  <!-- обозначаем название первого столбца -->
            Стобец 1
        </th>  <!-- закрываем название первого столбца -->

        <th>  <!-- обозначаем название второго столбца -->
            Стобец 2
        </th>  <!-- закрываем название второго столбца -->

   </tr>  <!-- конец  первой строки -->

   <tr>  <!-- обозначаем начало второй строки -->
        <td>  <!-- обозначаем первую ячейку во второй строке -->
            Текст в первой ячейке
        </td>  <!-- закрываем первую ячейку во второй строке -->

        <td>  <!-- обозначаем вторую ячейку во второй строке -->
            Текст во второй ячейке
        </td>  <!-- закрываем вторую ячейку во второй строке -->
   </tr>  <!-- конец  второй строки -->

</table> <!-- закрываем таблицу -->

</body>
</html>

В браузере отобразится

Внимательно просмотрите таблицу и прочитайте комментарий к каждому тегу. Очень важно понять принцип построения таблицы.
Во-первых, в ней все теги парные (не забывайте закрывать их), во-вторых, следует внимательно включать внутрь одних тегов другие, чтобы таблица отобразилась корректно, в-третьих, старайтесь делать отступы перед каждой строкой, ячейкой, чтобы Код был Читаемым и в случае ошибки можно было легко её найти.

Назначение таблиц в html

Урок по таблицам очень важен! Благодаря таблицам Вы можете расположить не только текст, но и изображения, ссылки и много другое. В таблице можно задавать фон (или его цвет), отступ, ширину, границу и другие параметры, что придаст ей красивый внешний вид. Таблица - Ваш первый шаг к понимаю web-дизайна! Ранее многие сайты были целиком свёрстаны как таблицы, то есть всё, что видел пользователь (боковое меню, верхнее меню, содержание) - было содержанием ячеек большой таблицы.
На этой ноте перейдём непосредственно к атрибутам, которые делают таблицу красивой...

Свойства и параметры html таблиц: отступ, ширина, цвет фона, граница (рамка)

У тега table есть следующие атрибуты:

width - ширина таблицы. может быть в пикселях или % от ширины экрана.
bgcolor - цвет фона ячеек таблицы
background - заливает фон таблицы рисунком
border - рамка и границы в таблице. Толщина указывается в пикселях
cellpadding - отступ в пикселях между содержимым ячейки и её внутренней границей
Как и ранее, значение атрибута прописываем в кавычках.

<table border="1" width="300"> <!-- Задаём границу в 1 пиксель и ширину в 300 пикселей -->

Рассмотрим применения данных атрибутов на примере. Для этого создадим таблицу (но уже без крайне редко применяемых тегов caption и th) и зададим параметр атрибуту border (граница), width (ширина таблицы, строки или ячейки) и bgcolor (цвет ячейки)

<html>
   <head>
   <title>Таблица html</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>

В результате в браузере будет выведена таблица следующего вида

frame - атрибут, обозначающий рамку вокруг таблицы. Есть следующие значения:

void - рамки нет,
above - только верхняя рамка,
below - только нижняя рамка,
hsides - только верхняя и нижняя рамки,
vsides - только левая и правая рамки,
lhs - только левая рамка,
rhs - только правая рамка,
box - все четыре части рамки.

rules - атрибут, обозначающий границы внутри таблицы, между ячейками. Есть следующие значения:

none - между ячейками нет границ,
groups - границы только между группами строк и группами столбцов (будут рассмотрены чуть позже),
rows - границы только между строками,
cols - границы только между стобцами,
all - отображать все границы.

Рассмотрим пример кода

<html>
   <head>
   <title>Таблица html</title>
   </head>
<body>

<table border="1" width="300" frame="void" rules="rows"> <!-- Задаём границу в 1 пиксель и ширину в 300 пикселей. Внешней рамки нет. Есть граница между строками -->

   <tr bgcolor="Gainsboro">  <!-- Задаём цвет ячеек для всей первой строки -->  
        <td> 
            Стобец 1
        </td> 

        <td>
            Стобец 2
        </td> 
   </tr> 

   <tr> 
        <td>
            Текст в первой ячейке первого столбца
        </td>

        <td> 
            Текст во второй ячейке второго столбца
        </td> 
   </tr>  

</table> 

</body>
</html>

Результат

Поскольку атрибутом border теперь редко пользуются, то и я Вам рекомендую не привыкать к нему и следующие примеры будут без указания границ.

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

align - выравнивание таблицы. Её можно расположить слева (left), справа (right), по центру (center)
cellspacing - расстояние между ячейками таблицы. Указывается в пикселях (по умолчанию 0 пикселей)
cellpadding - отступ в пикселях между содержимым ячейки и её внутренней границей (по умолчанию 0 пикселей)
Рассмотрим пример

<html>
   <head>
   <title>Таблица html</title>
   </head>
<body>

<table width="400" align="center" cellspacing="5" cellpadding="10"> 
<!-- Задаём ширину 400 пикселей. Таблицу выравниваем по центру. Расстояние между ячейками 5 пикселей. Отступ между содержимым ячейки и её границей 10 пикселей -->

   <tr bgcolor="Gainsboro">  <!-- Задаём цвет ячеек для всей первой строки -->
        <td> 
            Стобец 1
        </td> 

        <td> 
            Стобец 2
        </td> 
   </tr> 

   <tr> 
        <td>
            Текст в первой ячейке первого столбца
        </td>

        <td> 
            Текст во второй ячейке второго столбца
        </td> 
   </tr>  

</table> 

</body>
</html>

В браузере отобразится выравненная по центру таблица следующего вида

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

Строки tr и ячейки td в таблицах HTML

Снова напомню о том, что таблицы формируются построчно (tr). В строках (tr) уже находятся ячейки (td). Если задавать параметр для строки (tr), то он будет действителен для всех ячеек (td) в этой строке, если для конкретной ячейки, то только для неё. В примерах выше я указывал цвет для строки, этот параметр распространялся соответственно для всех ячеек.

  <tr bgcolor="Gainsboro">  <!-- Задаём цвет ячеек для всей первой строки -->
<!-- цвет действителен для всех ячеек td -->
        <td> 
            Стобец 1
        </td> 

        <td> 
            Стобец 2
        </td> 
   </tr>

Для тегов tr и td есть следующие

align - выравнивание текста внутри ячейки. По левому краю (left), по правому краю (right), по центру (center)
valign - выравнивание текста внутри ячейки по вертикали. Вверх (top), вниз (bottom), по центру (middle)
bgcolor - задает цвет строки
width - ширина столбца (все ячейки ниже примут данный параметр) указывается в пикселях или в процентах, где 100% ширина всей таблицы
height - высота ячейки (все ячейки в строке примут данный параметр)

Рассмотрим код, где содержимое ячеек (td), выравнено по разным краям: в первой по левому, во второй по правому:

<html>
   <head>
   <title>Таблица html</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>

Результат

С помощью таблиц можно сверстать очень даже неплохую страницу. Не забывайте, что в ячейки можно вставлять не только текст, но и изображения, ссылки и прочее!)

Спасибо за внимание! Надеюсь материал был полезен!

30 января 2013 16:21	Урок 4. Ссылки в html
30 января 2013 16:37	Урок 11. Элементы формы: текстовая область и список.
23 августа 2013 12:41	Урок 15. Как вставить видео на страницу сайта средствами HTML?
30 января 2013 16:21	Урок 6. Специальные символы в html
30 января 2013 16:37	Урок 10. Форма и элементы: флажок, радиокнопка, поле

Урок 8. Таблицы в html

Назначение таблиц в html

Свойства и параметры html таблиц: отступ, ширина, цвет фона, граница (рамка)

Строки tr и ячейки td в таблицах HTML

Похожие статьи

Комментарии к статье (vk.com)