Урок 6. Работа с таблицами. Часть 2.

Среда, 10 августа 2011 г.
Рубрика: Уроки Алёны Ляховой -> HTML и CSS для начинающих и не только
Метки: html
Просмотров: 344
Подписаться на комментарии по RSS

На прошлом уроке мы узнали основную структуру построения таблицы и то, что при наличии заголовков таблицы, голосовой браузер будет сначала говорить заголовок ячейки, а потом её значение.

На этом же уроке мы подправим код таблицы, чтобы сделать её более функциональной и продолжим изучать возможности таблиц.

Приступим!

Какие исправления в коде мы имели в виду? Допустим, содержание заголовка нашей таблицы будет таким: « Государство и зависимые территории», «Количество населения страны» и «Процентное соотношение с населением Земли». И браузер для каждой строки будет произносить заголовки столбцов! А если строк будет 50 или 100? От такого количества повторения заголовков можно сойти с ума!

От этого нас спасёт атрибут abbr! Он предназначен для сокращения заголовков, а значит и для улучшения доступности таблицы!

Изменим наш предыдущий код таблицы, добавив в него атрибут abbr:

<table>
<tr>
<th abbr="Страна">Государство и зависимые территории</th>
 <th abbr="Население">Количество населения страны</th>
 <th abbr="% от населения Земли ">Процентное соотношение с населением Земли </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>

При использовании такой разметки голосовой браузер с полными заголовками будет читать только первую строчку (для разъяснения смысла таблицы), а последующие в сокращенном виде! Выглядеть это будет таким образом:

Государство и зависимые территории, США, Количество населения страны, 311 029 000, Процентное соотношение с населением Земли, 4.52%, Страна, Бразилия, население, 195 117 000, % от населения Земли, 2.82%.

Согласитесь, что так гораздо удобнее и не так тяжело для слуха пользователя, к тому же информативность от этого не уменьшилась!

Наша таблица так же должна иметь название, чтобы пользователь понял что перед ним за таблица. Для этого существует тэг <caption>. Этот тэг должен идти сразу после <table>.

Пример:

<table>
<caption>Список стран по населению</caption>
<tr>
<th abbr="Страна">Государство и зависимые территории</th>
 <th abbr="Население">Количество населения страны</th>
 <th abbr="% от населения Земли ">Процентное соотношение с населением Земли </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>

Ещё для нашей таблицы можно добавить пояснение. Т.е. Информацию о том, что содержится в таблице. Это можно сделать с помощью атрибута summary. Такой атрибут будет неоценим для пользователей с ограниченными возможностями и поисковых роботов, ведь он предоставит основную информацию о содержании таблицы, а в визуальном браузере отображаться не будет!

Пример:

<table summary="Данные о населении государств и зависимых территорий с процентным соотношением от населения Земли."> 
<caption>Список стран по населению</caption>
<tr>
<th abbr="Страна">Государство и зависимые территории</th>
 <th abbr="Население">Количество населения страны</th>
 <th abbr="% от населения Земли ">Процентное соотношение с населением Земли </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>

Теперь давайте усложним таблицу и увеличим её функциональность.

Строки таблицы можно объединять в так называемые секции: <thead>,<tfoot> и <tbody>.

<thead> и <tfoot> служат для описания содержимого таблицы (шапка таблицы и её подвал).

<tbody> - это само содержимое таблицы, т.е. строки и столбцы.

Важно!!! Каждая из этих секций должна находиться между <table></table> и содержать хоть одну строку. <thead> и <tfoot> должны располагаться перед <tbody>, чтобы была возможность получить информацию о таблице до прочтения ее содержимого.

Пример построения такой таблицы:

<table> 
	    
<thead> <!-- описание содержимого таблицы-->;
	        <tr></tr> 
	        [шапка] 
	    </thead> 
	    <tfoot> <!-- описание содержимого таблицы-->
	        <tr></tr> 
	        [подвал] 
	    </tfoot> 
	    <tbody> <!-- само содержание таблицы-->
	        <tr><td>строка1</td> <td>ячейка1</td></td> <td>ячейка2</td></tr> 
                 	    </tbody> 
	    <tbody> <!-- само содержание таблицы-->
	        <tr><td>строка2</td> <td>ячейка1</td><td>ячейка2</td</tr> 
	        
	    </tbody> 
	</table>

Попробуйте вставить в свой файл такую таблицу и поэкспериментировать с её содержимым, так Вам сразу станет всё намного понятней.

При такой группировке строк есть свои плюсы:

1) Шапку, содержимое и подвал Вы можете оформить по разному, не прибегая к дополнительным классам;

2) Данные таблицы при выводе на печать располагаются таким образом, что на каждой новой странице печатается шапка и подвал для более упрощенного чтения таблицы;

3) В некоторых браузерах появляется возможность свободной прокрутки содержимого таблицы не затрагивая шапку и подвал!

Вывод: Очень функциональный вариант написания кода!

Для нашего примера код будет выглядеть следующим образом:

<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><!-- Это коментарий--> Я начал изучать HTML совсем недавно, но уже делаю успехи!</p><p>Здравствуйте! Это мой первый сайт! Я начал изучать HTML совсем недавно, но уже делаю успехи!</p></i></left>
<table summary="Данные о населении государств и зависимых территорий с процентным соотношением от населения Земли.">
	    <thead> <!-- описание содержимого таблицы-->
	        <tr></tr> 
<center>Список стран по населению</center>
	       </thead> 
	    <tfoot> <!-- описание содержимого таблицы-->
	        <tr></tr>
<center>Данные о населении государств</center>
 	       </tfoot> 
	    <tbody> <!-- само содержание таблицы-->
	        <tr><td>страна</td> <td>США</td><td>Бразилия</td></tr> 
                 	    </tbody> 
	    <tbody> <!-- само содержание таблицы-->
	        <tr><td>население</td> <td>311 029 000</td><td>195 117 000</td></tr> 
	        	    </tbody> 
 	    <tbody> <!-- само содержание таблицы-->
	        <tr><td>% от населения Земли</td> <td>4.52%</td><td>2.82%</td></tr> 
	     	    </tbody> 
	</table> 
</body>
</html>

Создание таблиц не настолько простое дело, как кажется на первый взгляд, но правильно созданная таблица поможет как и обычным пользователям, так и пользователям с ограниченными возможностями, учитываете это при работе с таблицами на своём сайте.

На странице можно использовать несколько таблиц, важно не запутаться и соблюдать вложенность!

Давайте попробуем создать такую таблицу, которая будет содержать другую.

Давайте создадим для примера одну таблицу в другой. Возьмём простую таблицу 2х2 и добавим в первую ячейку этой таблицы еще одну, допустим 2х3 . У нас должен получиться следующий код:

<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><!-- Это коментарий--> Я начал изучать HTML совсем недавно, но уже делаю успехи!</p><p>Здравствуйте! Это мой первый сайт! Я начал изучать HTML совсем недавно, но уже делаю успехи!</p></i></left>
<table BORDER=2> <!--создаём основную таблицу 2х2, для удобства зададим толщину границ=2-->
<tr>
 <td><!--Вставляем в первую ячейку таблицы еще одну таблицу 2х3 так же с толщиной границ=2-->
<table BORDER=2>
<tr>первая строка первой таблицы
 <td>1 строка 2 таблицы 1 столбец</td>
<td>1 строка 2 таблицы 2 столбец</td> 
<td>1 строка 2 таблицы 3 столбец</td>
 </tr>
<tr>
<td>2 строка 1 столбец</td>
 <td>2 строка 2 столбец</td>
<td>2 строка 3 столбец </td> 
 </tr>
</table><!--закрываем вложенную таблицу-->
</td>
<td>2 строка 1 таблицы 2 столбец</td> 
 </tr>
<tr>
 <td>2 строка 1 таблицы 1 столбец</td>
<td>2 строка 1 таблицы 2 столбец</td> 
 </tr>
</table><!--закрываем основную таблицу-->
</body>
</html>

Это, конечно, немного сложное представление таблицы, но Вы должны хорошо понять её структуру! Для лучшего усвоения материала изменяйте код по своему усмотрению и смотрите что у Вас получится. Если что-то выглядит не так, как Вы предполагали, пересмотрите внимательно код, возможно в процессе работы Вы допустили незначительные ошибки, которым сопротивляется браузер. Как мы Вам уже говорили – не совершает ошибок лишь тот, кто ничего не делает!

Если Вам необходимо задать размеры таблицы, то воспользуйтесь параметрами width и height, как при работе с изображениями.

Пример:

<table border="1" width="400" height="200"> - это будет таблица шириной 400 и высотой 200 пикселей.

Этими же параметрами можно задать высоту и ширину строк и ячеек:

<tr>

<td width="40"> содержимое ячейки</td>

</tr>

Так ячейка будет 40 пикселей шириной.

В ячейки таблиц Вы так же можете вставлять изображения, ссылки, списки и т.д.

Так же в таблицах можно задавать фон ячейки или всей таблицы цветом либо изображением:

<td width="40" bgcolor="FF0000"> </td> - это будет ячейка красного цвета

<table bgcolor="FF0000"> - это будет красная таблица

<tr background="имя изображения.формат"> - изображение станет фоном строки, для фона всей таблицы пропишите параметр в <table>, а отдельной ячейки в <td>.

На этом наш урок закончен. Всем Удачи! До встречи на следующем уроке!

Поделиться...

Урок 5. Работа с таблицами.
- Урок 6. Работа с таблицами. Часть 2.
- Урок 7. Работа с таблицами. Теория. Часть 3.

Еще записи по теме

Комментариев: 3

2011-09-10 в 22:14:04 | Сергей

Главная страница сайта состоит с таблице 10 строк. Каждая строка разбита на 5 столбцов. Интересует вопрос как в таблице в тэг установить видео, с определенным одинаковым размером.
2011-09-12 в 12:56:53 | Алёнка Ляхова

Вы можете воспользоваться тэгом <EMBED>. Для каждой ячейки таблицы, в которую Вы хотите поместить видео-файл, необходимо прописать такой код:

<EMBED SRC=”Путь к файлу” autoplay="вариант запуска" width="ширина" height="высота"> </EMBED></td>

Где вариант воспроизведения может быть:

True – сразу после запуска;

False – воспроизведение после нажатия кнопки.
2011-09-12 в 13:11:23 | Влад

У нас есть урок по тегу embed - http://web-stroiika.ru/page/no-title-1

Оставьте свой комментарий!

Не регистрировать/аноним

Ваше имя

Используйте нормальные имена. Ваш комментарий будет опубликован после проверки.

Зарегистрирован или новая регистрация

E-mail
Пароль

Если вы уже зарегистрированы как комментатор, укажите пароль и свой действующий email.

Ваш комментарий

Введите нижние символы

Защита от спама: введите только нижние символы

(обязательно)

Опрос

**Оказался ли для Вас полезным наш сайт?**
Всего достаточно! Даже очень! (19) 59.38%

Хотелось бы больше готовых решений... (10) 31.25%

Можно бы было более подробно объяснять учебный материал... (3) 9.38%

Всего проголосовало: 32 чел
Архивы голосований