Таблицы в HTML, являются наиболее мощным и часто применяемым средством. В основном веб-мастера применяют таблицы не только как метод группировки отображения данных, но и для форматирования веб-страниц.
Давайте рассмотрим оба способа использования HTML таблиц. Но для начала мы узнаем, как добавить таблицы в HTML документ, а также рассмотрим возможности, которые нам предоставляет HTML для работы с таблицами.Каждая таблица в HTML состоит из множества ячеек, которые располагаются в строках. А уже все эти строки и образуют целую таблицу. Для обозначение таблицы применяется парный тег <table> и </table>.
Как вам уже известно, что таблицы состоят из строк и ячеек. И для того, чтобы создать простейшую таблицу, нам понадобятся ещё два тега: это парные теги <tr> и </tr> которые используются для создания строк, и парные теги, <td> и </td> отвечающие за создание ячеек. (Причем закрывающие теги строк и ячеек могут отсутствовать)
Итак, учитывая то, что мы уже знаем, как создать простейшую HTML таблицу, давайте применим приведенные выше сведения, и создадим простейшую таблицу, как показано на (рисунке 1).
Простейшая таблица рис.1
Код простейшей таблицы, которая показана на рисунке 1 (выше)<table> <tr> <td>1-Ячейка таблицы</td> <td>2-Ячейка таблицы</td> <td>3-Ячейка таблицы</td> <td>4-Ячейка таблицы</td> </tr> <tr> <td>5-Ячейка таблицы</td> <td>6-Ячейка таблицы</td> <td>7-Ячейка таблицы</td> <td>8-Ячейка таблицы</td> </tr> <tr> <td>9-Ячейка таблицы</td> <td>10-Ячейка таблицы</td> <td>11-Ячейка таблицы</td> <td>12-Ячейка таблицы</td> </tr> </table>Код сложной таблицы, пример на рисунке 2
<table style="width: 450px; height: 250px;" border="1" align="center" bgcolor="#FFFFFF" bordercolor="#006699"> <tbody> <tr> <td colspan="2" align="center">Объединение столбцов Атрибут "<strong>colspan</strong>"</td> <td rowspan="2">Объединение строк Атрибут "<strong>rowspan</strong>"</td> </tr> <tr> <td align="right" valign="top">Атрибут "<strong>valign</strong>" "top"<br /></td> <td valign="bottom">Атрибут "<strong>valign</strong>" "<strong>bottom</strong>"</td> </tr> </tbody> </table>Получившаяся таблица на рисунке 1. выглядит некрасиво. Всё это потому, что теги, которые мы использовали для создания простейшей таблицы (<table>, <tr>, <td>), могут иметь различные атрибуты, которые необходимо указывать: это может быть фон, границы, размеры и так далее.
Давайте сейчас рассмотрим атрибуты, которые применяются для тега <table> и </table>. Для того, чтобы увидеть как будет изменяться таблица с применяемыми к тегу <table> атрибутами, скопируйте код таблицы и поместите его в текстовый документ, с расширением .html и откройте браузером, добавляя атрибуты в код таблицы и обновляя страницу, вы увидите, как будет выглядеть ваша таблица в браузере.
Атрибуты тега: <table>
1) Атрибут "border", задает ширину рамки всей таблицы в пикселях, записывается так: <table border="1"> </table>.
2) Атрибуты "width" и "height" - этот атрибут задаёт рекомендуемую ширину и высоту вашей таблицы, записывается так: <table border="1" width="400" height="200"> </table>
3) Атрибут "bordercolor" - задаёт цвет рамки всей таблицы, записывается так: <table border="1" bordercolor="#006699" width="400" height="200"> </table>.
4) Атрибут "align" - выравнивание таблицы, align=left - таблица будет выравниваться по левому краю, align=right - по правому, записывается так: <table border=1 bordercolor="#006699" width="400" height="200" align="right"> </table>
5) Атрибут "bgcolor" - задаёт цвет фона таблицы, записывается так: <table border=1 bordercolor="#006699" width="400" height="200" align="right" bgcolor="#FFFFFF"> </table>
Думаю, что атрибутов вам достаточно!
Теперь рассмотрим атрибуты тега: <tr> и <td>
Атрибуты тега <tr>
1) Атрибут тега <tr> "height". Обратите внимание, что у тега <tr> нет атрибута "width" (ширина), так как тег <tr> отвечает за строку, и, соответственно, за высоту. А за ширину уже отвечают столбцы. Хоть и есть у тега <tr> атрибут "height" , но он практически уже нигде не используется.
Атрибуты тега <td>
2) Атрибут тега <td> "width", атрибута "height" (высота) у тега <td> нет, так как тег <td> отвечает за ячейку таблицы и ее ширину, а за высоту отвечает строка (тег <tr>).
3) Атрибут тега <td> "colspan". Значение этого атрибута означает количество столбцов, которое занимает данная ячейка. Другими словами этот атрибут позволяет объединить нескольких смежных ячеек по вертикали в одну.
4) Атрибут тега <td> "rowspan". Значение этого атрибута означает количество строк, которое занимает данная ячейка. Соответственно этот атрибут позволяет объединить несколько ячеек в одну по горизонтали.
5) Атрибут тега <td> "align". Этот атрибут позволяет выравнивать элементы внутри ячейки по горизонтали. Имеет три значения: "left" (по левому краю ячейки), "center" (по центру), "right" (по правому краю ячейки). Если ничего не указано, выравнивание будет по левому краю.
6) Атрибут тега <td> "valign". Этот атрибут позволяет выравнивать элементы внутри ячейки по вертикали. Также как и "align" имеет всего три значения: "top" (по верху), "middle" (по середине), "bottom" (по низу). По умолчанию имеет значение "middle" по середине.
Давайте применим то, что мы сейчас узнали.
Сложная таблица рис.2
Вот в принципе и всё, то что необходимо знать про HTML таблицы и успешно ими пользоваться.
Cоздание html таблицы в редакторе Joomla.
Для создания таблицы в Joomla можно использовать редактор TinyMce который находится в Joomla по умолчанию.Я же буду использовать редактор Jce - Вы же можете использовать любой редактор, принцип создания таблиц редактором один и тот же.
Итак, для начала нужно открыть или создать новый материал в который нужно вставить таблицу, далее нужно воспользоваться менеджером таблиц, кликнув по иконке
"Добавить / Изменить таблицу" в панеле инструментов вашего редактора.Во всплывающем окне менеджера таблиц, необходимо нужные параметры таблицы.
Например, Вам нужно создать таблицу как на рисунке 2. Для этого нужно ввести следующие данные:
- В поле столбцы нужно ввести значение "3"
- В поле строки значение "2"
- В поле ширина нужно ввести значение, например 400px
- В поле граница ввести 1 (это означает, что толщина границы будет равна 1px)
В итоге, у нас получится вот такая таблица:
Далее нужно выделить мышкой 1 и 2 столбец в первой строке:
затем нужно нажать кнопку объединить ячейки (
)и тоже самое нужно проделать с 3-стобцом 1-строки и 3-столбцом 2-строки.
И таким образом, благодаря объединению ячеек мы получили таблицу как на рисунке 2.
Теперь используя визуальный редактора Jооmla - Вы можете создавать простые, или сложные варианты таблиц, но будьте внимательны и не забывайте про ширину области для контента на Вашем сайте, чтобы при создании таблицы её ширина не привышала это значение.
Скачать файлы:
Комментариев нет:
Отправить комментарий