Отправляет email-рассылки с помощью сервиса Sendsay

Web - полезные советы по веб-строительству

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "От Винта - Раскрутка сайта. Способы. Сравнительный анализ." на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Октябрь 2007   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
Владимирис

Статистика

8.145 подписчиков
-7 за неделю
←   Все выпуски   →

Web - полезные советы по веб-строительству - границы у HTML таблицы


Компания ИнфоСтарз
Если у Вас есть сайт...

Загрузка файлов на Вашем сайте
Вы можете абсолютно бесплатно разместить форму для загрузки файлов на бесплатный сервер на своем сайте.

Новости на Вашем сайте
Вы можете разместить у себя на сайте информеры с последними новостями на самые разные темы.

Партнерская программа Wizards World.
Размести ссылку на своем сайте и получай проценты от платежей привлеченных пользователей.


Четыре способа получения границ у HTML таблицы.

Добрый день, уважаемый читатель! Сегодня наша задача: получить следующую таблицу:

   
   

Способ первый

Воспользуемся атрибутом cellspacing, создающим прозрачную рамку меж всех клеток таблицы. Нужно лишь окрасить ее в определенный цвет, а сделать это можно с помощью свойства bgcolor тэгов table и  td:

<table bgcolor=black border=0 cellpadding=2 cellspacing=1 width=100>
<tr>
    <td bgcolor=white>&nbsp;</td>
    <td bgcolor=white>&nbsp;</td>
</tr>
<tr>
    <td bgcolor=white>&nbsp;</td>
    <td bgcolor=white>&nbsp;</td>
</tr>
</table>

Милостивый читатель спросит: а почему нельзя поместить bgcolor=white сразу в тэг tr, тем самым значительно сжав код? На что автор ответит: а потому, деточка моя, что двоечник по рендерингу NN6 окрасит всю строку белым цветом, и плакали наши вертикальные рамочки.

Тем не менее, код действительно получается громоздким, поэтому на подходе…

Способ второй

Идея подсмотрена в исходниках Студии Лебедева и принципиально не отличается от предыдущей: полностью включаем исходную таблицу во внешнюю, для которой и прописываем нужный bgcolor.

<table bgcolor=black border=0 cellpadding=0 cellspacing=0 width=100><tr><td>
<table bgcolor=white border=0 cellpadding=2 cellspacing=1>
<tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
</tr>
<tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
</tr>
</table>
</td></tr></table>

Код значительно полегчал, хвала кодерам Студии Лебедева. Но и этот способ не лишен недостатков: попробуйте распечатать такую таблицу на принтере. Получилось? Фигушки, потому что Internet Explorer по умолчанию не печатает цвета и рисунки фона.

«Прежде чем распечатать эту страницу, пожалуйста, зайдите в меню Сервис, выберите пункт Свойства обозревателя, откройте вкладку Дополнительно и в разделе Печать отметьте галочку Печатать цвета и рисунки фона. Спасибо». Хватит бредить, лучше покланяемся в ножки CSS:

Способ третий

Действительно, что нам мешает указать каждой ячейке свойство border?

td{
border: solid black 1px
}

А то, мои дорогие, что таким образом на месте соприкасания ячеек получится рамка толщиной в два пикселя. По спецификации, эту проблему должно решать свойство border-collapse со значением collapse. В этом случае соседние границы должны «проглатывать» друг друга. Оставим это счастье нашим внукам, потому что нынче ни один браузер это свойство не поддерживает. Отсюда вытекает…

Способ четвертый

По-научному это называется разделением труда:

table.border{
border-color: black;
border-style: solid;
border-width: 0 1px 1px 0
}

table.border td, table.border th{
border-color: black;
border-style: solid;
border-width: 1px 0 0 1px
}

Всё просто до безобразия. Каждая ячейка отвечает только за верхнюю и левую рамки. Осталось лишь дорисовать длинные правую и нижнюю рамки. Это возложено на свойство border самой таблицы.

Примечание. На самом деле, CSS свойство border-collapse полностью (значения separate и collapse) поддерживается IE5+, NN6/Mozilla, Opera 4+, что вполне оправдывает его использование. Учтите только, что задавать свойство border-collapse необходимо при декларации тега table, в то время как бордер задаётся при описании ячеек:

table.border{
border-collapse:collapse
}

table.border td, table.border th{
border:1px solid #CC0000
}

По материалам сайта http://htmlcoder.visions.ru/



Вам понравилась рассылка?
(голосование возможно только из письма рассылки)
  • понравилась
    		•
  • не понравилась
    		•
  • средне
    		•

    МАГ 4-ГО УРОВНЯ С ЛИЧНЫМ ОТРЯДОМ
    СРОЧНО РАЗЫСКИВАЮТ ЗАБОТЛИВУЮ ХОЗЯЙКУ
    И БОЛЬШУЮ КАСТРЮЛЮ

    В избранное