HTML верстка. Урок 6: Заполнение ячейки NewsЗаймемся ячейкой News. Нужно, чтобы в ней располагались:
Сделаем эти блоки в виде трех таблиц. Первая и третья таблицы будут иметь "зазор" между ячейками (назовем их NewsItem) в 5 пкс. В HTML это достигается с помощью <table cellspacing="5">. В CSS единственный аналог этой записи: table {border-collapse: separate; border-spacing: 5px; }, но он не работает в IE - в нем расстояние между ячейками при border-collapse: separate всегда будет 2 пкс, какой бы border-spacing вы не прописали. Так что воспользуемся параметром cellspacing. У ячеек NewsItem будет серая окантовка толщиной 1 пкс и фон в виде градиента от серого к белому. Текст в них будет выравниваться по ширине. Для заголовка и для ссылки (>> в конце каждого текста) я указала стиль текста. Вот html-код первой таблицы:
Вторая таблица будет содержать всего одну ячейку, которая будет использовать созданный в уроке 3 стиль "hdr" (для того, чтобы вставить точки перед "News"):
Третью таблицу вы можете сделать сами по аналогии с первой, вставив ее после таблицы hdrtab и добавив еще 2 ячейки. Чтобы содержимое ячейки News не выходило за серую вертикальную линию (она же - фон News), сделаем отступ от правой границы 6 пкс.
Ячейка News заполнена. Посмотрите html-страницу, а также полный текст файлов index.html и style.css. Синим цветом в файлах помечен html-код, который мы добавили на этом уроке. Урок 1 | Урок 2 | Урок 3 | Урок 4 | Урок 5 | Урок 6 | Урок 7 | На главную страницу |