Язык разметки гипертекста HTML Урок 4 Таблицы © Николаева Вера Александровна, 2009 - презентация

1 Язык разметки гипертекста HTML Урок 4 Таблицы © Николаева Вера Александровна,

2 Таблицы на веб-страницах используются как для создания собственно таблиц, так и для позиционирования текста и графики друг относительно друга (как в процессоре MS Office Word). Пример 1: Таблицы на веб-страницах © Николаева Вера Александровна, 2009 Пусть таблица 1 имеет столбцы одинаковой ширины ЛистингHTMLЛистингHTML - тег первой строки 1 - первая ячейка первой строки 2 - вторая ячейка первой строки 3 - третья ячейка первой строки - тег второй строки 4 - первая ячейка второй строки 5 - вторая ячейка второй строки 6 - третья ячейка второй строки Ширина абсолютная, в точках или width= "90%" Ширина относительная, в % от ширины веб-страницы Если все столбцы (а значит и все их ячейки) имеют равную ширину, то браузер сам их выведет одинаковой ширины, автоматически разделив ширину таблицы на число столбцов.

3 Пример 2: Таблицы на веб-страницах © Николаева Вера Александровна, 2009 Пусть таблица 2 имеет столбцы разной ширины ЛистингHTMLЛистингHTML Теги HTML диктуют браузеру какой ширины он должен вывести на экран каждый из столбцов в % от ширины всей таблицы. Причем, так как ячейки строки 2 зависят от ячеек строки 1, то ширину ячеек можно задать только для 1-й строки, а для 2-й - не задавать. Таблицы на веб-страницах Способ 1. Ширину столбцов задаем в % от ширины таблицы: посмотри и сравни 6 клеточек3 клеточки 1 клеточка 10 клеточек

4 Пример 2: Таблицы на веб-страницах © Николаева Вера Александровна, 2009 Итак, таблица 2 имеет столбцы разной ширины ЛистингHTMLЛистингHTML Итак, так как ячейки строки 2 зависят от ячеек строки 1, то ширину ячеек можно задать только для 1-й строки, а для 2-й - не задавать. Браузер и тогда выведет таблицу на веб-страницу правильно. Таблицы на веб-страницах Способ 1. Ширину столбцов задаем в % от ширины таблицы: 6 клеточек3 клеточки 1 клеточка 10 клеточек

5 Пример 2: Таблицы на веб-страницах Продолжаем. Таблица 2 имеет столбцы разной ширины ЛистингHTMLЛистингHTML Таким образом, ширина первого столбца – 480, второго – 240, третьего – 80. Таблицы на веб-страницах Способ 2. Ширину столбцов задаем в абсолютных значениях, в точках. Решаем пропорцию для определения ширины столбца 1: 6 клеточек3 клеточки 1 клеточка 10 клеточек % x - 60% x = 800 x 60 / 100 = © Николаева Вера Александровна, 2009

6 Пример 3 (ширину таблицы и ширину ячеек в этом примере мы не рассматриваем): Таблицы на веб-страницах Таблица 3 имеет столбцы и/или строки, объединенные друг с другом. То есть ячейка занимает несколько столбцов или несколько строк ЛистингHTMLЛистингHTML Таблицы на веб-страницах Тогда в теге таблицы показывают слияние ячеек атрибутами rowspan (слияние по строке) и colspan (слияние по столбцу). Ячейка 1 занимает 2 строки Ячейка 2 занимает 2 столбца Ячейка 1 занимает 2 строки Ячейка 2 занимает 2 столбца

7 Таблицы на веб-страницах Продолжаем. Таблица 4 имеет столбцы и строки, объединенные друг с другом. То есть ячейки занимают несколько столбцов и несколько строк Таблицы на веб-страницах Если ячейка занимает 3 строки, то слияние ячеек задают атрибутом rowspan="3". Если ячейка занимает 4 столбца, то слияние ячеек задают атрибутом colspan="4". И так далее. © Николаева Вера Александровна, 2009

8 Таблицы на веб-страницах Если все ячейки таблицы заполнены информацией, надо создать отступ ячеек друг от друга и отступ текста в ячейке от ее границы. Тогда таблица на веб-странице будет выглядеть красиво, информация не будет «наползать» на границы. Таблицы на веб-страницах Отступ информации (текста) ячеек от их границ задают атрибутом cellpadding, а расстояния между границами соседних ячеек задают атрибутом cellspacing. © Николаева Вера Александровна, 2009 Пример 4. В ячейках таблицы записан текст, и таблица имеет обрамление: Если таблица используется как каркас и границ не имеет, то значения этих атрибутов целесообразно задавать равными 0. На вид таблицы отсутствие отступов не влияет. Пример 5:

9 Таблицы на веб-страницах Практическое задание: Таблицы на веб-страницах © Николаева Вера Александровна, 2009 В программе Блокнот, то есть на языке HTML, тегами создай веб- страницу с именем proba-table.htm с таблицей 4 х 4. В каждую ячейку впиши произвольный текст. В таблице используй слияние столбцов и строк – по твоему выбору. Например, так Москва – столица нашей Родины. Стоит на 7 холмах.Основана Москва в 1147 году.Имеет 6 колец. Имеет метро.Более 120 музеев. Состоит из 10 административных округов.Река Москва протекает через наш город.