Практика разработки Web-страниц
         

Как убрать пустое место в ячейках или между ними


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


Иногда сложно понять, почему вокруг содержимого ячейки образовалось дополнительное место

Если вы хотите получить дополнительное место между ячейками, сделайте следующее.

  1. Интервалы вокруг ячеек и между ними устанавливаются в атрибутах cellpadding и cellspacing. Чтобы выгадать место, установите оба атрибута равными 0.

    Таблицы по умолчанию не отображают границы, но Netscape отображает пустое место там, где должна быть граница, даже если она не определена. Чтобы избежать этого, установите атрибут border равным 0.

    <table cellpadding=0 cellspacing=0 border=0>

  2. Если вы используете атрибут cellspacing для создания отступов между ячейками, и таблица имеет фон, то в Netscape эти отступы окажутся другого цвета. Чтобы решить проблему, используйте атрибут cellpadding.

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

    <td height=30> <img src=textbar.gif width=100 height=30></td>

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

  4. Если ячейка таблицы содержит форму, броузеры отображают некоторое дополнительное пространство после тэга </FORM>.Если вы пытаетесь разместить поля формы возможно плотнее, переместите блок <FORM> из ячейки (и не оставляйте место перед тэгом </TD>, как в шаге 3.)

    <form> <td align=baseline>Search: <input type=text name=srchtext size=5> <input type=image src=go.gif width=16 height=16></td> </form>



Содержание раздела