Опубликован: 06.10.2006 | Уровень: для всех | Доступ: платный
Лекция 15:

Таблицы

< Лекция 14 || Лекция 15: 12345 || Лекция 16 >

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

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

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

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

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

  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>

Отображение границ таблицы и ячейки для тестирования

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

Если ваш броузер поддерживает стили границ таблицы (как Internet Explorer 5), используйте приведенные ниже блоки стиля в начале вашей страницы, чтобы создать границы во всех таблицах. Этот код задает сплошную серую границу вокруг таблицы и серую пунктирную линию вокруг каждой ячейки. (Если серый цвет не выделяется четко на фоне ваших цветов, измените его на синий, желтый или красный.)

<!--Remove after tables are working -->
<style>
  table {border:2 solid gray }
  td,th {border:1 dashed gray }
</style>

Если этот прием не работает в вашем броузере, установите атрибут border равным 1 для таблиц, у которых еще нет границ. После решения проблем с таблицей вы можете спрятать границы.

<!--Return border to 0 after tables are working -->
<table cellpadding=0 cellspacing=0 border=1>
Если вы используете программы для создания страниц, вам нет необходимости показывать границы, чтобы увидеть проблему. Во FrontPage, например, вид Normal (Нормальный) отображает ячейку и схемы таблицы, даже если у таблицы нет границ.
< Лекция 14 || Лекция 15: 12345 || Лекция 16 >
Татьяна Кондрашова
Татьяна Кондрашова
Россия
Игорь Воробьев
Игорь Воробьев
Россия, Михнево Ступинского МО