Сложные таблицы
Конечно же на языке HTML можно создавать довольно сложные таблицы с объединением ряда ячеек, как по столбцам, так и по строкам.
Для этого у тэга <td> существуют атрибуты:
colspan - значение, присвоенное этому атрибуту означает число объединенных колонок;
rowspan - значение, присвоенное этому атрибуту означает число объединенных строк;
Еще один атрибут тэга <td> - это nowrap. Он означает, что переноса по словам в данной ячейке таблицы не будет и ширина столбца будет увеличена до той величины, которая удовлетворяет данному уловию.
На ряду с тэгом <td> можно использовать тэг <th>. Этот тэг полность идентичен <td> и имеет те же атрибуты. Однако, используется для создания заголовочных ячеек таблицы Браузер интерпретирует этот тэг применяя несколько иной шрифт и стиль написания текста в подчиненной ему ячейке и по умолчаниею устанавливает align равный center, т.е. центрирует текст в ячейке. Следует быть очень осторожнымс применением тэгов объединения ячеек. Обратите внимание: в приведенном ниже примере текст Текстовый элемент в объединенных ячейках по столбцам записан с применением атрибута colspan=2, означающего объединение двух ячеек столбца. И заметьте, в теле каждого из тэгов <tr>...<tr> расположены по две пары тэгов <td>...<td>. Т.е. это значит, что таблица состоит из двух столбцов. Там же, где применен атрибут colspan=2 указанная пара тэгов всего одна, так как две ячейки объеденены в одну.
Текстовые элементы Параметр и Значение помещены в тело тэга <th>, образуя заголовочные элементы таблицы.
Пример:
<table border="1" cellpadding="2" cellspacing="2"
width="100%">
<tr>
<td colspan=2 NOWRAP align=center>
Текстовый элемент в объединенных
ячейках по столбцам.
Этот текст не будет перенесен
на другую строку.
</td>
</tr>
<tr>
<th width="50%">Параметр</td>
<th width="50%">Значение</td>
</tr>
<tr>
<td width="50%">Ускорение свободного
падения, м/с2</td>
<td width="50%" align=center>9.81</td>
</tr>
</table>
Источник: web-brodilka.ru
Изображения и таблицы
Вернемся к прошлому уроку. Удалось ли Вам объеденить строки. Если нет, то не отчаивайтесь. Сейчас мы с Вами это проделаем.
Вот такую таблицу нам предстоит сделать:
Продукт |
Содержание в 100 гр. продукта, гр. |
||
Молоко |
Белки |
Жиры |
Углеводы |
7,3 |
3,5 |
17,2 |
|
Данная таблица сочетает в себе как объединение строк, так и столбцов.
А вот он код этой таблицы
<table border="1" bordercolor="blue"
cellspacing="0" align="center">
<tr>
<th>Продукт</th>
<th colspan="3">Содержание в 100 гр.
продукта, гр.</th>
</tr>
<tr>
<td align="center" rowspan="2">Молоко</td>
<td align="center">Белки</td>
<td align="center">Жиры</td>
<td align="center">Углеводы</td>
</tr>
<tr>
<td align="center">7,3</td>
<td align="center">3,5</td>
<td align="center">17,2</td>
</tr>
</table>
Не трудно заметить, что в этой таблице четыре столбца и три строки. Просто в первой строке объеденены три столбца (<th colspan="3">). Во второй строке тэг <rowspan="2"> означает объединение этой строки с последующей, но он же выполняет функцию первого столбца. Поэтому для следующей строки этот тэг уже не используется. С объединением закончили.
Часто возникает вопрос как красиво совместить текст и изображение.Часто в этом случае прибегают к помощи таблиц.
К примеру возьмем следующий рисунок:
Он выполнен в формате GIF, на прозрачном фоне.
Разделим его пополам по горизонтали. В этом также на помощь может прийти программа "Photoshop". Тем более, что в этой программе даже есть специальный инструмент - Slice Control. Я же не пользуюсь им, а "режу" холст, изменяя его размеры с помощью Image -> Canvas Size (размер холста). После "разрезания" рисунка назовем его части 1.gif и 2.gif. Получим следующее (кстати, то что Вы сейчас видите ниже сделано также при помощи таблицы):
|
|
1.gif |
2.gif |
А теперь посмотрим, что получилось из наших "лоскутков":
|
всегда будет |
|
Пусть |
|
солнце !!! |
|
|
|
Солнце, конечно, не очень-то, но это всего лишь пример.
Ну и, разумеется, код:
<table border="0" cellpadding="0"
cellspacing="0" align=center>
<tr>
<td align="center" width="80" height="30">
</td>
<td align="center" bgColor="blue"><
font size=4
color=yellow><b>всегда будет</b></font></td>
<td align="center" width="80"> </td>
</tr>
<tr bgColor="blue">
<td align="center"><font size=4 color=yellow>
<b>Пусть</b></font></td>
<td align="center" width="168"><
img src="sun1.gif" width="168" height="63"></td>
<td align="center"><font size=4
color=yellow><b>солнце !!!</b></font></td>
</tr>
<tr>
<td align="center"> </td>
<td align="center" width="168"><
img src="sun2.gif" width="168" height="63"></td>
<td align="center"> </td>
</tr>
</table>
Как видите, мы уже начали активно пользоваться как тэгами, так и их атрибутами (и не только для таблиц).
А что это за ? Это специальный символ, означающий пробел. Специальные символы мы рассмотрим в следующий раз. А Вы попробуйте создать и связать ссылки со следующими файлами: lets.html (для слова "Пусть"), always_be.html (для фразы "всегда будет") и sun.html (для слова "солнце!!!"). Если Вы поняли задание и Вам удалось его выполнить, то Вы ощутили еще одно удобство использования таблиц. Источник: web-brodilka.ru
Таблицы, ссылки и спецсимволы
Обратимся к прошлому заданию. Требовалось связать элементы таблицы с файлами: lets.html (для слова "Пусть"), always_be.html (для фразы "всегда будет") и sun.html (для слова "солнце!!!"). Мы сейчас не будем заниматься созданием файлов lets.html, always_be.html и sun.html. Вместо них мы запишем следующий код:
<a href="#">Link</a>
а в теле тэга вместо Link поместим элементы таблицы, как это показано ниже:
|
всегда будет |
|
Пусть |
|
солнце !!! |
|
|
|
Код таблицы следующий:
<table border="0" cellpadding="0"
cellspacing="0" align=center>
<tr>
<td align="center" width="80"
height="30"> </td>
<td align="center"
bgColor="#5511ff">
<a href="#"
title="Ссылка на файл always_be.html,
но его нет, он условен">
<b>всегда
будет</b></a>
</td>
<td align="center"
width="80"> </td>
</tr>
<tr bgColor="#5511ff">
<td align="center">
<font size=4 color=yellow><b>
<a href="#"
title="Ссылка на файл lets.html,
но его нет, он условен">Пусть</a>
</b></font></td>
<td align="center"
width="168"><img
src="../sun1.gif" width="168" height="63"></td>
<td align="center"><font size=4
color=yellow><b>
<a href="#"
title="Ссылка на файл sun.html,
но его нет, он условен">
солнце !!!</a>
</b></font></td>
</tr>
<tr>
<td align="center"> </td>
<td align="center" width="168">
<img src="../sun2.gif"
width="168" height="63"></td>
<td align="center"> </td>
</tr>
</table>
Значек # в тэге <a> применяется для создания закладок.
Сейчас мы рассмотрим еще два полезных атрибута данного тэга.
Первый из них это - title. Он формирует текст всплывающей подсказки, которая возникает при наведении на ссылку. Наведите на слово "Пусть" и задержите курсор мыши на ней. В течении менее, чем одной секунды вы увидите всплывающий текст. Второй атрибут это закладка. Она применяется на страничках с очень большой длиной по вертикали. Это ссылка, на какой-то фрагмент HTML-файла. Броузер, при щелчке на ссылку с закладкой сам прокрутит страничку и переместит Вас, поместив ту часть, где установлена закладка, в верхней части окна броузера.
Нажмите на ссылку "Наверх", расположенную ниже и вы окажетесь в верхней части страницы.
Наверх
Это и есть работа закладки. Сначала заладку нужно установить. Это сделано помещением сразу после открывающего тэга <body> следующего кода:
<a href="#" name="top"></a>
name означает имя закладки. На странице может быть несколько закладок. А чтобы обратиться к ней, следует записать код (в нашем случае - для "Наверх"):
<a href="#top">Наверх</a>
По умолчанию, запись вида <a href="#">Ссылка</a>, т.е. закладка без атрибута name также приводит к началу страницы.
Поэкперементируйте с закладками.
А теперь о специальных символах. В основном, это символы, которых нет на клавиатуре. Сюда можно отнести весь греческий алфавит и некоторые другие символы. Любой специальный символ для записи на языке HTML начинается со значка &, потом идет его условное обозначение и заканчивается он точкой с запятой. Кстати & может быть отображен на странице только с помощью специального символа &. Это именно из-за того, что с него и начинаются спец. символы. И не смотря на то, что этот символ на клавиатуре есть, его просто как & в исходном тексте HTML документа записать нельзя. Ибо все, что будет следовать за ним, броузер будет пытаться интерпретировать как спец. символ. И ситуации тут могут быть самые непредсказуемые. Вот наиболее часто употребляемые специальные символы.
Символ |
Запись |
Примечание |
" |
" |
Кавычки |
§ |
§ |
Значек параграфа |
± |
± |
Знак "плюс-минус" |
< |
< |
Знак "меньше" |
> |
> |
Знак "больше" |
Следует особо отметить, что просто знак пробела в исходном тексте HTML-документа броузером тоже обрабатывается весьма специфично. Сколько бы пробелов Вы не пытались ставить в исходном тексте, броузер их отобразит как один. А если все же Вы задумали отделение несколькими пробелами, то здесь на помощь приходит спец.символ . Все спец. символы есть ни что иное как сокращенный вариант (аббревиатура) их полного названия. означает Non-breaking space (непрерывный пробел). Этот вид пробела бы применен в таблице для эмуляции заполнения ячеек, которые должны выглядеть как пустые. В противном случае (без применения этого спецю символа) таблица выглядела бы как здание с вывалишвимися кирпичами. Запись греческих букв также не представляет труда, надо только знать их названия.
Пример:
Буква (название) |
Вид |
Запись |
Альфа |
α |
α |
Бетта |
β |
β |
Омега |
ω |
ω |
Для записи заглавных букв следует использовать заглавные буквы в записи аббревиатуры. Например: ψ для ψ и Ψ для Ψ. Источник: web-brodilka.ru