Заключение
В этой лекции было рассмотрено все, что требуется знать для создания эффективных таблиц данных в HTML. Я добавлю несколько подходящих замечаний:
Важно, чтобы таблицы правильно кодировались, чтобы их могли прочитать различные браузеры Web, мобильные, вспомогательные и другие устройства. Таблицу HTML лучше свести к минимуму, необходимо использовать CSS для стилевого оформления таблиц. Вы узнаете больше о CSS позже в этом курсе.
Таблицы могут быть доступны для мобильных устройств и пользователей, которые используют программное обеспечение для считывания экрана, сохраняя код простым, при использовании таких атрибутов как scope и summary, а также элемента caption для четкого и семантически правильного объявления, для чего предназначен соответствующий раздел. Для доступности также важно не использовать пустые ячейки таблицы для создания пробелов (используйте для этого CSS).
Дополнительное чтение
Рекомендации по таблицам W3C HTML 4 (http://www.w3.org/TR/html401/struct/tables.html)
Рекомендации по таблицам W3C CSS 2 (http://www.w3.org/TR/CSS21/tables.html)
Роджер Йоханссон "Создание таблиц" (http://www.456bereastreet.com/archive/200410/bring_on_the_tables/)
Контрольные вопросы
Начните с кодирования простой таблицы только с тремя основным элементами таблицы: table, tr, и td. Сохраните ее и просмотрите в браузере.
Как и во втором примере выше, добавьте в таблицу заголовок таблицы, верхний колонтитул, и нижний колонтитул. Как это изменит то, что вы видите в браузере?
Что можно сделать, чтобы таблицы были более доступны для считывателей экрана и портативных устройств?
Создайте теперь файл CSS. Попробуйте оформить в таблице границы, заполнение и пробел между ячейками только с помощью CSS и без атрибутов в разметке HTML. Добавьте цвет фона и задайте шрифт.
Об авторе
Web дизайнер /разработчик по профессии, фотограф, мобильный блоггер Дженифер Хелен начала свою карьеру художника и дизайнера в возрасте 11 месяцев с использования в качестве средств выражения манную кашу. Она самостоятельно изучила HTML в 1996 г., когда компьютерный сноб сказал, что художник не может изучить код, и полюбила с тех пор Web-дизайн всем сердцем.
Дженифер Хелен является владельцем и основателем компании Black Phoebe Designs, занимающейся дизайном для Web и мобильных устройств. Она получила степень магистра по Вычислительной технике и мультимедийным системам в Тринити-колледже в Дублине, Ирландия, и изучала Web-дизайн в университете Лос-Анджелеса с 2001 по 2005 гг.. Она участвовала в двух проектах мобильного блоггинга Nokia, Wasabi Lifeblog (2004-2005) и Nokia Urbanista Diaries (2008). Дженифер можно всегда найти в сети по адресу blackphoebe.com (http://www.blackphoebe.com/) или blackphoebe.mobi (http://blackphoebe.mobi/).