Маркетер
  • Маркетинг
  • Digital
  • Реклама
  • Public Relations
  • Менеджмент
  • Новости
  • Маркетинг
  • Digital
  • Реклама
  • Public Relations
  • Менеджмент
  • Новости
YouTube 150 Подписчики
Telegram 241 Подписчики
VK 0 Подписчиков
Маркетер
Маркетер
  • Маркетинг
  • Digital
  • Реклама
  • Public Relations
  • Менеджмент
  • Новости
  • HTML

Как оформить таблицу?

  • 28.03.2001

Автор статьи: Мельников Михаил

Давайте-ка займемся сегодня оформлением таблиц. Вам наверняка не нравится, как оформлены таблицы по умолчанию. То, что называется рамкой, практически никогда не вписывается дизайн. А их псевдотрехмерность просто ужасна!

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

  • bgcolor — цвет фона в таблице или ячейке;
  • border — толщина рамки таблицы;
  • cellspaсing — расстояние между ячейками;
  • cellpadding — расстояния от рамки до содержимого ячейки.

    Обычная таблица

    Начнем с обычной таблицы. Как видите, даже устанавливая атрибут border равным единице, мы не получаем рамку толщиной в один пиксель. Это происходит из-за того, что при отрисовке таблицы используются псевдотрехмерные границы и реальная толщина рамки всегда больше указанной. В дополнение к цвету, которым нарисована таблица, используются еще два: цвет тени и цвет подсветки. В IE имеются атрибуты borderColor, borderColorDark и borderColorLight, которые позволяют контролировать три этих цвета. Установив borderColorDark и borderColorLight равными цвету фона, мы можем добиться толщины рамки в один пиксель, но ведь это будет работать только в IE — а значит, нам не подходит.

    . . .
    . . .
    . . .

           


    Таблица с тонкой рамкой

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

    . . .
    . . .
    . . .

           

    Таблица с толстой рамкой

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

    . . .
    . . .
    . . .

           

    Таблица с фоновой подсветкой ячеек

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

    . . .
    . . .
    . . .

           
           

    Таблица с горизонтальными линиями

    А теперь попробуем сделать табличку, содержащую только горизонтальные разделительные линии. Предыдущий способ со вложенными таблицами не подойдет, т.к. при вложенных таблицах мы всегда получаем и горизонтальные и вертикальные линии рамки. При помощи CSS или атрибута frame в IE4 мы можем получить желаемое. Но ведь мы хотим, чтобы все гляделось еще и в Netscape, причем, желательно, начиная с третьих версий броузеров.

    Выход заключается в том, чтобы в качестве горизонтальной разделительной линии использовать ячейку самой таблицы. Для этого мы воспользуемся атрибутом colspan, чтобы линия была по ширине всей таблицы, прозрачный пиксель для фиксации высоты ячейки в один пиксель и закрасим ячейку цветом разделительной линии. Все! Осталось только разместить данную конструкция между ячейками с данными.

    . . .
    . . .
    . . .

    1-1 1-2 1-3 1-4
    1-1 1-2 1-3 1-4
    2-1 2-2 2-3 2-4
    3-1 3-2 3-3 3-4
    4-1 4-2 4-3 4-4

    Таблица без рамки

    А можно сделать таблицу и вовсе без рамки. Для этого не нужно использовать ни вложенных таблиц, ни других трюков. Достаточно просто обнулить атрибут border и установить cellspacing равным желаемому просвету между ячейками. Теперь нужно закрасить все ячейки в желаемый цвет и — пожалуйста:

    . . .
    . . .
    . . .

    1-1 1-2 1-3 1-4
    1-1 1-2 1-3 1-4
    2-1 2-2 2-3 2-4
    3-1 3-2 3-3 3-4
    4-1 4-2 4-3 4-4

    Как видите, мы можем достаточно сильно менять внешний вид таблицы при помощи стандартных средств HTML 3.2. Варьируя толщину рамки, ее цвет, цвет текста, цвет подзаголовков и расстояние между ячейками, мы можем сделать практически любую таблицу. Главное — экспериментировать и тогда можно придумать совсем уж экзотические варианты.

  • Алексей Волков

    Предыдущий материал
    • Новости

    Зачем нам нужен SSI?

    • 28.03.2001
    • Алексей Волков
    Read More
    Следующий материал
    • Новости

    Оптимизация изображений в формате GIF

    • 28.03.2001
    • Алексей Волков
    Read More
    Вас также может заинтересовать
    Read More
    • HTML

    Оптимизация. Важность тега TITLE

    • Алексей Волков
    • 30.11.2009
    Read More
    • HTML

    Советы начинающему верстальщику HTML

    • Алексей Волков
    • 25.11.2009
    Read More
    • HTML

    HTML — Долой тег hr из html разметки

    • Алексей Волков
    • 14.11.2009
    Read More
    • HTML

    «Резиновая» рамка с фигурными углами

    • alexvolkov
    • 27.07.2005
    Read More
    • HTML

    Создай свою Web-страницу за пять минут!

    • Алексей Волков
    • 31.03.2005
    Read More
    • HTML

    Блокнотик с подсветкой

    • Алексей Волков
    • 31.03.2005
    Read More
    • HTML

    HTML-редактор? Вот и редактируй!

    • Алексей Волков
    • 21.08.2003
    Read More
    • HTML

    Выбираем HTML-редактор

    • Алексей Волков
    • 14.08.2003

    Добавить комментарий

    Для отправки комментария вам необходимо авторизоваться.

    Свежие посты
    • Дайджест постов Сергея Людкевича
      • 12.09.24
    • Как юристы тормозят бизнес
      • 30.08.24
    • Продвижение оптовых кампаний в Яндекс Директ
      • 06.03.24
    • Cарафанное радио
      • 13.01.24
    • 5-55: История компании
      • 01.03.23
    Маркетер
    • О проекте
    • Информационное спонсорство
    • Рекламным агентствам
    • Ссылки
    (с) ООО "Маркетер". Официальный сайт. Маркетер: Статьи про рекламу, маркетинг, public relations, интернет

    Введите ключевые слова для поиска и нажмите Enter