Урок 5. Работа с таблицами.
Среда, 10 августа 2011 г.Рубрика: Уроки Алёны Ляховой -> HTML и CSS для начинающих и не только
Метки: html
Просмотров: 347
Подписаться на комментарии по RSS
Создание таблиц является очень важной темой, ведь таблицы используются как для представления табличных данных (что очень удобно при большом объёме материла) так и для создания дизайна сайта! Поэтому внимательно изучите этот раздел, несмотря на его некоторую сложность!
Основная задача таблиц – размечать табличные данные. Использование их по назначению значительно облегчает доступ к данным. Особенно для не визуальных браузеров и при больших объемах информации, т.к. когда Вы смотрите на таблицу, вы видите четкие связи между заголовками и данными ячеек и можете легко определить связь между строками и столбцами.
Таблица, особенно объемная — очень громоздкая конструкция. При некачественной разметке, чтение большой таблицы для поисковых роботов и не визуальных браузеров может стать очень сложной задачей. Но, для решения таких проблем таблицы HTML снабдили рядом полезных тегов и атрибутов.
На этом уроке мы научимся создавать таблицы и рассмотрим варианты их оформления.Итак, приступим!
Таблица описывается парным тегом <table> и </table>. Тэг <table> говорит браузеру, что начинается таблица, а </table> говорит о том, что таблица заканчивается. Запомните, что начинать и заканчивать таблицу всегда необходимо именно с этих тэгов!Для создания строк в таблице используют тэг <tr></tr>, а столбцов <td></td>. Внимание! Тэги столбцов всегда должны находиться между тэгами строк! Пример таблицы 3х3 (3столбца и 3 строки):
<table> <td> </td> <td> </td> <td> </td> </tr> <!-- Создаём первую строку, содержащую 3 столбца--> <tr> <td> </td> <td> </td> <td> </td>< /tr> <!-- Создаём вторую строку, содержащую три столбца --> <tr> <td> </td <td> </td> <td> </td> </tr> <!-- Создаём третью строку, содержащую три столбца--> </table>Т.е. каждый раз, когда мы добавляем новую строку в таблицу, необходимо в неё прописывать то количество столбцов, которое содержится в нашей таблице.А вот содержимое ячеек пишется только между тэгами <td> и </td>!Писать содержимое ячейки между тэгами <tr> и <td>, </td> и </tr> или </td> и </td> - нельзя!Важно!!! Для описания таблицы Вы всегда должны использовать только такой порядок: тэги таблицы/тэги строки/тэги ячеек (столбцов), и ни в коем случае подругому!
Для ясности заполним нашу таблицу содержимым:
<table> <tr> <td> строка 1 ячейка 1</td> <td> строка 1 ячейка 2</td> <td>строка 1 ячейка 3</td> </tr> <tr> <td>строка 2 ячейка 1</td> <td>строка 2 ячейка 2</td> <td>строка 2 ячейка 3</td> </tr> <tr> <td>строка 3 ячейка 1</td> <td>строка 3 ячейка 2</td> <td>строка 3 ячейка 3</td> </tr> </table>Но для разметки HTML документов таблицы нужно использовать очень осторожно! Это может вызвать проблемы при отображении страниц не визуальными браузерами. Кроме того, при работе с графикой у пользователей может появиться горизонтальная прокрутка при дизайне, рассчитанном на большие мониторы. Во избежание проблем такого рода, для разметки Вы должны использовать таблицы стилей CSS, а не обычные таблицы. Таблицы стилей (style sheets – листы стилей) – это абстракция, в которой стиль документа определяется отдельно от его содержания. Но о таких видах таблиц мы поговорим в следующих уроках, а сейчас вернёмся к обычным таблицам.Первым делом упростить доступ к таблице можно правильным размещением заголовков! Для этого существует тэг <th></th>. Ним размечают ячейки заголовков таблицы. У такой разметки существует ряд плюсов:1. Визуальные браузеры выделяют заголовки (обычно полужирным шрифтом) от табличных данных.2. Голосовые браузеры выделяют заголовки интонацией и не дадут пользователю потеряться в таблице.
К примеру, при таком варианте таблицы:
<table> <tr> <td>Страна</td> <td> Население</td> <td> % от населения Земли</td> </tr> <tr> <td>США</td> <td> 311 029 000</td> <td> 4.52%</td> </tr> <tr> <td> Бразилия</td> <td> 195 117 000</td> <td> 2.82%</td> </tr> </table>Здесь голосовой браузер прочитает таблицу так: Страна Население % от населения Земли США 311 029 000 4,52% Бразилия 195 117 000 2,82%. Если бы Вы услышали такое, много ли из этого Вы бы смогли понять? Поэтому стоит прибегнуть к прекрасному тегу <th>. Давайте посмотрим, что у нас получится с его применением:
<table> <tr> <th>Страна</th> <th> Население</th> <th> % от населения Земли</th> </tr> <tr> <td>США</td> <td> 311 029 000</td> <td> 4.52%</td> </tr> <tr> <td> Бразилия</td> <td> 195 117 000</td> <td> 2.82%</td> </tr> </table>Теперь речь станет более понятная: Страна США, Население 311 029 000, % от населения Земли 4,52%, Страна Бразилия, Население 195 117 000, % от населения Земли 2,82 %. Так же изменится внешний вид таблицы в браузере. Попробуйте добавить поочерёдно коды обеих таблиц в наш файл test1.html, открыть его в браузере и увидеть разницу:
Вариант первый:
<html> <head> <meta http-eguiv="Content-Type" content="text/html; charset=windows-1251"> <meta name="keywords" content="Ключевые слова"> <title>Заголовок документа</title> </head> <body> <font fece="Verdana,Sans-serif" color="#FF0000"> <br><center><b><h1>Название раздела</H1></b></center></br> </font> <left> <i> <p>Здравствуйте!</p> <p>Это мой первый сайт! </p> <p> Я начал изучать HTML совсем недавно, но уже делаю успехи!</p> <p>Здравствуйте! Это мой первый сайт! Я начал изучать HTML совсем недавно, но уже делаю успехи!</p> </i> </left> <table> <tr> <td>Страна</td> <td> Население</td> <td> % от населения Земли</td> </tr> <tr> <td>США</td> <td> 311 029 000</td> <td> 4.52%</td> </tr> <tr> <td> Бразилия</td> <td> 195 117 000</td> <td> 2.82%</td> </tr> </table> </body> </html>
Вариант второй:
<html> <head> <meta http-eguiv="Content-Type" content="text/html; charset=windows-1251"> <meta name="keywords" content="Ключевые слова"> <title>Заголовок документа</title> </head> <body> <font fece="Verdana,Sans-serif" color="#FF0000"> <br><center><b><h1>Название раздела</H1></b></center></br> </font> <left> <i> <p>Здравствуйте!</p> <p>Это мой первый сайт! </p> <p> Я начал изучать HTML совсем недавно, но уже делаю успехи!</p> <p>Здравствуйте! Это мой первый сайт! Я начал изучать HTML совсем недавно, но уже делаю успехи!</p> </i> </left> <table> <tr> <th>Страна</th> <th> Население</th> <th> % от населения Земли</th> </tr> <tr> <td>США</td> <td> 311 029 000</td> <td> 4.52%</td> </tr> <tr> <td> Бразилия</td> <td> 195 117 000</td> <td> 2.82%</td> </tr> </table> </body> </html>
Увидели разницу?
В качестве домашнего задания потренируйтесь в создании таблиц разных размеров и с разным содержимым.
На следующих уроках мы продолжим изучение возможностей таблиц.
Всем удачи! До встречи на следующем уроке!Поделиться...
- Урок 1. Знакомство с HTML. Теория.
- Урок 9. Дизайн сайта с использованием CSS стилей. Теория.
- Урок 10. Дизайн сайта с использованием CSS стилей. Теория. Часть 2.
- Урок 11. Дизайн сайта с использованием CSS стилей. Теория. Часть 3.
- Урок 12. Дизайн сайта с использованием CSS стилей. Работа с текстом.
- Урок 13. Дизайн сайта с использованием блочной модели CSS таблиц стилей.
- Урок 14. Создаём кнопку в CSS.
- Урок 3. Форматирование текста
- Урок 2. Создание первой HTML страницы.
- Урок 4. Добавление изображения.
- Урок 5. Работа с таблицами.
- Урок 8. Табличный дизайн сайта.
- Урок 9. Дизайн сайта с использованием CSS стилей. Теория.
Оставьте свой комментарий!
Да, таблицы - действительно, достаточно сложная часть в дизайне, но при этом иногда необходимая. Мне в этой статье пока не совсем все понятно, но, думаю, со временем разберусь, надо больше практиковаться.
Уважаемая caterina! Что именно Вам не понятно по данному уроку? Спрашивайте и мы Вам объясним более подробно непонятные моменты!
Не плохое исполнение, если учесть что на этом сайте в разделе html уже есть такие уроки по таблицам. Автор, быть может вам начать писать о чём-то новом, чем повторять уже написанное?
Хорошо подмечено, но... Во-первых, каждый автор излагает учебный материал по-разному, с разной глубиной изучений и объяснений. Во-вторых, рубрика «HTML и CSS для начинающих и не только» - не обычный набор разноплановых уроков из различных областей, а комплекс уроков для методичного, последовательного изучения данных языков (на этом акцентируется внимание в первых уроках, и Вы можете убедиться в этом, читая статьи последовательно, а не вразнобой). Т.е. невозможно изложить основную структуру HTML и сразу перейти, к примеру, на создание табличного дизайна, возлагая надежды на то, что между двумя этими уроками пользователь прочитал другие статьи из других рубрик и сможет разобраться что к чему. Поэтому, уважаемый roges, Ваше замечание не совсем правильное.
Хозяин барин, но я бы на вашем месте связал бы эти уроки ссылками, так как вы уже сами заметили, что "каждый автор излагает учебный материал по-разному, с разной глубиной изучений и объяснений.", потому как аудитория мыслит не одинаково и по разному воспринимает информацию. Думаю подача материала из двух связанных источников будет более понятна и востребована.
Спасибо за совет. В ближайшее время уроки будут подредактированы.
Довольно-таки неплохой урок по таблицам, по-моему, все объяснено доступным языком что даже новечку разобраться будет не сложно, кроме того, показаны примеры, что тоже является несомненным плюсом, хотя было бы не плохо иметь еще скрины тех таблиц, которые мы пишем в этом уроке - тогда у ученика была бы возможность визуально сверять результат своей работы с тем, что должно получиться