Поддержка сайта

Высокие позиции в поисковой системе, на прямую зависят от развития вашего сайта.

Продвижение сайтов

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

Создание сайтов

Мы делаем сайты быстро, недорого и профессионально. От работы с нами, у вас останутся только положительные эмоции.

Подписи к таблицам

.

Важный момент: применение caption — правильный способ добавления заголовка таблицы, но надпись может по-разному отображаться в различных браузерах. Это небольшая проблема — в конце концов, прекрасно, что есть некоторые различия в отображении страниц разными браузерами. Тем не менее, если в каком-то проекте все совсем плохо с этим элементом, разработчик может от него отказаться и установить обычный заголовок, например h2 или h3. Это вполне приемлемо — заголовки определяют структуру страницы, помогают поисковым системам работать с ее содержимым и обеспечивают веб-доступность. Но если можно использовать caption и как следует оформить его, то нужно поступать именно так.

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

Добавление таблицы клубных мероприятий

Вы изучили элементы, составляющие таблицу, а сейчас попробуйте применить их сами.

1. Откройте файл events. html в текстовом редакторе.

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

Помните, что вы не обязаны печатать все это самостоятельно — можете найти разметку в архиве кода.

Все возможности, здесь присутствуют: атрибут summary, элемент capti on, заголовки таблицы и базовые элементы tabl е, tr, td, которые применяются в каждой таблице. Но как это выглядит в браузере? Рисунок 6.6 прояснит это.

Рис. 6.6. Простая, неоформленная таблица

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

Откройте файл stylel. ess и добавьте новые правила для элементов th и tel. Вот как они должны выглядеть.

Получилось четыре правила стилей.

Первое касается всех элементов tablе, которые имеют атрибут elass со значением events. Это правило указывает свойству border-collapse удалить пробелы между ячейками.

Второе правило использует селекторы: tablе. eventsth, tabl е. events td влияет на все элементы th и td между тегами tableclass=events и /table. К сожалению, более простое объявление, например tablе. events th, td повлияет на элементы th внутри таблицы и на все элементы td. Зато мы здесь убиваем сразу двух зайцев (второй заяц — граница (border) и отступы (padding) вокруг каждой ячейки).

Последние два правила устанавливают размер шрифта для ячеек и заголовков.

На рис. 6.7 показан результат работы этого CSS-кода на веб-странице.

Исправим выравнивание заголовков таблицы. Как я уже говорил, по умолчанию для заголовков задано выравнивание по центру, в то время как для информации в ячейках — по левому краю. Это нелепо, я знаю. Изменим это.

В файле styl el. ess исправьте объявление для заголовков.

Рис. 6.7. Границы улучшают восприятие таблицы

Это решит проблему, но пойдем немного дальше и сделаем заголовок еще привлекательнее.

1. Добавьте новые объявления в правило стилей для table.events th — измените цвет текста на белый, добавьте фоновое изображение и отступы.

2. Заодно оформите подпись таблицы.

3. Сохраните таблицу стилей и обновите страницу в браузере. Сравните вашу работу с рис. 6.8.

Рис. 6.8. Шапка таблицы выглядит гораздо лучше

Обратите внимание на два момента. Во-первых, фоновое изображение — в точности то же самое, что мы использовали в заголовке страницы (большой коралловый риф, на фоне которого находится надпись BubbleUnder.com), но оно выглядит совершенно по-другому. Почему? В заголовке страницы мы расположили рисунок так, что его правый верхний угол скрыт. А в объявлении для элементов th никакого положения для рисунка не указано, поэтому мы видим его, как бы начиная с левого верхнего угла. Повторное использование рисунка, который уже встречался где-либо на сайте, сокращает время загрузки страницы, так как картинка уже имеется и компьютеру не нужно запрашивать другую картинку для фона шапки таблицы.

Во-вторых, я хочу поговорить о цвете текста. Здесь я указал цвет #fff fff. Это код белого цвета в шестнадцатеричной системе. Хотя гораздо проще запомнить слово white, чем длинный непонятный набор символов, очень важно разбираться с часто встречающимися кодами шестнадцатеричной системы. Другой код, который будет вам часто попадаться, — #000000, то есть черный цвет (это значит, что количество красного, зеленого и синего цветов в нем 0, 0 и 0, другими словами, здесь вообще нет цвета).

.

Читайте так же:
Not found