Основы HTML верстки. Часть вторая

Перейдем ко второй части макета — таблице. Как вы уже знаете таблица создается при помощи тега <table>...</table>, строки в таблице обозначаются тегом <tr>...</tr>, а ячейки обозначаются тегом <td>...</td>. Для нашей таблицы нам еще понадобятся заголовки, которые обозначаются тегом <th>...</th>. Откройте шаблон html в текстовом редакторе и запишите в нем код для таблицы, обратите внимание на то, что нам нужно некоторые ячейки объединить по горизонтали при помощи атрибута colspan, а конкретно - это ячейки заголовков (опыт работы, профессиональные навыки, образование), а также ячейки, где мы описываем профессиональные навыки и знания:

Основы HTML верстки. Часть вторая

Сохраните изменения и откройте шаблон в браузере:

Основы HTML верстки. Часть вторая

Как видно из рисунка наша таблица идет сразу после списков, а нужно чтобы она прижалась к левому краю окна браузера. Для этого мы должны вложить верхнюю часть макета (фотографию, заголовок и список) и нижнюю часть - таблицу в блоки. Блоки создаются при помощи тега <div>...</div>

div

Далее нужно прописать стили для блоков и таблицы.

Для div

  1. Устанавливаем отступ снизу при помощи свойства margin-bottom: 15px;
  2. Устанавливаем свойство для отображения содержимого overflow: hidden; Так как высота и ширина для блока не заданы, то в данном случае областью блока будет все его содержимое: 

Основы HTML верстки. Часть вторая

Для table

  1. Устанавливаем границу при помощи свойства border со значениями: толщина - 1px, стиль - solid, цвет - #d8d8d8;
  2. Устанавливаем свойство для вида отображения границ ячеек в месте стыка - border-collapse. Нам надо чтобы не было двойных линий, поэтому ставим значение collapse;
  3. Устанавливаем ширину таблицы при помощи свойства width со значением  980px:

Основы HTML верстки. Часть вторая

Для заголовков таблицы th

  1. Размер текста;
  2. Цвет;
  3. Выравнивание текста по левому краю при помощи свойства text-align со значением left;
  4. Отступы внутри ячейки:

Основы HTML верстки. Часть вторая

Для ячеек таблицы td

  1. Устанавливаем границу, она такая же как и для всей таблицы;
  2. Устанавливаем отступы внутри ячейки, они такие же как и для заголовоков:

Основы HTML верстки. Часть вторая

Сохраняем изменения. Смотрим результат работы в браузере.

Скачать пример

Видеоматериал по этому уроку:

http://youtu.be/E533b7JEpIQ

Источник: http://psd-html-css.ru/html/osnovy-html-verstki-chast-vtoraya

Читать комменты и комментировать

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



Защитный код
Обновить

Основы HTML верстки. Часть вторая | | 2012-03-27 10:58:00 | | Статьи Web-мастеру | | Перейдем ко второй части макета — таблице. Как вы уже знаете таблица создается при помощи тега ..., строки в таблице обозначаются тегом ..., а ячейки обозначаются тегом .... Для нашей таблицы нам еще | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: