Здравствуйте! В этой статье рассмотрим как добавить таблицу на сайт. На заре веба где то в годах 90-х 20 столетия таблицы использовались для верстки сайтов. Надо сказать, что тогда сайты были еще не настолько переполнены различными элементами и были внешне простыми. Поэтому тогда казалось что нет ничего более простого чем верстка сайтов на основе таблиц.
Но прошли годы и веяния в дизайне сайтов сильно изменились и таблицы уже в качестве верстки страниц сайта уже давно не применяются, а используются по своему прямому назначению то есть для отображения различных данных.
Таблица может состоять из строк и столбцов на пересечении которых есть ячейки, содержащие текст, рисунки, видео и другие данные. Как правило таблицы применяются для упорядочения данных и вывода различной информации.
Для того чтобы добавить таблицу на сайт есть специальный тег <table>. Этот элемент является как бы родительским контейнером для других элементов.
Любая таблица состоит из строк и столбцов за выод строк отвечает элемент <tr> а за столбцы <td>.
В таблице должна быть хотя бы одна ячейка. Для шапки таблицы как правило вместо <td> используют <th> это для того чтобы текст был выровнен по центру и был жирного начертания.
Таблица создание
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Тег TABLE</title> </head> <body> <table border="1" width="100%" cellpadding="5"> <tr> <th>Ячейка 1</th> <th>Ячейка 2</th> </tr> <tr> <td>Ячейка 3</td> <td>Ячейка 4</td> </tr> </table> </body> </html>
Давайте рассмотрим атрибуты тега <table>.
применяется для выравнивания содержимого таблицы имеет следующие значения:
задает цвет фона таблицы
устанавливает рамку в таблице значение задается в пикселах.
позволяет задать внутренние отступы в ячейках таблицы, если не указывать то текст будет прилипать к краям таблицы.
Задает расстояние между внешними границами ячеек. Если установлен атрибут border, толщина границы принимается в расчет и входит в общее значение.
Данный атрибут указывает количество столбцов в таблице.
Позволяет задать ширину таблицы. Если не указывать то ширина таблицы задается по содержимому.
Позволяет задать выравнивание ячейки по горизонтали. Принимает значения: left —- выравнивает по левому краю, center — по центру и right — по правому краю.
Задает цвет фона ячейки.
Позволяет объединить ячейки по горизонтали. В этом атрибуте надо указать количество ячеек для объединения и при этом удалить на одну ячейку меньше чем вы объединяете. Например объединяете три ячейки, тогда 2 ячейки удалите.
Данный атрибут задает высоту ячейки. Зачастую высоту ячейки можно не указывать браузер сам вычисляет высоту по содержимому.
Позволяет объединять ячейки по вертикали при этом надо указать число объединяемых ячеек.
Устанавливает вертикальное выравнивание в ячейке. По умолчанию содержимое ячейки располагается по ее вертикали в центре. Принимает такие значения: top — выравнивание по верхнему краю строки, middle — выравнивание по середине, bottom — выравнивание по нижнему краю, baseline — выравнивание по базовой линии.
Позволяет задать ширину ячейки таблицы.
Для того чтобы выравнивать таблицу используется атрибут align тега table. Причем результат будет заметен только в том случае если таблица не занимает всей ширины страницы.
Выравнивание таблицы по правому краю
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Выравнивание таблицы</title> </head> <body> <table width="200" bgcolor="#c0c0c0" cellspacing="0" cellpadding="5" border="1" align="right"> <tr><td>Содержимое таблицы</td></tr> </table> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> </body> </html>
Для того чтобы объединить две и более ячеек в одну используются атрибуты colspan и rowspan тега <td>. Атрибут colspan устанавливает число ячеек объединяемых по горизонтали. Аналогично работает и атрибут rowspan, с тем лишь отличием, что объединяет ячейки по вертикали. Перед добавлением атрибутов проверьте число ячеек в каждой строке, чтобы не возникло ошибок. Так, <td colspan=»3″> заменяет три ячейки, поэтому в следующей строке должно быть три тега <td> или конструкция вида <td colspan=»2″>…</td><td>…</td>. Если число ячеек в каждой строке не будет совпадать, появятся пустые фантомные ячейки. В примере 12.3 приведен хотя и валидный, но неверный код, в котором как раз проявляется подобная ошибка.
Неверное объединение ячеек
<!DOCTYPE HTML"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Неправильное использование colspan</title> </head> <body> <table border="1" cellpadding="5" width="100%"> <tr> <td colspan="2">Ячейка 1</td> <td>Ячейка 2</td> </tr> <tr> <td>Ячейка 3</td> <td>Ячейка 4</td> </tr> </table> </body> </html>
В первой строке примера задано три ячейки, две из них объединены с помощью атрибута colspan, а во второй строке добавлено только две ячейки. Из-за этого возникает дополнительная ячейка, которая отображается в браузере.
<!DOCTYPE HTML"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Объединение ячеек</title> </head> <body> <table border="1" cellpadding="4" cellspacing="0"> <tr> <td rowspan="2">Браузер</td> <th colspan="2">Internet Explorer</th> <th colspan="3">Opera</th> <th colspan="2">Firefox</th> </tr> <tr> <th>6.0</th><th>7.0</th><th>7.0</th><th>8.0</th><th>9.0</th><th>1.0</th><th>2.0</th> </tr> <tr align="center"> <td>Поддерживается</td> <td>Нет</td><td>Да</td><td>Нет</td><td>Да</td><td>Да</td><td>Да</td><td>Да</td> </tr> </table> </body> </html>
В данной таблице установлено восемь колонок и три строки. Часть ячеек с надписями «Internet Explorer» , «Opera» и «Firefox» объединены где по две, а где и по три ячейки. В ячейке с надписью «Браузер» применено объединение по вертикали.
По умолчанию таблица формируется в виде сетки, при этом в каждой строке таблицы содержится одинаковое количество ячеек. Такой вариант вполне подходит для формирования простых таблиц, но совершенно не годится для тех случаев, когда предстоит сделать сложную таблицу. В подобных ситуациях применяются два основных метода: объединение ячеек и вложенные таблицы.
Объединение ячеек имеет некоторые недостатки, поэтому этот метод создания таблиц нельзя использовать повсеместно.
Явно заданная высота ячейки
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Объединение ячеек</title> </head> <body> <table width="100%" border="1" cellpadding="4" cellspacing="0"> <tr> <td width="100" valign="top">Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat.</td> <td rowspan="2" valign="top">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat.</td> </tr> <tr> <td height="40">Lorem ipsum</td> </tr> </table> </body> </html>
Левая нижняя ячейка согласно коду HTML имеет высоту 40 пикселов, но поскольку высота содержимого правой колонки больше, чем содержимое левой колонки, то высота ячейки меняется. Получается, что атрибут height в данном случае игнорируется. Заметим, что данная особенность проявляется только в браузере Opera, но и другие браузеры могут отображать сложные таблицы с ошибками. Это часто выражается в тех таблицах, где явно устанавливается высота ячеек и их объединение по вертикали. Для упрощения верстки применяется прием с вложенными таблицами.
Суть идеи проста — в ячейку вкладывается еще одна таблица со своими параметрами. Поскольку эти таблицы в каком-то смысле независимы, то можно создавать довольно причудливые конструкции. Чтобы вложенная таблица занимала всю ширину ячейки, таблице надо задать ширину 100%.
Вложенные таблицы
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Вложенные таблицы</title> </head> <body> <table width="100%" border="0" cellpadding="5" cellspacing="0"> <tr> <td width="150" valign="top" bgcolor="#f0f0f0"> <table width="100%" cellpadding="2" cellspacing="1"> <tr><td bgcolor="#ffffff">Lorem</td></tr> <tr><td bgcolor="#ffffff">Ipsum</td></tr> <tr><td bgcolor="#ffffff">Dolor</td></tr> <tr><td bgcolor="#ffffff">Sit</td></tr> <tr><td bgcolor="#ffffff">Amet</td></tr> </table> </td> <td valign="top" bgcolor="#ffffee">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</td> </tr> </table> </body> </html>
В данном макете с помощью таблицы создается две колонки, причем левая колонка имеет фиксированную ширину 150 пикселов. Чтобы создать подобие навигации, внутрь ячейки добавлена еще одна таблица с шириной 100%.
При большом количестве таблиц на странице каждой из них удобно задать заголовок, содержащий название таблицы и ее описание. Для этой цели в HTML существует специальный тег <caption>, который устанавливает текст и его положение относительно таблицы. Проще всего размещать текст по центру таблицы сверху или снизу от нее, в остальных случаях браузеры по разному интерпретируют атрибуты тега <caption>, из-за чего результат получается неодинаковый. По умолчанию заголовок помещается сверху таблицы по центру, его ширина не превышает ширины таблицы и в случае длинного текста он автоматически переносится на новую строку. Для изменения положения заголовка у тега <caption> существует атрибут align, который может принимать следующие значения.
Создание заголовка таблицы
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Заголовок таблицы</title> </head> <body> <table width="100%" border="1" cellpadding="4" cellspacing="0"> <caption>Изменение добычи ресурсов по годам</caption> <tr> <th> </th><th>2003</th><th>2004</th><th>2005</th> </tr> <tr> <td>Нефть</td><td>43</td><td>51</td><td>79</td> </tr> <tr> <td>Золото</td><td>29</td><td>34</td><td>48</td> </tr> <tr> <td>Дерево</td><td>38</td><td>57</td><td>36</td> </tr> </table> </body> </html>
Смотрите видеоурок по созданию таблиц
Об авторе