|
|
|
|
Урок 10. Таблицы. Часть 1. Теория. Автор: Андрей Краснокутский Дата: 2009-02-02 Для чего нужны таблицы в HTML?Сегодня мы с Вами поговорим о таблицах. Для чего же нужны таблицы в HTML??? Используя таблицы, можно создавать такие эффекты, как верстка сайтов в несколько колонок, применение эффектов состыковки изображения (картинки) и фона, тонкие линии на всю ширину или высоту web-странички и т.д. Но, на мой взгляд, главное и основное – это использование таблиц для создания web-страниц, точнее разметки web-страницы. Об этом чуть позже. Весь урок разобъем на две части. В первой части урока я рассскажу Вам немного теории: как создаются таблицы, что такое ряд, колонка, как объединить ряды или колонки в одну ячейку и т.д. А во второй части урока мы будем практически применять таблицы для создания HTML–страницы. Как создается таблица?Таблица в спецификации HTML описывается парными тегами: <table> </table> (открывающий и закрывающий теги). Элементы таблицы строятся по рядам (строкам). Каждый ряд задается парными тегами: <tr> </tr> (Table Row, ряд таблицы). Внутри ряда (а их может быть много) находятся ячейки (столбцы) образованные тегами: <td> </td> (Table Date, данные таблицы). Для заголовков столбцов вместо тега <td> можно использовать теги: <th> (Table Head, заголовок таблицы). Разница в этих тегах лишь в том, что текст при использовании тегов <th> выравнивается по центру и выделяется жирным шрифтом. Взгляните на Листинг 10.1. Здесь приведен код состоящей из 2-х строк и 2-х столбцов. Листинг 10.1
А вот как выглядит таблица, код которой указан в Листинге 10.1:
А теперь прокомментирую каждый параметр в коде Листинга 10.1. Как Вы уже заметили, эта таблица имеет две строки, описываемые тегами: <tr> </tr> . В каждой строке по два столбца (ячейки 1, 2 и 3, 4), которые описываются тегами: <td> </td>. Ширина таблицы 300 пикселей атрибут: width="300". Цвет фона таблицы и всех ячеек желтый: bgcolor="yellow". Цвет рамки таблицы зеленый: bordercolor="green". Толщина рамки 2 пикселя: border="2" (чем больше цифра – тем толще рамка, при значении 0 – рамка не видна) . Таблица выровнена по центру: align= "center". Если ячейка пустая, то вокруг нее рамка не рисуется. Если рамка все же нужна вокруг пустой ячейки, то в нее надо ввести символьный объект: (non-breaking space - неразрывающий пробел). Внешне ячейка по-прежнему будет пуста, но вокруг нее появится рамка ( - обязательно должен набираться строчными буквами и закрываться точкой с запятой). Приведу еще несколько тегов, которые нам понадобятся в следующей части урока:
Чтобы лучше понять значение этих тегов взгляните на Листинг 10.2. Листинг 10.2
А вот что видит посетитель сайта:
Общая ширина таблицы равна 550 px (width="550"). Рамка вокруг таблицы 4px зеленого цвета (border="4" bordercolor="green"). Фон таблицы желтый (bgcolor="yellow"). Здесь мы видим уже 3 строки, описанные тегами <tr></tr>. А вот дальше уже пошли существенные различия, а именно: Параметр colspan="2", примененный в первой и третьей строках, объединяет в себя по две ячейки и в результате получаюся две большие ячейки: 1 и 5. Т.е. как Вы уже поняли параметр: COLSPAN - объединяет ячейки по горизонтали, делая из них одну общую ячейку. Параметр: ROWSPAN - делает тоже самое (объединяет), но только по вертикали, попробуйте применить эти параметры самостоятельно. Параметр: cellpadding="5" задает отступ (расстояние) между рамкой ячейки и ее содержимым. Соотвественно если Вам этот отступ не нужен то ставим "0". Параметр: cellspacing="8" задает отступ (расстояние) между ячейками. Соотвественно если Вам этот отступ не нужен то ставим "0". Как видите все очень просто. У таблиц есть еще одно замечательное свойство: Таблицы - можно вкладывать одна в другую, просто в любую ячейку вкладывается еще одна таблица. Но об этом мы поговорим с Вами в следующей практической части этого урока. Всего Вам доброго. Обновлено: 08.10.2014 г.
Читайте также: Notepad++ отличный редактор для написания кода. HyperSnap - инструмент для захвата изображений и создания скриншотов. eCover Studio - программа для создания 3D обложек. eBook Edit Pro - программа для создания электронных книг. Поддержание чистоты и порядка на вашем компьютере.
Просмотров: 15048 Поделитесь этой информацией со своими друзьями! Комментарии к этой статье (уроку): Комментарии добавил(а): Юлия Здравствуйте!Мне необходимо сделать 4 ячейки,на вашем примере ячейцки 3 и 4 , а мне необходимо добавить еще две ячейки, добавила сама, но первая ячейка получилась в ширину основных ячеяк Комментарии добавил(а): АндрейК Смотрите Листинг 10.1. Комментарии добавил(а): Змейка Горынка У меня вопрос. При написании в программе Notepad++ тегов и значений они выделяются, отличаются написанием. А при написании bordercolor ничего не происходит, то есть рамка не окрашивается. (( хелп Комментарии добавил(а): игорь немного разнообразил таблицу, объединив предыдущие уроки, вот код:<p><table align="center" border="3" title="смета" width="800" bgcolor="#3333FF" bordercolor="#EE0000" cellpadding="5" cellspacing="7"> <tr> <td colspan="4"> </td> <tr> <tr> <td align="center"><font color="#CCFFFF">выполненные работы</font></td> <td align="center">стоимость за единицу</td> <td align="center">колличество единиц</td> <td align="center">итого</td> </tr> <tr> <td align="center"><a href="http:/chelkey.ru" title="организация «Ключ»" target="_blank"><font color="red">шпатлевка</font></a></td> <td align="center">300 рублей</td> <td align="center">200</td> <td align="center">60000 рублей</td> </tr> </table> Комментарии добавил(а): Волейболистка Змейка Горынка, у меня тоже програма не выделяет тег но цвет рамки таблицы меняется. Проверьте! Комментарии добавил(а): сергей у меня по центру вот так: <table align= “center” border="2" width="300" bordercolor="green" неработае! а вот так работает: <table style="margin:0 auto 0 0">...</table> — Таблица располагается слева. Это значение по умолчанию. <table style="margin:0 0 0 auto">...</table> — Расположение таблицы справа. <table style="margin:0 auto 0 auto">...</table> — HTML-таблица по центру. Комментарии добавил(а): Светлана Все отлично получилось! Добавить Ваш комментарий: |
Новости сайта Домены 
Google Adsense |
Навигация
Видео Курсы
Последние заметки
Новости сайта
Архив 2016 год: 2015 год: 2014 год: 2013 год: 2012 год: 2011 год: 2010 год: 2009 год: 2008 год: Сайты друзей Наши ссылки
Если Вам понравился  Наши Аттестаты
|
|||||||||||||||||||||||
|
Разрешается полное или частичное копирование материалов сайта с обязательным |