Loading





Форекс с Альпари

eTXT




Анкетка


Таблицы на web-странице

Информация, представленная в этой статье ориентирована в первую очередь для начинающих web-мастеров.


На двух страницах.  Страница 1.  На следующую >>>



Предисловие

Уважаемые друзья, посетители моего сайта, то, о чем написано ниже пока ещё используется, но я хочу сказать, что такие методы построения таблиц завтра, скорее всего, устареют. Учитывая стремительный бег времени, можно предположить, что здесь представлена уже часть ретро-материала. С развитием CSS, делать таблицы стало гораздо проще и удобнее. По современным правилам в коде страницы не должно быть прямых HTML-элементов, отвечающих за внешний вид страницы, типа align, strong и уж тем более b, а так же таких как border, bordercolor, bgcolor, width, height, font, i, em и т.д. Параметры какого-либо блока, таблицы или другого элемента, находятся в файле style.css, состоящего из селекторов элементов, а на самой странице прописываются только лишь идентификаторы, ведущие к параметрам селекторов файла стилей. Такой метод дает возможность управлять циркулярно всеми элементами на странице, сокращать размер кода и задавать особые параметры, которые нельзя задать языком HTML. Если у вас есть желание ознакомиться с новым материалом по этой теме, обратитесь к видеоурокам Евгения Попова. Изучив его курс «Все Технические Моменты Онлайн-Бизнеса в Видеоформате», особенно уроки по CSS, я лично понял, что до этого я совершал много ошибок. Изучив этот качественный курс, вы получите массу нужного и очень полезного материала.

Но, тем не менее, я не хотел бы расставаться с моим творением и удалять страницу, жалко все-таки, трудился над созданием, а вам рекомендую хотя бы посмотреть, как верстались таблицы в недалёком прошлом. Изучите этот материал. Я уверен, он будет Вам полезен, так как наряду с уже устаревшими методами построения таблиц, здесь Вы найдете много современных методов, которые я постоянно включаю в эту статью. Поехали...


Применение таблиц, их виды и коды

Таблицы - популярнейшее средство оформления web-страниц. Одним из способов их применения на сайте является использование в качестве  каркаса всей страницы:


Здесь будет «шапка web-страницы», логотип и название сайта. Ширина задаётся в точках либо в процентах. Ширина 100% -сайт занимает всё свободное место в браузере. Высота 50-150 точек или 5-15% либо по вашему усмотрению.
Область навигации по разделам сайта. Ширина 120-200 точек или 12-20%. Основное содержимое - контент страницы. Занимает всё оставшееся пространство. Область новостей, рекламы, объявлений. Ширина 150-200 точек или 15-20%.
Область дублирующей навигации сайта. Высота 40-50 точек или 4-5%.

Думаю, что такую таблицу вам соорудить несложно и самим, но на всякий «пожарный» приведу пример html-кода:


<table width="100%" bgcolor="#F0E68C" border="1" 
align="center" cellpadding="10" cellspacing="0">
<tr>
<td colspan="3" height="10%">Шапка сайта
</td></tr>
<tr>
<td width="15%" valign="top">Область навигации по разделам сайта. 
</td>
<td  valign="top">Контент страницы.
</td>
<td width="25%" valign="top">Область новостей, рекламы.
</td>
</tr>
<tr>
<td colspan="3" height="40" align="center">Область дублирующей
 навигации сайта.
</td></tr></table>

Размеры такой таблицы обычно задаются равными размерам окна браузера. Все ячейки таблицы, кроме второй ячейки второй строки имеют жёстко заданные размеры. Благодаря этому при различных размерах окна браузера размеры дополнительных элементов страницы остаются постоянными, а основное содержание подстраивается под размеры окна. Такой способ создания web-страниц называется  резиновой вёрсткой.

Эта схема не является обязательной.  Есть множество других вариантов.

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


Таблица пунктиром


Сергей Есенин и Айседора Дункан

Пример размещения контента

В 1927 году «от руки» автомобиля погибла известная всему миру Айседора Дункан, американская танцовщица, жена Сергея Есенина. Судьба выбрала довольно необычный способ, чтобы оборвать жизнь балерины. Она отдыхала в Ницце, и вечером 14-го сентября поехала кататься на своем шикарном «Bugatti». Концы длинной шелковой шали развевались по ветру. Один из них вдруг попал на колесо автомобиля. Все произошло буквально за доли секунды – намотавшийся на колесо шарф убил Айседору, переломив ей позвоночник и порвав сонную артерию, словно стальной трос. «Великой босоножке» было 49 лет.


Html-код таблицы выглядит так:


<table style="border-right: 2px dashed; border-top: 2px dashed;
 border-left: 2px dashed; border-bottom: 2px dashed; border-collapse: 
 collapse" cellspacing="0" cellpadding="20" width="70%" align="center"
 border="1">
<tr><td bgcolor="#F0E68C">
<p>Наполнение  таблицы</p> 
</td></tr></table>


Внимание! Важная информация!


А вот и современный взгляд на построение таблицы с рамкой-пунктиром. Для этого используется значение dashed в параметре border.

Просто пишете код таблицы с идентификатором, например, demo3 - <table class="demo3">, а CSS такой таблицы пишете в стилях в разделе head или в файле стилей сайта:

.demo3
{
border: 2px dashed #000000;   /* рамка 2px, пунктиром, черного цвета */
margin: 0 auto;   /* выравнивание по центру */
width: 600px;    /* в px или в % */
overflow: auto;    /* таблица увеличивается в зависимости от увеличения её содержимого, не давая ему выйти за пределы */
}

Если нужно сделать рамку точками - вместо dashed пишите значение dotted. К тому же обе рамки могут изменять цвета. В примере выставлен черный цвет - #000000.



Таблица с закруглёнными углами


Сергей Есенин и Айседора Дункан

Пример размещения контента

В 1927 году «от руки» автомобиля погибла известная всему миру Айседора Дункан, американская танцовщица, жена Сергея Есенина. Судьба выбрала довольно необычный способ, чтобы оборвать жизнь балерины. Она отдыхала в Ницце, и вечером 14-го сентября поехала кататься на своем шикарном «Bugatti». Концы длинной шелковой шали развевались по ветру. Один из них вдруг попал на колесо автомобиля. Все произошло буквально за доли секунды – намотавшийся на колесо шарф убил Айседору, переломив ей позвоночник и порвав сонную артерию, словно стальной трос. «Великой босоножке» было 49 лет.


Код таблицы:


<table width="600px" align="center" cellpadding="0" cellspacing="0"
 border="0" bgcolor="#F0E68C">
<tr>
<td style="text-align:left;"><img src="images/t1.jpg"
 width="24" height="27"></td>
<td style="text-align:right;"><img src="images/t2.jpg"
 width="24" height="27"></td>
</tr>
<tr>
<td width="100%" bgcolor="#F0E68C" colspan="2">
<p>Наполнение страницы</p>
</td>
<tr>
<td style="text-align:left;"><img src="images/b1.jpg"
 width="24" height="27"></td>
<td style="text-align:right;"><img src="images/b2.jpg"
 width="24" height="27"></td>
</tr></table>


Всё как-будто просто и замечательно, но есть одна маленькая «заморочка». Видите в коде файлы изображений, выделенные маркером? Они представляют собой небольшие рисунки, сделанные в графическом редакторе и выглядят следующим образом:





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

Если цвет таблицы вас удовлетворяет (его можно поменять и сделать заливку изображений любым другим цветом), можно скачать (3,1 кб) эти рисуночки, загрузить их в вашу папку с изображениями на сайте, скопировать код таблицы и   «в добрый путь!»

Один из вариантов этого способа выглядит так:

Сергей Есенин и Айседора Дункан

Заголовок

Здесь располагается текст.

Здесь всё то-же самое, только внутрь вставляем ещё одну таблицу другого цвета. Я думаю, всё понятно.

Внимание! Важная информация!


В последнее время все современные браузеры стали воспринимать в CSS свойство border-radius, поэтому создавать таблицы с закруглёнными углами стало совсем просто. В стилях таблицы прописываем значение свойства border-radius в пикселах или процентах и присваиваем таблице определенный класс, например <table class="demo1">.
Единственное условие - это работает только при значении свойства:
border-collapse: separate;
В итоге таблица получается такой, как эта (в которой находится информационный текст).


CSS таблицы:


.demo1 
{
width: 85%; 
background-color: #F0E68C;
border: 1px #778899 solid; 
border-collapse: separate;
border-radius: 10px;
margin: 0 auto;
}



DIV с закруглёнными углами

Блок DIV с закруглёнными углами делается проще. Не нужно рисунков, только внести данные в стили в «голове» сайта <head>(выделено жёлтым маркером) или в файл style.css. А код выделенный розовым цветом скопировать и разместить в нужном месте сайта в разделе body.

Заголовок

Сергей Есенин и Айседора Дункан

Здесь располагается контент




Html-код такого блока:


<html>
<head>

<style type="text/css">
div.nifty
{ 
margin: 0 10%; 
background: #9BD1FA;
}
b.rtop, b.rbottom
{
display: block; 
background: #FFF;
}
b.rtop b, b.rbottom b
{
display: block; 
height: 1px;
overflow: hidden; 
background: #9BD1FA;
}
b.r1
{
margin: 0 5px;
}
b.r2
{
margin: 0 3px;
}
b.r3
{
margin: 0 2px;
}
b.rtop b.r4, b.rbottom b.r4
{
margin: 0 1px; 
height: 2px;
} 
</style>

</head>
<body>
<div class="nifty">
<b class="rtop"><b class="r1"></b>
<b class="r2"></b><b class="r3"></b>
<b class="r4"></b></b>
Здесь располагается контент
<b class="rbottom"><b class="r4"></b>
<b class="r3"></b><b class="r2"></b>
<b class="r1"></b></b>
</div>
</body>
</html>



Блок DIV с тенью

Как сделать простую тень без использования графики? Два блока DIV, расположенные один в другом!

Html-код такого блока:


<html>
<head>
<style type="text/css">

div.shadow
{
position: relative;
width: 50%;
margin: 25px auto;/*чтобы расположить блок
 посередине (не работает в IE младше 6-ой версии)*/
background: #777;
}
div.shadow  div
{
position: relative;
left: -5px;
top: -5px;
background: #fff;
border: 1px solid #111;
padding: 10px;
}
</style>
<body>

<div class="shadow">
 <div>
  Как сделать простую тень без использования графики?
 Два блока DIV, расположенные один в другом! 
 </div></div>			 
</body>
</html>


Внимание! Важная информация!


Для создания тени вокруг таблицы или блока используется свойство box-shadow. Присвоим нашей таблице класс, например, demo2.

CSS такой таблицы Вы видите чуть ниже. Расшифруем некоторые значения этого свойства:
box-shadow: 0 0 10px rgba(0,0,0,0.5);

          Сдвиг тени по горизонтали, вертикали и радиус размытия.

          Для получения полупрозрачной тени применяют формат rgba. Такая тень хорошо смотрится на любом фоне.


CSS такой таблицы:


.demo2
{ 
background-color: #FFFFFF; 
width: 85%;
margin: 0 auto;
border: 0px #778899 solid;  /* Эту строку можно не писать */
border-collapse: separate;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.5);
}


Скроллбар

Деньги потеряла, не довезёте?

Одесский анекдот

Сара, ваша Фирочка таки выучилась на строителя?
Таки да.
Шо ви говорите! И шо ж она строит?
Азохн вей!  Ходит по Дерибасовской и строит из себя «девочку»!



Html-код такого блока:


<html>
<head>
<style type="text/css">

div.scroll 
{
overflow: auto;
height: 15em;
width: 450px;
padding: 1ex;
margin: 0 0 30px 5px;
border: 1px solid #345411;
background: #F0E68C;
color: #000;
}	
</style>
</head>
<body>

<div class="scroll">
<img src="/images/1b5a5b9bb67f.jpg"
 border="0" vspace="20" hspace="20" align="left" width="250"
 height="250" alt="барышня">
</div>
</body>
</html>



Таблица с «border double»


Сергей Есенин и Айседора Дункан

Двойной контур таблицы

Код такой таблицы:


<table width="600" border="0" cellspacing="15" bgcolor="#F0E68C"
 style="border:5px double #CCCCCC" align="center">
<tr><td>
<img src="images/aisedora_duncan.jpeg" width="110" height="80"
 vspace="10" hspace="0" align="left" alt="">
<p align="center">Двойной контур таблицы</p>
</td></tr></table>



Конец страницы 1.  На следующую >>>

Работа в интернете с текстами




Ваш комментарий







  © 2015–2018  https://leonidmuzyka.com/  L.M. Служба поддержки RSS подписка подписка