Вторник, 19.03.2024, 11:15 | Приветствую Вас Гость | Регистрация | Вход
  • Москва Доктор Психотерапевт
  • Санкт-Петербург Доктор Психотерапевт
  • Новосибирск Доктор Психотерапевт
  • Екатеринбург - Доктор Психотерапевт
  • Волгоград Доктор Психотерапевт
  • Ростов на Дону Психотерапевт
  • Нижний Новгород- Доктор Психотерапевт
  • Самара - Доктор Психотерапевт
  • Омск - Доктор Психотерапевт
  • Казань- Доктор Психотерапевт
  • Челябинск - Доктор Психотерапевт
  • Уфа - Доктор Психотерапевт
  • Новый Уренгой Доктор Психотерапевт
  • Тюмень Доктор Психотерапевт
  • Владивосток Доктор Психотерапевт
  • Камышин доктор психотерапевт ДОКТОР
  • Камышин доктор психотерапевт ПОНИМАНИЕ
  • Информационный Сайт Камышина Реклама Афиша ИСКРА
  • ВСЕ ПЕСНИ И МЕЛОДИИ !!!

    Урок 9: Разберемся с таблицами в html

    Html таблицы - полезная штука . Обычно их используют не только для отображения таблиц как таковых, но и для создания невидимого каркаса страницы, помогающего расположить текст и изображения должным образом. Раньше все сайты имели табличную структуру, сейчас все большую популярность приобретает структура на дивах (с помощью
    и CSS ). Вот классический пример табличной структуры: Шапка сайта(логотип и все такое) Ссылка 1 Ссылка 2 Ссылка 3 Ссылка 4 Ссылка 5 Основное содержание Реклама и все такое Блок копирайта Давайте разбираться как построить простейшую таблицу. Для этого нам понадобятся как минимум три элемента . TABLE - Элемент для создания html таблицы. Обязательно должен иметь начальный и конечный теги. По умолчанию html таблица печатается без рамки, а разметка осуществляется автоматически в зависимости от объема содержащейся в ней информации. Сразу скажу, что здесь есть атрибут BORDER который задает толщину рамки таблицы в пикселах. TR (Table Row) - Создает новый ряд таблицы. Закрывающий тег обязателен. TD (Table Data) - Начинает и заканчивает каждую ячейку ряда html таблицы. Обязателен закрывающий тег. Давайте попробуем создать таблицу из двух рядов и двух столбцов:
    ряд 1 ячейка1 ряд1 ячейка2
    ряд 2 ячейка 1 ряд 2 ячейка 2
    Вот как это будет выглядеть в браузере: ряд 1 ячейка1 ряд1 ячейка2 ряд 2 ячейка 1 ряд 2 ячейка 2 Разобрались? Т.е. таблица начинается с , затем идёт , указывающий на начало нового ряда. В ряду вставлены две ячейки: и . Ряд закрывается , и сразу начинается новый ряд . В новом ряду также две ячейки. Таблица закрывается
    ряд 1 ячейка1ряд1 ячейка2
    . Все довольно логично А как можно объединить ячейки? Для этого существуют данные атрибуты. COLSPAN – определяет количество столбцов, на которые простирается данная ячейка. По умолчанию имеет значение 1. ROWSPAN – определяет количество рядов, на которые простирается данная ячейка. По умолчанию имеет значение 1. Пример 1:
    ряд 1 ячейка 1+2
    ряд 2 ячейка 1 ряд 2 ячейка 2
    Получим в браузере: ряд 1 ячейка 1+2 ряд 2 ячейка 1 ряд 2 ячейка 2 Пример 2:
    Ячейка 1, ряд 1+2 ряд1 ячейка2
    ряд 2 ячейка 2
    Получим в браузере: Ячейка 1, ряд 1+2 ряд1 ячейка2 ряд 2 ячейка 2 Ничего сложного нет. Присмотритесь внимательно к трем примерам и все станет ясно. Вот еще полезные атрибуты: CELLPADDING – определяет расстояние (в пикселах) между рамкой каждой ячейки html таблицы и содержащемся в ней материалом. CELLSPACING – определяет расстояние (в пикселах) между границами соседних ячеек таблицы html. WIDTH – определяет ширину таблицы html. Ширина задается либо в пикселах, либо в процентном отношении к ширине окна браузера. По умолчанию этот атрибут определяется автоматически в зависимости от объема содержащегося в таблице материала. HEIGHT – определяет высоту таблицы. Высота задается либо в пикселах, либо в процентном отношении к высоте окна браузера. По умолчанию этот атрибут определяется автоматически в зависимости от объема содержащегося в html таблице материала. Пример 1:
    ряд 1 ячейка1ряд1 ячейка2
    ряд 2 ячейка 1 ряд 2 ячейка 2
    Результат в браузере: ряд 1 ячейка1 ряд1 ячейка2 ряд 2 ячейка 1 ряд 2 ячейка 2 Пример 2:
    ряд 1 ячейка1ряд1 ячейка2
    ряд 2 ячейка 1 ряд 2 ячейка 2
    Результат в браузере: ряд 1 ячейка1 ряд1 ячейка2 ряд 2 ячейка 1 ряд 2 ячейка 2 Пример 3:
    ряд 1 ячейка1ряд1 ячейка2
    ряд 2 ячейка 1 ряд 2 ячейка 2
    Результат в браузере: ряд 1 ячейка1 ряд1 ячейка2 ряд 2 ячейка 1 ряд 2 ячейка 2 И наконец последние четыре атрибута: ALIGN – определяет способ горизонтального выравнивания html таблицы или содержимого ячеек. Возможные значения: left, center, right. Значение по умолчанию – left. VALIGN – должен определять способ вертикального выравнивания таблицы или содержимого ячеек таблицы .Возможные значения: top, bottom, middle.(прижать к верху, прижать к низу,и установить посередине). BGCOLOR – определяет цвет фона ячеек таблицы. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов. BACKGROUND – позволяет заполнить фон таблицы рисунком. В качестве значения необходимо указать URL рисунка. Примечание: можно хоть каждой ячейке таблицы задать свой цвет фона или фоновый рисунок. Но: если вы задаете фоновый цвет (или рисунок) в базовом элементе TABLE то во всех ячейках будет этот фон(рисунок), и если вы захотите в какой-то ячейке поменять, пропишите соответсвующий атрибут именно для этой ячейки. Приведу пример:
    ряд 1 ячейка1 ряд1 ячейка2
    ряд 2 ячейка 1 ряд 2 ячейка 2
    Результат в браузере: ряд 1 ячейка1 ряд1 ячейка2 ряд 2 ячейка 1 ряд 2 ячейка 2 Еще один пример:
    ряд 1 ячейка1 ряд1 ячейка2
    ряд 2 ячейка 1 ряд 2 ячейка 2
    Результат в браузере: ряд 1 ячейка1 ряд1 ячейка2 ряд 2 ячейка 1 ряд 2 ячейка 2 Если картинка меньше чем ячейка, то она будет дублироваться, как показано в примере. Если больше - то будет отображаться та часть которая влезет :) . НУ вот впринципе и всё по таблицам. Если не получилось запомнить не расстраивайтесь. С практикой все запомнится(как говорят главное знать, где подсмотреть!). В программе Adobe Dreamweaver все делается очень просто. ↑ Наверх ↑ См. также Следующий - Урок 10: Что такое html формы и зачем они нужны. Предыдущий - Урок 8: Цвет фона и текста [Обсудить на форуме] Есть вопрос? Получи ответ на ФОРУМЕ ПОДДЕРЖКИ
    Фотография 0