Наука + Бизнес = $$$

Карта Сайта

Суббота, 21.10.2017, 11:29
Приветствуем Вас Гость
Главное Меню
Помощь Сайту
Информационная:
Пожалуйста, расскажите о нас друзьям и сделайте репост:

Финансовая:
Если этот сайт вам помог, будем благодарны за любую финансовую помощь:
R598551293139

Урок №7: создание таблиц в HTML

Создание таблиц в HTML

Таблицы используют для отображения различных статистических данных или информации, которую удобнее предоставлять именно таким способом. Содержимое таблицы находится в ячейках, которые являются отдельными полями, и из которых состоят строки и столбцы таблицы. Надписи, которые находятся над столбцами и описывают их содержимое, называются шапкой таблицы. При создании таблицы возможно понадобиться дополнительное форматирование: выравнивание в ячейках данных, настройка месторасположения рамок или изменение фона таблицы.


Необходимые теги для создания таблиц

При создании таблиц используются следующие парные теги:

  • <table> - указывает на начало и конец таблицы. Все содержимое таблицы и все ее теги и параметры должны находится между тегами <table> и </table>
  • <tr> - отмечает начало и конец строки в таблице. Все ячейки этой строки и шапки должны находится между тегами <tr> и </tr>
  • <th> - определяет начало и конец ячейки шапки таблицы.
  • <td> - задает начало и конец ячейки данных в таблице
  • <caption> - задает название таблицы, этот парный тег также находится в контейнере table.

Для примера создадим небольшую таблицу, которая состоит из шапки, трех столбцов и двух строк, а также имеет название.
<table>
     <caption>Название таблицы</caption>
     <tr>
          <th>Имя посетителя</th>
          <th>Вы знаете язык HTML?</th>
          <th>Дата последнего посещения</th>
     </tr>
     <tr>
          <td>Дмитрий</td>
          <td>Нет</td>
          <td>1 ноября</td>
     </tr>
     <tr>
          <td>Вероника</td>
          <td>Да</td>
          <td>23 января</td>
     </tr>
</table>

В браузере получим такую, не особо привлекательную табличку, так как параметры тегов не были использованы, рамка таблицы также отсутствует.


Параметры тега table

Для красивого оформления таблицы, в теге <table> имеются следующие параметры.

  • border - создает рамку таблицы указанной ширины в пикселах
  • width - задает ширину таблицы в пикселах или % от ширины экрана
  • bgcolor - задает фоновый цвет таблицы
  • background - заливает всю таблицу фоновым рисунком
  • align - выравнивает положение таблицы. Значения этого параметра: влево (right), вправо (left), по центру (center).
  • cellspacing - задает ширину границ между ячейками в пикселах.
  • cellpadding - задает ширину промежутка между рамкой ячейки и ее содержимым с обоих сторон в пикселах

Зная параметры таблицы ее можно неплохо отформатировать. Отформатируем таблицу с помощью всех вышеперечисленных параметров:

<table width="600" border="3" bgcolor="pink" align="center" cellspacing="4" cellpadding="8">
     <caption>Название таблицы</caption>
     <tr>
          <th>Имя посетителя</th>
          <th>Вы знаете язык HTML?</th>
          <th>Дата последнего посещения</th>
     </tr>
     <tr>
          <td><b>Дмитрий</b></td>
          <td>Нет</td>
          <td>1 ноября</td>
    </tr>
    <tr>
          <td>Вероника</td>
          <td>Да</td>
          <td>23 января</td>
     </tr>
</table>

Получим таблицу уже с более симпатичным видом. Результат в браузере:


Объединение ячеек таблицы

Объединить строки и ячейки можно с помощью параметров тега <table>, однако при работе с более сложными таблицами понадобиться задействовать параметы тегов <tr> и <td>. За внешнюю рамку отвечает параметр тега <table> - frame, который имеет следующие значения:
  • void - внешняя рамка таблицы полностью отсутствует.
  • above - отображает только верхнюю часть рамки таблицы
  • below - отображает только нижнюю часть рамки таблицы
  • hsides - отображает только верхнюю и нижнюю части рамки таблицы
  • lhs - отображает только левую часть рамки таблицы
  • rhs - отображает только правую часть рамки таблицы
  • vsides - отображает только левую и правую части рамки таблицы
  • box - рамка отображается со всех четырех сторон

За рамки границ ячеек отвечает параметр тега <table> - rules, который имеет следующие значения:

  • none - убирает все границы между ячейками в таблице.
  • groups - задает границы между группами строк и столбцов
  • rows - границы есть только между строками
  • cols - границы есть только между столбцами
  • all - отображаются все границы

Для примера уберем внешнюю рамку нашей таблицы, а также объединим все ее строки:

<table width="600" border="3" bgcolor="pink" align="center" cellspacing="4" cellpadding="8" frame="void" rules="rows">
     <caption>Название таблицы</caption>
     <tr>
          <th>Имя посетителя</th>
          <th>Вы знаете язык HTML?</th>
          <th>Дата последнего посещения</th>
     </tr>
     <tr>
          <td><b>Дмитрий</b></td>
          <td>Нет</td>
          <td>1 ноября</td>
    </tr>
    <tr>
          <td>Вероника</td>
          <td>Да</td>
          <td>23 января</td>
     </tr>
</table>


Параметры тегов th tr и td

Формирование таблиц происходит построчно, т.е если задать параметры тегу <tr>, то значение примут все ячейки тегов <td> и <th> в данной строке таблицы. В данных тегах работают все параметры форматирования текста, изображения и т.д. Также можно использовать такие параметры:
  • align - выравнивает текст в ячейках по горизонтали, имеет такие значения: по правому краю ячейки (right), по левому (left), по центру (center)
  • valign - выравнивает текст в ячейках по вертикали, имеет такие значения: текст придерживается верхней части ячейки(top), нижней части (bottom), по центру (middle)
  • bgcolor - задает фоновый цвет строки или ячейки
  • width - задает ширину ячеек в пикселах или %, где 100% - вся ширина таблицы
  • height - задает высоту ячеек в пикселах или %, где 100% - вся ширина таблицы

Если не указывать ширину и высоту ячеек, эти параметры будут автоматически формироваться в зависимости от содержимого таблицы. Отредактируем нашу таблицу таким образом (фрагменты на которые стоит обратить внимание выделены красным):

<table width="600" border="3" bordercolor="yellow" bgcolor="pink" align="center" cellspacing="0" cellpadding="8">
     <caption>Название таблицы</caption>
     <tr bgcolor="plum">
          <th width="40%">Имя посетителя</th>
          <th width="20%">Вы знаете язык HTML?</th>
          <th width="40%">Дата последнего посещения</th>
     </tr>
     <tr align="center">
          <td bgcolor="red"><b>Дмитрий</b></td>
          <td>Нет</td>
          <td>1 ноября</td>
     </tr>
     <tr 
align="center">

          <td bgcolor="green"><b>Вероника</b></td>
          <td>Да</td>
          <td><em>23 января</em></td>
     </tr>
</table>

В браузере получим такой результат:

Рассмотрим выделенные параметры. В данной таблице cellspacing="0" что отключило промежуток между основной рамкой и ячейками таблицы. Задан параметр border="3" и bordercolor="yellow" - это создало границе таблицы желтого цвета, шириной в 3 пиксела. Тег tr bgcolor="plum" - задал фон всем ячейкам первой строки, которая является шапкой таблицы. Теги th width="40%" 20% 40% - задали ширину столбцов таблицы в процентах, именно поэтому центральный столбец меньше остальных. Тег tr align="center" - теперь весь текст в ячейках этой строки выравнивается по центру. Тег td bgcolor="red" - задал красный фон данной ячейки. Цвет фона ячейки стоит по приоритетам выше чем, цвет в таблице в общем, поэтому в некоторых ячейках розовый цвет сменился на другие.


Параметры объединения ячеек тега td

Ячейки таблицы можно объединять между собой, убирая их горизонтальные и вертикальные границы. Для этого в теге <td> используют такие параметры:

  • colspan - объединяет горизонтальные ячейки, в значении этого параметра указывается сколько ячеек необходимо объединить
  • rowspan - объединяет вертикальные ячейки, в значении этого параметра также указывается сколько ячеек необходимо объединить

Cоздадим небольшую веб-страничку с табличной структурой и поместим в ее основной контент нашу последнюю таблицу:

Шапка сайта в объединенных ячейках с высотой 100 пикселей.
Главное меню
Название таблицы
Имя посетителя Вы знаете язык HTML? Дата последнего посещения
Дмитрий Нет 1 ноября
Вероника Да 23 января
Нижняя часть сайта в объединенных ячейках с высотой 30 пикселей.

Данная страничка создана с помощью таблицы, с тремя строками и двумя столбцами (2x3). Ячейки строк "Шапка сайта" и "Нижняя часть сайта" объединены с помощью параметра td colspan="2". Как это выглядит в HTML документе:

<table width="80%" border="2" align="center" cellspacing="1" cellpadding="10">
     <tr bgcolor="#FFDEAD">
          <td colspan="2" height="100">Шапка сайта в объединенных ячейках с высотой 100 пикселей.</td>
     </tr>
     <tr bgcolor="#FFFFFF">
          <td width="175"><!-- Основной контент страницы, сюда вставим код предыдущей таблицы --> </td> </tr> <tr bgcolor="#FFDEAD">
          <td colspan="2" height="30">Нижняя часть сайта в объединенных ячейках с высотой 30 пикселей.</td>
     </tr>
</table>

В результате получилась таблица в таблице. Также построение сайтов может быть с помощью фреймов и блоков. Знание табличной структуры сайтов очень важно и в дальнейшем очень поможет. Значительно расширяет возможности работы с таблицами CSS: Оформление таблиц в CSS


Форма входа
Поиск по сайту
Полезные Сайты
Счетчики
Счетчик PR-CY.Rank
Подписка на обновления
Ваш e-mail: *
Ваше имя: *
Контакты
PhantomX5 © 2014-2017Пишем нам: PhantomX5@mail.ru