Как создать свой сайт бесплатно? Как сделать сайт своими руками? Как заработать в Интернете? Создание сайтов на заказ.

Запрос должен быть не менее 4-х символов.

RSS-лента

Сегодня:        Добавить в Избранное       Написать Автору        Обмен валют        Оплата сервисов

Урок 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

<table align= “center” border="2" width="300" bordercolor="green" bgcolor="yellow">
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
<tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</table>

А вот как выглядит таблица, код которой указан в Листинге 10.1:

Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4

 

А теперь прокомментирую каждый параметр в коде Листинга 10.1.

Как Вы уже заметили, эта таблица имеет две строки, описываемые тегами: <tr> </tr> . В каждой строке по два столбца (ячейки 1, 2 и 3, 4), которые описываются тегами: <td> </td>. Ширина таблицы 300 пикселей атрибут: width="300".

Цвет фона таблицы и всех ячеек желтый: bgcolor="yellow". Цвет рамки таблицы зеленый: bordercolor="green". Толщина рамки 2 пикселя: border="2" (чем больше цифра – тем толще рамка, при значении 0 – рамка не видна) . Таблица выровнена по центру: align= "center".

Если ячейка пустая, то вокруг нее рамка не рисуется. Если рамка все же нужна вокруг пустой ячейки, то в нее надо ввести символьный объект: &nbsp; (non-breaking space - неразрывающий пробел). Внешне ячейка по-прежнему будет пуста, но вокруг нее появится рамка (&nbsp; - обязательно должен набираться строчными буквами и закрываться точкой с запятой).

Приведу еще несколько тегов, которые нам понадобятся в следующей части урока:

COLSPAN Объединение указанного числа колонок.
ROWSPAN Объединение указанного числа рядов.
CELLSPACING Расстояние между ячейками
CELLPADDING Расстояние между рамкой ячейки и ее содержимым

 

Чтобы лучше понять значение этих тегов взгляните на Листинг 10.2.

Листинг 10.2

<table align="center" border="4" width="550" bordercolor="green" bgcolor="yellow" cellpadding="5" cellspacing="8" >
<tr>
<td colspan="2">Ячейка 1</td>
</tr>
<tr>
<td WIDTH="120px">Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
<tr>
<td colspan="2">Ячейка 5</td>
</tr>
</table>

А вот что видит посетитель сайта:

Ячейка 1
Ячейка 3 Ячейка 4
Ячейка 5

 

Общая ширина таблицы равна 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 - программа для создания электронных книг.

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

 

Просмотров: 11424


Поделитесь этой информацией со своими друзьями!


Комментарии к этой статье (уроку):

Комментарии добавил(а): Юлия
Дата: 2010-06-26

Здравствуйте!Мне необходимо сделать 4 ячейки,на вашем примере ячейцки 3 и 4 , а мне необходимо добавить еще две ячейки, добавила сама, но первая ячейка получилась в ширину основных ячеяк

Комментарии добавил(а): АндрейК
Дата: 2010-06-27

Смотрите Листинг 10.1.

Комментарии добавил(а): Змейка Горынка
Дата: 2011-03-05

У меня вопрос. При написании в программе Notepad++ тегов и значений они выделяются, отличаются написанием. А при написании bordercolor ничего не происходит, то есть рамка не окрашивается. (( хелп

Комментарии добавил(а): игорь
Дата: 2011-03-06

немного разнообразил таблицу, объединив предыдущие уроки, вот код:<p><table align="center" border="3" title="смета" width="800" bgcolor="#3333FF" bordercolor="#EE0000" cellpadding="5" cellspacing="7"> <tr> <td colspan="4">&nbsp;</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>

Комментарии добавил(а): Волейболистка
Дата: 2011-03-11

Змейка Горынка, у меня тоже програма не выделяет тег но цвет рамки таблицы меняется. Проверьте!

Комментарии добавил(а): сергей
Дата: 2011-09-02

у меня по центру вот так: <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-таблица по центру.

Комментарии добавил(а): Светлана
Дата: 2011-11-20

Все отлично получилось!

Добавить Ваш комментарий:

Введите сумму чисел с картинки:
Введите сумму чисел

GudzonPartner.com

Новости сайта


05.08.2014
Новый раздел! Платежные системы Интернета. Все о платежных системах и сервисах.

09.08.2013
Новинка! Обзор и Анализ реальных способов заработка. Как и Сколько можно заработать в Интернете? Цифры. Факты. Комментарии.

28.05.2013
Обновилась Партнерка сайта! Зарабатывайте вместе с нами! "Новые товары и рекламные материалы"

25.05.2013
Видео Курс! "Как создать свой Информационный Бизнес в Интернете" Зарабатывайте: от 30000 ++ рублей.

Почтовая рассылка! Бесплатные электронные книги из серии: "Секреты создания сайтов"


Почтовая рассылка

Новинка!
Как реально заработать
в Интернете?
"Обзор видов и способов заработка."

Специальный Отчет:

Специальный Отчет: Как и сколько можно реально заработать в Интернете? Рельные цифры, факты и анализ различных способ заработка в Интернете

В подарок всем подписчикам!

SmartResponder.ru
Ваш e-mail: *
Ваше имя: *

Полный список наших почтовых рассылок!

Домены

Сервис мгновенной регистрации Доменов

Google Adsense



Навигация

Уроки HTML

CSS уроки

Статьи

Инструменты

Шаблоны сайтов

Книги

Украшения

Сайт от А до Я

Заработать в Интернете

Обман в Интернете

Охрана труда

МОДУЛЬНЫЕ КАРТИНЫ

PHP УРОКИ

Услуги

Скрипты

Почтовая Рассылка

SEO

jQuery

Специальная оценка условий труда (СОУТ) - АРМ

Платежные системы Интернета

УРОКИ ФОТОШОП

Секретный раздел

Видео Курсы

Видео курс по созданию сайтов: Сайт от А до Я
С нами сделать сайт
сможет даже Ребёнок!
"Сайт от А до Я"
Узнать сейчас >>>


Хотите заработать?
2-х Уровневая
Партнерская программа!

Присоединяйтесь.


Последние заметки

Модульная картина: Роскошь красного бархата

Модульная картина абстракция: Энергия солнца

Модульная картина: Синие розы

Модульная картина: Водопад

Модульная картина: Орхидеи

Новости сайта

RSS Лента Новостей сайта www.LuksWeb.ru

Наши новости в Твиттере

Архив

2016 год:

2015 год:

2014 год:

2013 год:

2012 год:

2011 год:

2010 год:

2009 год:

2008 год:

Сайты друзей

Регистрация доменов

ООО "ПК "ЛюксСтрой"

Деревянные дома от СПК "Ванда"

Наши ссылки

Если Вам понравился
наш сайт, установите
Нашу ссылку, и
Получите подарки!!!

QR код сайта www.LuksWeb.ru

Наши Аттестаты


Проверить аттестат

 

Аттестован системой Z-PAYMENT
Проверено Z-PAYMENT