Записи Друзья Комментарии
Net-man
Аватар Net-man

 -Приложения

  • Перейти к приложению Открытки ОткрыткиПерерожденный каталог открыток на все случаи жизни
  • Перейти к приложению Я - фотограф Я - фотографПлагин для публикации фотографий в дневнике пользователя. Минимальные системные требования: Internet Explorer 6, Fire Fox 1.5, Opera 9.5, Safari 3.1.1 со включенным JavaScript. Возможно это будет рабо
  • Все на карте

 -Поиск по дневнику

Поиск сообщений в Net-man

 -Подписка по e-mail

 

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 20.04.2010
Записей: 814
Комментариев: 5985
Написано: 11575


Уроки HTML'а. Урок # 8.

Вторник, 09 Ноября 2010 г. 16:04 + в цитатник

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

Значение ключевого слова Описание
ALIGN=LEFT Выравнивает текст в ячейке (таблице, строке) по левому краю (идет по умолчанию)
ALIGN=CENTER Выравнивает текст в ячейке (таблице, строке) по центру
ALIGN=RIGHT Выравнивает текст в ячейке (таблице, строке) по правому краю
ALIGN=JUSTIFY Растягивает текст в ячейке (таблице, строке) на всю строку (проверено на MSIE 4.0+)
VALIGN=TOP Растягивает текст в от самого верха ячейки (полезно, когда информация в строке состоит из нескольких строк)
VALIGN=MIDDLE Выравнивает текст в ячейке в ячейке вертикально по центру (идет по умолчанию)
VALIGN=BOTTOM Выравнивает текст в ячейке по нижнему краю

Продолжая работать с бейсбольной таблицей (та, в которой есть список), введем ключевое слово VALIGN=TOP для всей строки, стодержащей список, чтобы текст не "плава" в центре ячейки. Изменим тег этой строки таким образом:

<table align="center" border="1">
<tr>
<th>Имя</th>
<th>Команда</th>
<th>Победы/поражения</th>
<th>Очки</th>
<th>Ауты</th>
</tr>
<tr valign=top>
<td>Пит Шурек</td>
<td>Цинциннати</td>
<td>16-2</td>
<td>2,73</td>
<td>194</td>
<td>
<li>команда "All-Star Team"
<li>Награда MVP
<li>Серебряная летучая мышь
</td>
</tr>
<tr>
<td>Гидео Немо</td>
<td>Лос-Анджелес</td>
<td>19-8</td>
<td>2,94</td>
<td>399</td>
</tr>
<tr>
<td>Грег Энгриус</td>
<td>Атланта</td>
<td>24-6</td>
<td>2,21</td>
<td>275</td>
</tr>
</table>

И посмотрим что получилось:

Имя Команда Победы/поражения Очки Ауты
Пит Шурек Цинциннати 16-2 2,73 194
  • команда "All-Star Team"
  • Награда MVP
  • Серебряная летучая мышь
Гидео Немо Лос-Анджелес 19-8 2,94 399
Грег Энгриус Атланта 24-6 2,21 275

Цвета в таблице
До недавнего времени не было возможности управлять цветами в таблице на веб-страницах. Сетка таблицы была черной, фон совпадал по цвету с фоном самой страницы. Было очень трудно выделить какую-то ячейку другим цветом.
Теперь существует ряд новых тегов, позволяющих задать цвета фона и сетки таблицы. В первом случае ключевое слово bgcolor вставляется в тег <table> следующим образом:

<table bgcolor="yellow">
</table>

Мы изучали цвета на втором уроке. Кроме bgcolor, существуют другие способы управления цветом:

Значение ключевого слова Описание
BORDERCOLOR="..." Изменяет цвет сетки таблицы
BORDERCOLORDARK="..." / BORDERCOLORLIGHT="..." Используется для изменения цвета сетки с дополнительным эффектом трехмерности. Если установлены эти аттрибуты, ваша таблица выглядет трехмерной.


Имя Команда Победы/поражения Очки Ауты
Пит Шурек Цинциннати 16-2 2,73 194
  • команда "All-Star Team"
  • награда MVP
  • Серебряная летучая мышь
Гидео Немо Лос-Анджелес 19-8 2,94 399
Грег Энгриус Атланта 24-6 2,21 275

Такого вида таблицы мы добились лишь с помощью этих самых ключевых тегов:

<table align="center" bordercolordark=navy bordercolorlight=blue border="1">
<tr bgcolor="yellow">
<th>Имя</th>
<th>Команда</th>
<th>Победы/поражения</th>
<th>Очки</th>
<th>Ауты</th>
</tr>
<tr valign=top bgcolor="#abcdef">
<td>Пит Шурек</td>
<td>Цинциннати</td>
<td>16-2</td>
<td>2,73</td>
<td>194</td>
<td bgcolor="#bcdefa">
<li>команда "All-Star Team"
<li>награда MVP
<li>Серебряная летучая мышь
</td>
</tr>
<tr bgcolor="#abcdef">
<td>Гидео Немо</td>
<td>Лос-Анджелес</td>
<td>19-8</td>
<td>2,94</td>
<td>399</td>
</tr>
<tr bgcolor="#abcdef">
<td>Грег Энгриус</td>
<td>Атланта</td>
<td>24-6</td>
<td>2,21</td>
<td>275</td>
</tr>
</table>

Альтернативы таблицам
Если вас беспокоит то, что ваши таблицы не смогут увидеть некоторые посетители, потому что они используют браузеры, которые не поддерживают таблицы (например Lynx, или старые версии Mosaic или Netscape), или таблицы вообще кажутся вам слишком трудоемкими и неинтересными, для вас создан ряд популярных альтернатив, например использование списков или предварительного форматирования (о нем чуть позже). Оба эти способа сходны с созданием таблицы, но их возможности гораздо более органичены.
Вместо таблицы используем список
Несмотря на то что списки "одномерны", парой списков при надлежащем использовании можно заменить практически любую таблицу. Например, вы можете замеить бейсбольную таблицу несколькими списками. Конечно, эти списки не так легко читать, как таблицу, и они заставляют пользователя перемещаться по экрану. В общем случае списки менее компактны, чем таблицы. Кроме того, информацию в списках труднее сравнивать. Посмотрите на список, заменяющий нам бейсбольную таблицу:

  • Пит Шурек
    • Цинциннати
    • 16-2 (W/L)
    • 2.73 очков
    • 194 аута
      • команда "All-Star Team"
      • Награда MVP
      • Серебряная летучая мышь
  • Гидео Немо
    • Лос-Анджелес
    • 19-8 (подеды/поражения)
    • 2.94 очков
    • 399 аута
  • Грег Энгриус
    • Атланта
    • 24-6 (победы/поражения)
    • 2.21 очков
    • 275 аутов

Предварительное форматирование
При использовании тегов <pre> и </pre> информация отображается браузером точно в таком виде, в каком вы ее напечатаете, без всякой интерпритации. Вы можете воспользоваться этими тегами для эмуляции таблицы. Результат не так эффектен, как таблица, и здесь невозможно ввести сетку таблицы, но большинство людей не заметит особой разницы. Предварительно отформатировав текст с использованием возвратов каретки, пробелов и табуляций так представит все ту же бейсбольную информацию:


<PRE><B>

Имя           Команда       Победы/поражения  Очки  Ауты</B>

Джон Хеппи    Цинциннати    16-2              2.73  194

Гидео Немо    Лос-Анджелес  19-8              2.94  399

Грег Энгриус  Атланта       24-6              2.21  275

</PRE>

Что получится:



Имя           Команда       Победы/поражения  Очки  Ауты
Джон Хеппи    Цинциннати    16-2              2.73  194
Гидео Немо    Лос-Анджелес  19-8              2.94  399
Грег Энгриус  Атланта       24-6              2.21  275

Итак, подводя итоги пройденного сегодня материала, хочу сказать что мы изучили сегодня: способы выравнивания текста в таблице, цвета в таблице, нашли способы замены таблиц списками и предварительным форматированием. Если у вас есть вопросы по пройденному материалу, присылайте их сюда.
DWEB.RU
Рубрики:  Полезное
Уроки HTML
Метки:  

Процитировано 1 раз
Нравится

Комментировать — К дневнику — Страницы: [1] [Новые]
 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку


О проекте