вторник, 14 августа 2012 г.

День 9. Границы возможного.

Друзья, сегодня я продолжал работать с таблицами, а если точнее, то с границами таблиц.
Частенько возникают ситуевины, когда не все границы необходимо показать, иногда нужны только внешние границы, иногда только внутренние, иногда внутренние, да и то не все, а иногда они не нужны вообще. К счастью, как оказалось, язык HTML располагает всеми необходимыми для этого средствами.
Во вчерашнем примере границы отсутствовали вообще. Давайте попробуем их туда внести.

Атрибут border.

Для тех, кто в танке, говорю -  за границы таблицы отвечает атрибут border элемента TABLE. Если точнее он отвечает за толщину линий внешних границ. Давайте посмотрим вчерашний пример, внеся в него границу.
<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html title="365.WEB">
  <head>
   <title>Таблица</title>
  </head>
  <body >
   <table border="4">
    <caption>Медали сборной России</caption>
    <tr><th>Золото</th><th>Серебро</th><th>Бронза</th></tr>
    <tr><td>24</td><td>25</td><td>29</td></tr>
   </table>
  </body>
</html>

Как вы видите в код добавлен только один атрибут border, все остальное осталось по прежнему.В качестве значения атрибута нужно задавать желаемую толщину границы в пикселях.(Или пикселах?)

Атрибут  bordercolor.

Этот атрибут отвечает за цвет границы. Здесь следует быть внимательным. На одном из моих компьютеров стоит старая версия Oper'ы и вот она неккоректно отображает цвет границы, на остальных браузерах и текущей версии Oper'ы такой ерунды не наблюдал.
В качестве значения для этого атрибута нужно внести либо английское название цвета(red, blue, green и т.д.), либо его код из таблицы цветов.
Давайте теперь внесем этот атрибут в код и полюбуемся.
<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html title="365.WEB">
  <head>
   <title>Таблица</title>
  </head>
  <body >
   <table border="4" bordercolor="red">
    <caption>Медали сборной России</caption>
    <tr><th>Золото</th><th>Серебро</th><th>Бронза</th></tr>
    <tr><td>24</td><td>25</td><td>29</td></tr>
   </table>
  </body>
</html>

Атрибуты frame и rules.

Эти два атрибута отвечают за отображение внешних и внутренних таблиц, соответственно.
Атрибут frame может принимать следующие значения:
  • above-отображается только верхняя линия границы
  • below-видна только нижняя линия границы
  • box-отображается вся анешняя граница
  • border-аналогично
  • hsides-отображаются только горизонтальные линии
  • lhs-только левая граница
  • rhs-только правая граница
  • void-ваще без границ таблица
  • vsides-видны только вертикальные линии
Атрибут rules принимает значения:
  • all-отображаются все внутренние границы
  • cols-только вертикальные линии между столбцами
  • groups-отображаются только вертикальные и горизонтальные линии между группами строк и столбцов(завтра расскажу)
  • none-не отображаются границы
  • rows-видны только горизонтальные границы между строками
Учтите при использовании, что эти атрибуты новые, для их отображения нужны последние версии браузеров.

Дома.

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

Комментариев нет:

Отправить комментарий