Kompx.com or Compmiscellanea.com

Границы HTML таблиц без CSS

Windows : Internet Explorer 3.0+, Netscape 3.04+, Opera 3.50+ [ 1 ], Mozilla 0.6+, Firefox 1.0+, Google Chrome, Safari 3.1+, SeaMonkey 1.0+.

Linux : Netscape 3.04+, Opera 5.0+, Mozilla 0.6+, Firefox 1.0+, Chromium, SeaMonkey 1.0+, Netsurf 3.0, Dillo [ 2 ].

DOS : Arachne [ 3 ].

Пример n.1:

  Границы HTML таблиц без CSS  
cellspacing="2"   bgcolor="#ff6600"

HTML / XHTML. Код:

<table width="100%" cellspacing="2" cellpadding="0" border="0" align="center" bgcolor="#ff6600">

<tr bgcolor="#ffffff">

<td width="33%" height="67">&nbsp;</td>

<td width="34%">Границы HTML таблиц без CSS</td>

<td width="33%">&nbsp;</td>

</tr>

<tr bgcolor="#ffffff">

<td height="67">cellspacing="2"</td>

<td>&nbsp;</td>

<td>bgcolor="#ff6600"</td>

</tr>

</table>

Пример n.2:

  Границы HTML таблиц без CSS  
cellspacing="8"   bgcolor="#999999"

HTML / XHTML. Код:

<table width="100%" cellspacing="8" cellpadding="0" border="0" align="center" bgcolor="#999999">

<tr bgcolor="#ffffff">

<td width="33%" height="67">&nbsp;</td>

<td width="34%">Границы HTML таблиц без CSS</td>

<td width="33%">&nbsp;</td>

</tr>

<tr bgcolor="#ffffff">

<td height="67">cellspacing="8"</td>

<td>&nbsp;</td>

<td>bgcolor="#999999"</td>

</tr>

</table>

Пример n.3 - для Netscape 3.04-6.0, Mozilla 0.6-0.92 и Arachne. Работает так же в других веб браузерах:

  Границы HTML таблиц без CSS  
cellspacing="2"   bgcolor="#999999"

HTML / XHTML. Код:

<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#999999">

<tr>

<td>

<table width="100%" cellspacing="2" cellpadding="0" border="0">

<tr bgcolor="#ffffff">

<td width="33%" height="67">&nbsp;</td>

<td width="34%">Границы HTML таблиц без CSS</td>

<td width="33%">&nbsp;</td>

</tr>

<tr bgcolor="#ffffff">

<td height="67">cellspacing="2"</td>

<td>&nbsp;</td>

<td>bgcolor="#999999"</td>

</tr>

</table>

</td>

</tr>

</table>

Границы HTML таблиц без CSS

Некогда, главным образом (но не только) в 1990ые существовало несколько приемов HTML, использовавшихся, что бы добиться некоторых эффектов, которые ныне делаются с помощью CSS. Обращение с границами HTML таблиц было одним из них.

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

Общая идея

1. Атрибут bgcolor тега table используется для того, что бы сделать фон таблицы определенного цвета.

2. Атрибут bgcolor тега tr используется, что бы сделать фон содержимого таблицы (строки и ячейки) определенного, отличного от фона таблицы, цвета.

3. Атрибут cellspacing тега table используется, что бы создать пространство в определенное число пикселов вокруг ячеек таблицы. Это пространство получает цвет, заданный атрибутом bgcolor тега table. Поскольку он отличается от фона строк и ячеек, то это создает вокруг ячеек визуальные границы цвета фона таблицы.

Упомянутые шаги создают в Arachne визуальные границы только между ячейками таблицы, а не вокруг них. И эти шаги не создают вообще никакой визуальной границы в Netscape 3.04-6.0 и Mozilla 0.6-0.92. Так что следует добавить еще одну таблицу вокруг первой.

Атрибут bgcolor тега table убирается из внутренней таблицы и прописывается во внешней. Значение атрибута cellspacing внешней таблицы устанавливается равным "0". Это создает требуемые визуальные границы и в Arachne, и в Netscape 3.04-6.0, Mozilla 0.6-0.92.

Данный метод работает не только в Netscape 3.04-6.0, Mozilla 0.6-0.92 и Arachne, но так же в других веб браузерах, так что его можно использовать как универсальный способ.

Страница-пример для Internet Explorer 3.0 - внешний вид текста содержимого и его выравнивание по центру созданы так же без использования CSS: [ Открыть страницу-пример ] [ Cкачать в архиве ].

Internet Explorer для Windows, старые версии ( Скачать пак, содержащий Internet Explorer версий 3.0, 4.01, 5.01, 5.5, 6.0 )

Страница-пример для Netscape 3.04-6.0 и Mozilla 0.6-0.92 - внешний вид текста содержимого и его выравнивание по центру созданы так же без использования CSS: [ Открыть страницу-пример ] [ Cкачать в архиве ].

Netscape Navigator 3.04 для Windows ( Cкачать )

Netscape Communicator 4.7 для Windows ( Cкачать )

Netscape Navigator 6.01 для Windows ( Cкачать )

Mozilla 0.6 для Windows ( Cкачать )

Mozilla 0.92 для Windows ( Cкачать )

Страница-пример для Arachne - внешний вид текста содержимого и его выравнивание по центру созданы так же без использования CSS: [ Открыть страницу-пример ] [ Cкачать в архиве ].

Arachne 1.70 для DOS ( Cкачать )

Arachne 1.95 для DOS ( Cкачать )


[ 1 ]

Так же в Opera 2.12 - 3.50, но с некоторыми недостатками.

[ 2 ]

Dillo - частично. Dillo не поддерживает атрибут height для td или tr. Сам прием создания визуальных границ в таблицах работает.

[ 3 ]

С некоторым недостатком.


Aliosque subditos et thema

 

Горизонтальное выравнивание блока неизвестной ширины

 

Горизонтальное выравнивание блока неизвестной ширины, содержащего несколько строчных элементов. Блок выравнивается средствами CSS - [ Открыть страницу-пример ]. Иногда нужно выровнять по центру группу плавающих элементов, которая будет служить заголовком или блоком с нумерацией страниц. Поскольку заголовок будет использоваться для блоков разных размеров, а блок с нумерацией страниц может увеличиваться и уменьшаться в размерах, то ширина этой группы так же будет варьировать случайным образом. Отчего способ выравнивания по центру, базирующийся на использовании известной ширины, работать не будет. Так же, желательно, что бы блок заголовка или нумерации страниц был центрирован раз и навсегда при своем создании, что бы группа элементов могла быть использована с объектами разных размеров, на разных веб страницах: блок просто кладется куда надо, а в него помещаются текст или / и изображения - и группа выравнивается по центру автоматически. Это можно сделать разными способами и с использованием разных технологий: CSS, CSS + JavaScript, CSS + HTML (система с тегами <table></table>). Самый простой и надежный способ горизонтального выравнивания блока неизвестной ширины основан на использовании CSS. Горизонтальное выравнивание блока неизвестной ширины: 1. Сначала, более простой случай, горизонтальное выравнивание блока с заголовком, состоящего из плавающих элементов: изображения и текст: HTML / XHTML. Код: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru"> <head> <title>Горизонтальное выравнивание блока неизвестной ширины: 1</title> <meta http-equiv="Content-Type" content="text/html; charset=Windows-1251" /> <link rel="stylesheet" type="text/css" href="css.css" /> </head> <body> <div class="box"> <span class="title-box"> <img src="snowflake.gif" width="37" height="34" alt="" class="title-imgs" /> <span class="title-text">Горизонтальное выравнивание блока неизвестной ширины</span> <img src="snowflake.gif" width="37" height="34" alt="" class="title-imgs" /> </span> </div> </body> </html> CSS.

Вертикальное выравнивание CSS

 

Вертикальное выравнивание CSS блочного элемента, содержащего текст и изображения. Работает для разных комбинаций блочных и строчных элементов. Пример: Вертикальное выравнивание CSS Вертикальное выравнивание CSS HTML / XHTML. Код: <div class="parent"> <div class="child"> <div class="childcontent">Вертикальное выравнивание CSS</div> <div class="childcontent"><img src="image.jpg" width="68" height="68" alt="Image" /></div> <div class="childcontent">Вертикальное выравнивание CSS</div> </div> </div> CSS. Код: .parent {position: relative; left: 0px; top: 0px; height: 200px; display: table;} .child {position: relative; left: 0px; top: 0px; display: table-cell; vertical-align: middle;} .childcontent {position: relative; left: 0px; top: 0px;} Примечание: .parent и .childcontent могут быть выровнены по левому краю ("float: left;") или не выровнены, но чтобы этот способ вертикального выравнивания CSS сработал, .child должен быть без "float: left;". [ 1 ] А так же в Netscape 6.01+, Mozilla 0.6+. [ 2 ] А так же в Netscape 6.01+, Mozilla 0.6+.