Презентация на тему "HTML. Создание таблиц"

• 1 слайд

  Создание таблиц Основы языка HTML

• 2 слайд

  Таблица – это процесс форматирования информации в виде строк и столбцов Таблицы позволяют решать дизайнерские задачи: выравнивать части страницы друг относительно друга, размещать рядом рисунки и текст, управлять цветом и т.д. Размер рамки может быть автоматически согласован с размером окна просмотра в браузере, с размерами ячеек и информацией, размещенной в ячейках. Можно создавать и простые, и сложные таблицы

• 3 слайд

  Особенности создания таблиц: Таблица формируется слева направо и сверху вниз При создании таблицы используется принцип вложения: сначала формируется общая граница таблицы, затем строки, а в строках – столбцы. (Понятие «столбец» в HTML нет!) Если ячейка должна быть пуста, то необходимо поместить в нее символ «пробел» (Код пробела - &#160), иначе она проигнорируется браузером и не будет учитываться при формировании таблицы. В ячейках таблицы может размещаться: текст или графические изображения или ячейка может быть пустой. Форматировать можно всю таблицу, отдельно строки или отдельно ячейки.

• 4 слайд

  <TABLE> … </TABLE> НАЧАЛО и КОНЕЦ ТАБЛИЦЫ Основные атрибуты тега:

• 5 слайд

  Дополнительные атрибуты тега:

• 6 слайд

  <TR>… </TR> СТРОКА Атрибуты тега:

• 7 слайд

  Ячейки Ячейки «шапки» таблицы Ячейки данных <TH>…</TH> <TD>…</TD> Атрибуты тегов: ALIGN, VALIGN, BGCOLOR, BORDERCOLOR Примечание. Значения этих атрибутов аналогичны, как для таблицы и строки. Есть атрибуты, которые относятся только к ячейкам: Примечание. Объединенные ячейки описываются один раз!

• 8 слайд

  Примечание. Теги <TR>, <TH> и <TD> можно не закрывать, функцию конечного тега выполняет следующий элемент, который определяет структуру таблицы Заголовок таблицы <CAPTION>… </ CAPTION > ЗАГОЛОВОК ТАБЛИЦЫ Располагается внутри тега<TABLE>, но выводится вне рамки таблицы Атрибуты тега:

• 9 слайд

  Пример создания таблицы: Таблица 1. <table border=1 width=400> <caption valign=bottom align=center> Таблица 1. </caption> <tr> <th colspan=4 bgcolor=yellow><font color=red> Данные таблицы </th> </tr> <tr> <td> &#160 </td> <td> &#160 </td> <td> &#160 </td> <td> &#160 </td> </tr> <tr> <td> &#160 </td> <td> &#160 </td> <td> &#160 </td> <td> &#160 </td> </tr> </table>

• 10 слайд

  Пример создания таблицы: <table border=2 width=100%> <tr> <th colspan=3 bgcolor=red><font color=red> Модели телефонов </th> </tr> <tr> <td bgcolor=yellow> 1. </td> <td rowspan=2> Nokia
  (Нокиа) </td> <td> Snapper </td> </tr> <tr> <td> N-Gage </td> </tr> <tr> <td bgcolor=yellow> 2. </td> <td rowspan=2> Siemens
  (Сименс) </td> <td> WristPhone </td> </tr> <tr> <td> Xelibri 1 </td> </tr> </table>