Электронное приложение

Технология создания web - сайтов

HTML

 

Раздел 2. Язык гипертекстовой разметки HTML.

 
  Оглавление
§ 6. Структура html-документа. Теги и атрибуты.
§ 7. Создание моей первой странички.
§ 8. Форматирование текста.
§ 9. Списки.
§ 10. Простые таблицы.
§ 11. Сложные таблицы.
§ 12. Изображения и управления рисунками.
§ 13. Гиперссылки. Оформление гиперссылок.
§ 14. Формы.

Тест по теме «Язык гипертекстовой разметки HTML.

 

 

§ 10. Простые таблицы.

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

Для добавления таблицы на веб-страницу используется тег <table>.
Таблица должна содержать хотя бы одну строку и колонку.

Задать ширину таблицы можно в пикселах и процентах.

Значение, заданное в пикселах, является фиксированным значением.
В этом примере ширина всегда будет занимать 250 пикселов в окне браузера.

<table width="250"> </table>

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

Эта табличка в виде кода выглядит так:

<table border=1 width="250">
<tr>
  <td>
  Привет :-)
  </td>
</tr>
</table>

Для добавления строк используются теги <tr> и </tr>.
Чтобы разделить строки на колонки применяются теги <td> и </td>.

Таблица с двумя колонками (используем теги <td> и </td>):

Привет :-) Пока!

Она имеет следующий код:

<table border=1>
<tr>
  <td>  Привет :-)</td>
  <td>  Пока!      </td>
</tr>
</table>
Для добавления строк используем теги <tr> и </tr>

Данная таблица имеет две стоки и два столбца:
Весна Лето
Зима Осень

Код таблицы будет выглядеть следующим образом:

<table>
<tr>
  <td>Весна</td>
  <td>Лето</td>
</tr>
<tr>
   <td>Зима</td>
   <td>Осень</td>
</tr>
</table>

Параметры таблицы

Для изменения вида и свойств таблицы используется множество параметров, которые добавляются в теге <table>

<table параметр1=... параметр2=...>

Параметр Значение Описание Пример Смотрите
align= left
right
center
Выравнивание таблицы align=center
width= n
n%
Минимальная ширина
таблицы, можно задавать в
пикселах или процентах
width=50%
height= n
n%
Минимальная высота
таблицы, можно задавать в
пикселах или процентах
height=50%
background= URL Фоновый рисунок background=pic.gif
bgcolor= #rrggbb Цвет фона таблицы bgcolor=#FF9900
bgcolor=yellow
border= n Толщина рамки в пикселах border=8
bordercolor= #rrggbb Цвет рамки bordercolor=#FE0202
cellpadding= n Расстояние между ячейкой
и ее содержимым
cellpadding=7
cellspacing= n Дистанция между ячейками cellspacing=15
frame= void
above
below
lhs
rhs
hsides
vsides
box
Задание типа рамки таблицы frame=hsides

Параметры ячеек

С помощью параметров ячеек можно изменять вид и оформление таблиц.

Параметры, которые могут быть добавлены к тегам <tr> и <td>.

Параметр Значение Описание Пример Смотрите
align= left
right
center
Выравнивание содержимого ячейки align=center
background= URL Устанавливает фоновый рисунок
в ячейке
background=pic.gif
bgcolor= #rrggbb Цвет фона ячейки bgcolor=#FF9900
valign= top
bottom
Выравнивание содержимого
ячейки по высоте
valign=top
width= n
n%
Минимальная ширина ячейки,
можно задавать в пикселах
или процентах
width=30%
height= n
n%
Минимальная высота ячейки,
можно задавать в пикселах
или процентах
height=30%


Параметры, которые могут быть добавлены только к тегу <td>.

Параметр Значение Описание Пример Смотрите
colspan= n
Устанавливает размер ячейки
относительно ниже расположенных колонок;
colspan=2 означает, что ширина
ячейки будет соответствовать ширине
двух колонок.
colspan=2
rowspan= n Размер ячеек по вертикали относительно строк.
rowspan=2 устанавливает,
что высота ячейки соответствует
высоте двух строк
rowspan=2

Пример таблицы.

Времена года Весна Лето
Осень Зима

Рассмотрим ее код:
<table border=5 bordercolor=#FAD0D0 cellpadding=7 width=40%>
<tr>
   <td rowspan=2 align=center><b>Времена года</b></td>
   <td width=20%>Весна</td>
   <td width=20%>Лето</td>
</tr>
<tr>
  <td>Осень</td>
   <td>Зима</td>
</tr>
</table>

В данном случае было задано для всей таблицы:
  • border=5 - толщина рамки таблицы в 5 пикселей;
  • bordercolor=#FAD0D0 - цвет рамки таблицы розовый;
  • cellpadding=7 - расстояние между ячейками и их содержимым;
  • width=40% - ширина таблицы в процентах от всего окна браузера;

    Для ячеек
  • width=20% - ширина ячейки от всей ширины таблицы. Ширина ячейки "Весна" будет равна ширине ячейки "Осень".
  • align=center - размещение текста по центру. По умолчанию текст в ячейке будет расположен слева.
  • rowspan=2 - задание высоты ячейки "Времена года" в две строки.

    Упражнение

    Создайте по образу скриншота таблицу с соблюдением всех правил оформления таблицы.

  •  


    © Васильева Ю.В. Электронное приложение "Уроки сайтостроения"
    © 2012 год.  При использовании материалов обязательна ссылка на владельца