seodon.ru | Учебник HTML — Вложенные таблицы
Опубликовано: 29.09.2010 Последняя правка: 08.12.2015
Как вы уже могли убедиться, используя объединение ячеек, можно создать HTML-таблицу любой конфигурации, но это довольно запутанное занятие. Поэтому часто бывает удобней при помощи объединения ячеек наметить только основной каркас таблицы, а для более мелких деталей просто вложить в нужную ячейку еще одну таблицу.
Пример создания вложенных таблиц в HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Windows-1251"> <title>Вложенные таблицы в HTML</title> </head> <body> <table border="3"> <tr> <td>Ячейка 1.1</td> <td colspan="3">Ячейки 1.2 - 1.4</td> </tr> <tr> <td>Ячейка 2.1</td> <td colspan="2" rowspan="2">Ячейки 2.2, 2.3 и 3.2, 3.3</td> <td>Ячейка 2.4</td> </tr> <tr> <td>Ячейка 3.1</td> <td> <table border="2"> <tr><td>Ячейка 1.1</td><td>Ячейка 1.2</td><td>Ячейка 1.3</td></tr> <tr><td>Ячейка 2.1</td><td>Ячейка 2.2</td><td>Ячейка 2.3</td></tr> </table> </td> </tr> <tr> <td colspan="4">Ячейки 4.1 - 4.4</td> </tr> </table> </body> </html>
Результат в браузере
| Ячейка 1.1 | Ячейки 1.2 — 1.4 | ||||||
| Ячейка 2.1 | Ячейки 2.2, 2.3 и 3.2, 3.3 | Ячейка 2.4 | |||||
| Ячейка 3.1 |
| ||||||
| Ячейки 4.1 — 4.4 | |||||||
Гораздо проще, чем, если бы мы занялись одним объединением, правда? НО! Рекомендую вам, по возможности, отказаться от использования вложенных таблиц, то есть применять их только там, где это действительно нужно. Дело в том, что браузеры отображают HTML-таблицы только после того, как проведут все необходимые расчеты связанные с ними: количество столбцов, рядов, ячеек с учетом объединения, оценку содержимого каждой ячейки и их размеров и т.д.
Естественно, когда браузер встречает вложенную таблицу, то проводит те же манипуляции и с ней. И пока он не закончит — основная таблица не будет показана. Конечно, если на странице мало информации, то все это протекает практически мгновенно. Но вот когда на сайте много текста и графики (что и так замедляет загрузку), да еще и куча вложенных таблиц, то HTML-страница может грузиться на одну или несколько секунд дольше только из-за них. Вот так!
Зато по той же, указанной выше, причине рекомендую вам разбивать HTML-документ на несколько таблиц, а не пихать всю страницу в одну. Например, верх страницы — одна таблица, центр — вторая, низ — третья. Тогда браузер будет отображать таблицы по мере обработки, и пользователи будут видеть, что загрузка происходит, а не сидеть перед экраном и гадать: грузится — не грузится. Ведь они этого ох как не любят, думаю, по себе знаете. 🙂
Домашнее задание.
- Посмотрите на результат примера и постарайтесь повторить.
- Обратите внимание, что логотип страницы сделан изображением-ссылкой.
- И еще: левая и правая колонки меню имеют нефиксированную ширину, то есть при уменьшении размеров страницы, они тоже пропорционально уменьшаются.
Посмотреть результат → Посмотреть ответ
3.10. Создание вложенных таблиц. HTML, XHTML и CSS на 100%
3.10. Создание вложенных таблиц
Существуют такие моменты, когда необходимо создать ячейки, границы которых не должны совпадать (рис. 3.14). Здесь атрибут colspan бессилен.
Рис. 3.14. Сложная HTML-таблица
Команды, управляющие созданием и отображением таблиц, допускают вложение одного элемента TABLE внутрь другого, поэтому в ячейке можно создать новую таблицу с независимой структурой.
В листинге 3.8 приведен код таблицы, изображенной на рис. 3.13. Здесь применяется метод вложения одной таблицы в другую. Внешняя таблица состоит из двух строк. Первая строка содержит четыре ячейки, вторая – таблицу со своей независимой структурой. Внутренняя таблица, в свою очередь, содержит две строки, каждая из которых содержит по три ячейки.
Листинг 3.8. Пример таблицы, которая содержит еще одну таблицу
<html>
<head>
<title>HTML-таблица</title>
<head>
<body>
<table border=»4″ bordercolor=»#000000″ cellspacing=»0″ cellpadding=»10″>
<caption>Создание вложенных таблиц</caption>
<tr><td> 1×1</td><td>1×2</td><td>1×3</td><td>1×4</td></tr>
<tr><td colspan=4>
<table border=»3″ bordercolor=»#000000″ cellspacing=»0″ cellpadding=»10″>
<tr><td> 1×1</td><td>1×2</td><td>1×3</td></tr>
<tr><td> 2×1</td><td>2×2</td><td>2×3</td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Данный текст является ознакомительным фрагментом.Читать книгу целиком
Поделитесь на страничке Следующая глава >Как создать таблицу в HTML?
Как запустить видеоурок:- Разархивировать скачанный файл.
- Открыть папку index.
- Запустить файл index.html в браузере.
Как сделать таблицу?
Давайте перейдем в код. Не будем тратить время на ерунду и сразу же начнем заниматься нашей табличкой. Открываем страницу about.html. Почему именно about.html – думаю понятно. Страница index.html у нас заполнена и, поэтому, для простоты обзора нашей таблицы, мы будем использовать about.html.
Итак, сначала прописываем таблицу. Прописывается она в тегах <table></table>. Тег <table> может иметь внутри себя теги строк <tr></tr> и теги столбцов <td></td>.
<table> <tr> <td> </td> </tr> </table>
Давайте посмотрим на нашу табличку: она состоит из двух столбцов и трех строк. Так как сначала прописываются строки, а первую строку и первый столбец мы уже прописали, то давайте пропишем второй столбец и еще две строки.
<table> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table>
Прописали.
Для того, чтобы таблица отображалась, нам нужно задать какое-нибудь значение в ячейках. Это может быть текст или изображение. Введем сначала текст: «1 ячейка», «2 ячейка» , «3 ячейка» , «4 ячейка» , «5 ячейка» , «6 ячейка».
<table> <tr> <td>1 ячейка</td> <td>2 ячейка</td> </tr> <tr> <td>3 ячейка </td> <td>4 ячейка </td> </tr> <tr> <td>5 ячейка </td> <td>6 ячейка </td> </tr> </table>
Сохраним документ и проверим в браузере. Как мы видим, задано шесть ячеек. Посмотрим на наш пример снова. Каждая ячейка имеет свой цвет. Цвет можно задать или отдельно для каждой ячейки, или задать фоновый цвет и некоторым ячейкам задать свой цвет. Мы воспользуемся вторым способом. Фоновый цвет у нас будет голубым, так как это наиболее используемый цвет в наших ячейках. А трем ячейкам установим свой цвет.
Как же узнать цвет ячейки? Для этого нам нужно использовать специальную бесплатную программку «Pixel». Она достаточно проста в использовании. Наводим мышь на нужную нам область экрана и копируем с помощью горячих клавиш Ctrl+Alt+C. Скопировали, сворачиваем программу, открываем код и задаем цвет нашей таблице. Цвет, как вы помните, у нас задается с помощью атрибута bgcolor. Не забываем вводить решетку, и вставляем код цвета.
<table bgcolor = "#00D9FA"> <tr> <td>1 ячейка</td> <td>2 ячейка</td> </tr> <tr> <td>3 ячейка </td> <td>4 ячейка </td> </tr> <tr> <td>5 ячейка </td> <td>6 ячейка </td> </tr> </table>
Давайте сохраним и проверим снова. Теперь стало больше походить на таблицу, но все же не до конца.
Давайте зададим рамку нашей таблице, а также оставшиеся цвета ячеек. Начнем с цветов. Копируем цвет и задаем его, с помощью того же атрибута, соответствующей ячейке. Проделываем эти действия со второй, третьей и шестой ячейками.
<table bgcolor = "#00D9FA"> <tr> <td>1 ячейка</td> <td bgcolor = "#FFCA8D">2 ячейка</td> </tr> <tr> <td bgcolor = "#3CF995">3 ячейка </td> <td>4 ячейка </td> </tr> <tr> <td>5 ячейка </td> <td bgcolor = "#F3F881">6 ячейка </td> </tr> </table>
Сохраняем. Посмотрим, что у нас получилось — более-менее. Скачать браузеры вы можете из первого видеоурока по HTML.
Теперь зададим рамку. Рамка задается с помощью атрибута border. Поставим, например, три пикселя.
<table bgcolor = "#00D9FA" border = "3"> <tr> <td>1 ячейка</td> <td bgcolor = "#FFCA8D">2 ячейка</td> </tr> <tr> <td bgcolor = "#3CF995">3 ячейка </td> <td>4 ячейка </td> </tr> <tr> <td>5 ячейка </td> <td bgcolor = "#F3F881">6 ячейка </td> </tr> </table>
Теперь стало видно, что это все-таки у нас таблица.
Давайте зададим цвет нашей рамке. Делается это с помощью атрибута bordercolor. Этот атрибут можно было использовать так же, как в уроке про изображения. Там тоже при ссылках задавалась рамка. Минус данного атрибута – он не поддерживается в браузере Opera. Поэтому далее мы будем тестировать наш сайт в браузере Mozilla Firefox. Итак, зададим цвет нашей рамки, как в примере. Снова воспользуемся программой «Pixel». Наводим курсор на рамку, копируем и вставляем в код.
<table bgcolor = "#00D9FA" border = "3" bordercolor = "#6C6C6C"> <tr> <td>1 ячейка</td> <td bgcolor = "#FFCA8D">2 ячейка</td> </tr> <tr> <td bgcolor = "#3CF995">3 ячейка </td> <td>4 ячейка </td> </tr> <tr> <td>5 ячейка </td> <td bgcolor = "#F3F881">6 ячейка </td> </tr> </table>
Сохраняем, проверяем в браузере Opera. Как видим, ничего не изменилось, поэтому закрываем браузер и открываем нашу страничку в браузере Mozilla Firefox. Как мы видим, цвет у рамки стал серым. Не понятно лишь одно: почему рамка у нас совсем не похожа на ту, которая в примере, и почему в примере ячейки шире.
Давайте зададим ширину и высоту наших ячеек. Для этого используем атрибуты height (высота) и width (ширина). Я задал высоту и ширину 200×200 пикселей. Задаем эти атрибуты для всех ячеек.
<table bgcolor = "#00D9FA" border = "3" bordercolor = "#6C6C6C"> <tr> <td height = "200" width = "200">1 ячейка</td> <td height = "200" width = "200" bgcolor = "#FFCA8D">2 ячейка</td> </tr> <tr> <td height = "200" width = "200" bgcolor = "#3CF995">3 ячейка </td> <td height = "200" width = "200" >4 ячейка </td> </tr> <tr> <td height = "200" width = "200" >5 ячейка </td> <td height = "200" width = "200" bgcolor = "#F3F881">6 ячейка </td> </tr> </table>
Сохраняем, проверяем в браузере Mozilla Firefox. Размер ячеек изменился.
Теперь поработаем над рамкой. Давайте разберемся, что за расстояния у нас получились. На самом деле это у нас не рамка. Рамка – это однопиксельная полоса. А пространство между рамками – это отступ от ячеек. Давайте его уберем, а именно, зададим значение, равное нулю. Прописываем атрибут cellspacing, который означает «расстояние между ячейками». Ставим значение, равное нулю.
<table bgcolor = "#00D9FA" border = "3" bordercolor = "#6C6C6C" cellspacing="0"> <tr> <td height = "200" width = "200">1 ячейка</td> <td height = "200" width = "200" bgcolor = "#FFCA8D">2 ячейка</td> </tr> <tr> <td height = "200" width = "200" bgcolor = "#3CF995">3 ячейка </td> <td height = "200" width = "200" >4 ячейка </td> </tr> <tr> <td height = "200" width = "200" >5 ячейка </td> <td height = "200" width = "200" bgcolor = "#F3F881">6 ячейка </td> </tr> </table>
Сохраним и проверим. Да, стало значительно красивее.
Имеется похожий на cellspacing атрибут — cellpadding . Их нужно различать. Cellpaddig означает отступ от рамки до содержимого ячейки. Давайте мы его тоже поставим, например, равный трем.
<table bgcolor = "#00D9FA" border = "3" bordercolor = "#6C6C6C" cellspacing="0" cellpadding = "3"> <tr> <td height = "200" width = "200">1 ячейка</td> <td height = "200" width = "200" bgcolor = "#FFCA8D">2 ячейка</td> </tr> <tr> <td height = "200" width = "200" bgcolor = "#3CF995">3 ячейка </td> <td height = "200" width = "200">4 ячейка </td> </tr> <tr> <td height = "200" width = "200">5 ячейка </td> <td height = "200" width = "200" bgcolor = "#F3F881">6 ячейка </td> </tr> </table>
Сохраним, обновим. Вот появился наш отступ в три пикселя.
Давайте сделаем так, чтобы наш текст в ячейке отображался по центру. Осуществим это либо с помощью тега <center>, либо с помощью атрибута align. Давайте для первой ячейки зададим с помощью тега <center>, а для остальных – с помощью атрибута align.
<table bgcolor = "#00D9FA" border = "3" bordercolor = "#6C6C6C" cellspacing="0" cellpadding = "3"> <tr> <td height = "200" width = "200"><center>1 ячейка</center></td> <td align = "center" height = "200" width = "200" bgcolor = "#FFCA8D">2 ячейка</td> </tr> <tr> <td align = "center" height = "200" width = "200" bgcolor = "#3CF995">3 ячейка </td> <td align = "center" height = "200" width = "200">4 ячейка </td> </tr> <tr> <td align = "center" height = "200" width = "200" >5 ячейка </td> <td align = "center" height = "200" width = "200" bgcolor = "#F3F881">6 ячейка </td> </tr> </table>
Сохраняем. Проверяем. Как мы видим, разницы между двумя способами нет.
Что делать, если возникнет необходимость в том, чтобы текст в ячейке располагался сверху или снизу? Насколько вы помните, мы проходили данный атрибут. Он означает вертикальное выравнивание – vertical align. Перейдем в код, и для первых двух ячеек зададим его. Для первой становим значение top, а для второй – bottom. Насколько мы помним, существует третье значение, которое устанавливается по умолчанию – middle.
<table bgcolor = "#00D9FA" border = "3" bordercolor = "#6C6C6C" cellspacing="0" cellpadding = "3"> <tr> <td valign = "top" height = "200" width = "200"><center>1 ячейка</center></td> <td valign = "bottom" align = "center" height = "200" width = "200" bgcolor = "#FFCA8D">2 ячейка</td> </tr> <tr> <td align = "center" height = "200" width = "200" bgcolor = "#3CF995">3 ячейка </td> <td align = "center" height = "200" width = "200">4 ячейка </td> </tr> <tr> <td align = "center" height = "200" width = "200" >5 ячейка </td> <td align = "center" height = "200" width = "200" bgcolor = "#F3F881">6 ячейка </td> </tr> </table>
Сохраним и проверим. Всё получилось.
Сейчас мы немножко поиграем с нашей таблицей. Давайте изменим ее вид: у нас пойдет первая ячейка, длиной в две ячейки, потом идет вторая ячейка, высотой в две ячейки и далее – третья и четвертая ячейки обычного размера. Это можно сделать, просто прописав код с помощью <tr> и <td>, а можно сделать это с использованием специальных атрибутов. Давайте рассмотрим это. Растягиваются наши ячейки с помощью атрибутов colspan и rowspan. Сначала давайте удалим вторую ячейку. Теперь вводим атрибут colspan со значением «2» в первую ячейку. Теперь удалим пятую ячейку, так как, как мы видели на примере, у нас ее не будет. Задаем атрибут rowspan третьей ячейке.
<table bgcolor = "#00D9FA" border = "3" bordercolor = "#6C6C6C" cellspacing = "0" cellpadding = "3"> <tr> <td valign = "top" colspan = "2" height = "200" width = "200"><center>1 ячейка</center></td> </tr> <tr> <td align = "center" rowspan = "2" height = "200" width = "200" bgcolor = "#3CF995">3 ячейка </td> <td align = "center" height = "200" width = "200" >4 ячейка </td> </tr> <tr> <td align = "center" height = "200" width = "200" bgcolor = "#F3F881">6 ячейка </td> </tr> </table>
Сохраним и проверим в браузере. У нас получилось так, как мы и задумывали. Хочу заострить ваше внимание на этом пункте, поскольку это довольно важная часть в основе верстки веб-страниц. Поэтому потренируйтесь здесь, а затем нажмите «Play» для продолжения видеоурока.
Как создать вложенные таблицы в HTML?
Сейчас мы займемся такой интересной вещью, как вложенные таблицы. Давайте создадим таблицу в третьей ячейке. Таблица будет состоять из двух столбцов и трех строк, высота которых будет различной: она будет расти от первой строки к последней.
Давайте перейдем в код и найдем третью ячейку. Убираем текст и создаем новую таблицу. Прописываем в ней три строки, а в каждой строке по две ячейки. В первой ячейке будет имя, во второй – число. Например, имя – Олег, число – 10; имя – Дима, число – 9.
<tr> <td align = "center" rowspan = "2" height = "200" width = "200" bgcolor = "#3CF995"> <table> <tr> <td>Имя</td> <td>Число</td> </tr> <tr> <td>Олег</td> <td>10</td> </tr> <tr> <td>Дима</td> <td>9</td> </tr> </table> </td> <td align = "center" height = "200" width = "200" >4 ячейка </td> </tr> <tr>
Сохраним нашу работу. Посмотрим в браузере. Как мы видим, у нас появилась таблица, состоящая из двух столбцов и трех строк. Давайте ей тоже зададим рамку в 1 пиксель и высоту. Цвет рамки укажем черным.
<tr> <td align = "center" rowspan = "2" height = "200" width = "200" bgcolor = "#3CF995"> <table border = "1" bordercolor = "#000000"> <tr> <td>Имя</td> <td>Число</td> </tr> <tr> <td>Олег</td> <td>10</td> </tr> <tr> <td>Дима</td> <td>9</td> </tr> </table> </td> <td align = "center" height = "200" width = "200">4 ячейка </td> </tr> <tr>
Сохраним и посмотрим, что у нас получилось. Наша задача выполнена, только уберем отступы.
<table border = "1" bordercolor = "#000000" cellspacing = "0">
Проверяем – расстояние между ячейками исчезло. Задача выполнена. Однако, давайте зададим другой цвет нашим ячейкам, например розовый. Зададим всей таблице. Кстати, чтобы задать цвет изображениям, мы используем атрибут background и вводим путь для изображения, если конечно оно вам нужно.
<table bgcolor = "FF00CC" border = "1" bordercolor = "#000000"> <tr height="10"> <td>Имя</td> <td>Число</td> </tr> <tr> <td>Олег</td> <td>10</td> </tr> <tr> <td>Дима</td> <td>9</td> </tr> </table>
Сохраним. Проверим цвет. Всё получилось.
Теперь давайте проверим нашу страничку в браузерах Internet Explorer и Opera. В браузере IE рамка у нас серого цвета, как положено, а в браузере Opera цвет рамки серым не отображается.
Давайте перейдем к домашнему заданию. Домашнее задание будет такое: вам нужно составить табличку, задать цвет каждой ячейке, ширину и высоту 200×200 пикселей, рамку 4 пикселя, убрать расстояние между ячейками, то есть поставить значение, равное нулю, отобразить текст в ячейке по центру, вертикальное выравнивание тоже сделать по центру, то есть посередине, поэкспериментировать с атрибутами colspan, rowspan и посоздавать еще свои таблицы. После этого вы можете переходить в следующий видеоурок, где мы рассмотрим создание сайта на html-таблицах.
Спасибо за внимание. До встречи в следующем видеоуроке, в котором мы рассмотрим табличную верстку сайта!
Элементы таблиц в html
С таблицами мы сталкиваемся постоянно (например в excel). В чем особенность таблицы? Откроем программу excel и посмотрим. Каждый элемент таблицы связан с другими. Если я хочу изменить ширину этого элемента, я вынужден менять ширину связанных с ним в этом столбце других элементов. Так же и высота: если я поменяю высоту в одном элементе, она изменится в других элементах этой строки. Т.е. нельзя изменить размеры отдельно одного элемента. Данная структура в силу такой зависимости несколько сложна.
Сама таблица формируется с помощью элемента ‘table’. Это блочный элемент. Таблица формируется построчно при помощи элементов ‘tr’ (сколько будет строк в таблице, столько будет этих элементов). Внутри строк обычно лежит одинаковое количество ячеек. Ячейки талицы формиируются элементами ‘td’ и ‘th’. Количество столбцов определяет количество ячеек ‘td’. А содержание таблицы находится между тегами ячейки (внутри ячейки).
Пример простой таблицы:
<table> <tr> <td>(1,1)</td> <td>(1,2)</td> </tr> <tr> <td>(2,1)</td> <td>(2,2)</td> </tr> <tr> <td>(3,1)</td> <td>(3,2)</td> </tr> </table>
У таблицы может быть единственный элемент (может не быть вообще) ‘caption’. Это заголовок таблицы. Его нужно прописывать в коде таблицы самым первым. Заголовок можно вывести над и под таблицей (атрибут align=top | bottom).
Содержание статьи
Атрибуты элемента TABLE
- border — рамка вокруг таблицы и вокруг ячеек.
- cellspacing — пространство внутри ячеек (двигает границы ячейки).
- cellpadding — отодвигает содержимое ячейки от границ (внутренний отступ).
- width — ширина таблицы (в пикселях или процентах).
- bgcolor — фоновый цвет (bgcolor=”#ffffcc”).
- align — выравнивание таблицы: слева — центр — вправо (align=”left”| center | right”). Если выравнивать по левому или правому краю, то текст начинает обтекать эту таблицу, поэтому такое выравнивание не рекомендуется.
- background — фоновое изображение в таблице (указывается нужный файл).
- bordercolor — цвет рамки вокруг таблицы.
Атрибуты элемента TR
- bgcolor — фоновый цвет ячеек в этой строке.
- align — выравнивание текста в ячейках этой строки по горизонтали (align=”left | center | right”).
- valign — выравнивание контента ячеек данной строки по высоте: сверху, снизу, выравнивание по базовой линии, посередине(valign=”top | bottom | baseline | middle”).
- bordercolor — цвет границ данной строки.
Атрибуты элемента TD (TH)
- bgcolor — фоновый цвет ячейки.
- align — выравнивание текста в ячейке по горизонтали (align=”left | center | right”).
- valign — выравнивание контента ячейки по высоте: сверху, снизу, выравнивание по базовой линии, посередине(valign=”top | bottom | baseline | middle”).
- width — ширина ячейки в пикселях или процентах.
- background — фоновое изображение в ячейке (выбираем нужный файл).
- bordercolor — цвет границ ячейки.
- nowrap — пробельные символы внутри ячейки сокращаются, но по ним не производится автоматического переноса (при уменьшении размеров окна браузера).
- colspan — сколько столбцов охватывает ячейка.
- rowspan — сколько строк охватывает ячейка.
Вложенные таблицы
Раньше ситуация, когда одна таблица вложена в другую таблицу была общераспространенной. Сейчас для этого используют CSS (таблицы стилей). Пример вложенной таблицы:
<table border=1 cellspacing=0> <tr> <td> <table border=0 cellspacing="3"> <tr> <td bgcolor="black"><font color="white">Ссылка1</font></td> <td bgcolor="black"><font color="white">Ссылка2</font></td> <td bgcolor="black"><font color="white">Ссылка3</font></td> </tr> </table> </td> </tr> <tr> <td>Содержимое ячейки</td> </tr> </table>
С появлением HTML 5 и развитием CSS применение вложенных таблиц совсем не целесообразно, т.к. для построения макета страницы уже появилось куча других специальных элементов.