Про использование таблиц при разметке документов с расчетом как на IE, так и на нетскейп, уже сказано достаточно. Однако мы берем на себя смелость указать, помимо уже известных и распространенных, еще на некоторые достаточно употребительные моменты.




ЕЩЕ РАЗ О ФОНОВЫХ ИЗОБРАЖЕНИЯХ В ТАБЛИЦЕ.

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

    <table background="bird.gif" cellpadding=8 border=1>
        <tr>
        <td>Sample text</td>
        <td>Sample text</td>

        <td>Sample text</td>
        </tr>
        <tr>
            ...
        </tr>
    </table>

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

    <table background="bird.gif" cellpadding=8><td>
    <table cellpadding=8 border=1 background="">
        <tr>
        <td>Sample text</td>

        <td>Sample text</td>
        <td>Sample text</td>
        </tr>
        <tr>
            ...
        </tr>

    </table>
    </td></table>

Так же следует помнить, что цвет фона (bgcolor) у вложенной таблицы будет игнорироваться при рендеринге, если у верхней таблицы указано фоновое изображение (background). Чтобы этого не происходило у вложенной таблицы следует указать background="" (см. код выше).

Вообще-то, по нашему скромному мнению, если это возможно, следует избегать неоправданного злоупотребления бэкграундами в таблицах.


ТАБЛИЦЫ И ГРАНИЦЫ

В некоторых случаях требуется, чтобы у таблицы была сложного вида граница. Например, как на рис.:

Тогда оптимальным во множестве случаев будет использовать в качестве границ отдельне ячейки этой же таблицы, задавая для них ширину в 1, 2, 3px и нужный цвет фона (bgcolor="цвет границы").

При использовании этого метода следует помнить, что нетскейп в некоторых случаях (если таблица "резиновая") игнорирует точные указания длины-ширины ячеек, если отсутствуют растяжки, исключающие возможность произвольного изменения размеров ячеек.

Поэтому конструкция, представленная нижеследующим кодом, которая должна выглядеть, как таблица2 на нижеследующем рис., будет выглядеть как таблица1:

<table cellpadding=0 cellspacing=0 border=0 width=399>
    <tr>

    <td rowspan=5 width=3..><img width=3 height=1 src=...></td>
    <td height=3 colspan=3..><img width=1 height=3 src=...></td>
    <td rowspan=5 width=3..><img width=3 height=1 src=...></td>
    </tr>

    <tr>
    <td>таблица1<br><br></td>
    <td height=1..><img width=1 height=1 src=...></td>
    <td>таблица1<br><br></td>

    </tr>
    <tr>
    <td height=3.. colspan=3><img width=1 height=3 src=...></td>
    </tr>
    </table>

Чтобы такое не происходило, эту конструкцию следует заменить следующей, избегая параметров colspan, rowspan, относительных величин ячеек и используя растяжки для ячеек, содержащих рабочую часть:

    <table cellpadding=0 cellspacing=0 border=0 width=399>
    <tr>
    <td rowspan=5 width=3..><img src=... width=3 height=1></td>
    <td height=3..><img src=... width=1 height=3></td>

    <td height=3.. width=1><img src=... width=1 height=3></td>
    <td height=3..><img src=... width=1 height=3></td>
    <td rowspan=5 width=3..><img src=... width=3 height=1></td>
    </tr>

    <tr>
    <td><img src=... width=197 height=1 border=0><br>таблица2</td>
    <td height=1..><img src=... width=1 height=1></td>
    <td><img src=... width=197 height=1 border=0><br>таблица2</td>

    </tr>
    <tr>
    <td height=3..><img src=... width=1 height=3></td>
    <td height=3.. width=1><img src=... width=1 height=3></td>
    <td height=3..><img src=... width=1 height=3></td>

    </tr>
    </table>

Так же следует помнить, что при ширине таблицы в 100%, крайняя правая ячейка (граница) в нетскейпе при величине окна более 600-700px имеет свойство растягиваться не взирая на фиксацию. Поэтому рекомендуется вместо задания bgcolor=... задать там background="...", в качестве которого указать двухцветный gif с полосой толщиной с нужную границу и шириной примерно в 3 раза больше, чем ширина границы.


НЕМНОГО О CSS

Если для ячейки таблицы задан стиль шрифта, то перекрывающие его (кроме <u>) тэги игнорируются. Пример:

  <style type=text/css>

  td {font-size:10px;text-decoration:none;font-weight:normal;}
  </style>
      ...
  <td><b><u><font size=4>Sample text</font></u></b></td>
      ...

Слова "Sample text" будут величиной 10px, не масштабируемые при нажатии Ctrl+], не bold.
Чтобы перекрыть стиль <td> надо текст заключить в <font style="..."> ... </font>.



Проекты на web deVision



То, что кажется нам интересным. А вам?

документация по PHP4
список функций

обратная связь

  Яндекс цитирования