Урок 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".
Если ячейка пустая, то вокруг нее рамка не рисуется. Если рамка все же нужна вокруг пустой ячейки, то в нее надо ввести символьный объект: (non-breaking space - неразрывающий пробел). Внешне ячейка по-прежнему будет пуста, но вокруг нее появится рамка ( - обязательно должен набираться строчными буквами и закрываться точкой с запятой).
Приведу еще несколько тегов, которые нам понадобятся в следующей части урока:
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 - программа для создания электронных книг.
Поддержание чистоты и порядка на вашем компьютере.
Просмотров: 14093
Здравствуйте!Мне необходимо сделать 4 ячейки,на вашем примере ячейцки 3 и 4 , а мне необходимо добавить еще две ячейки, добавила сама, но первая ячейка получилась в ширину основных ячеяк
У меня вопрос. При написании в программе 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-таблица по центру.
|