И снова таблицы..Данная глава является продолжением 4 главы про таблицы, отложил я её на потом по нескольким причинам. Во-первых, четвёртая глава и без того получилась длинноватой и "неповоротливой".. Во-вторых, не хотел, что бы Вы на тот момент погрязли в изучении таблиц и так сказать топтались на месте.. обучение, на мой взгляд, должно происходить живенько, интересно, а главное результативно! Зато теперь, когда у Вас сложилось общее представление о HTML, Вы разобрались с его базовой частью, сделали свой первый нехитрый сайт, можно наращивать багаж знаний, умений и навыков. Ну и в-третьих, я надеюсь, что Вы к этому времени, параллельно начали изучать CSS.. что разве ещё нет? жаль.. Дело в том, что далее в этом учебнике нет нет будут попадаться вещи, которые сами по себе могут показаться бесполезными и бессмысленными, однако в купе с другими науками они порой незаменимы! Ладно, вернёмся к таблицам.. В качестве "полигона" для изучения нового материала возьмём вот такую жутко скучную таблицу:
Ну что ж, давайте поколдуем над ней.. Заголовки таблиц.Любая ячейка таблицы может быть определена как заголовок. Для того чтобы сделать ячейку таблицы заголовком нужно вместо знакомого тега <td> использовать тег <th>. Например, вот так: <table><tr> <th>Данная ячейка является заголовком</th> </tr> </table> Как правило, текст ячейки определённый в качестве заголовка отображается браузерами жирным шрифтом по центру ячейки. Ну что давайте попробуем сделать некоторые ячейки нашей таблицы заголовками? смотрим пример: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head> <title>Заголовок таблицы</title> </head> <body> <table border="1" width="400" cellpadding="3" cellspacing="0"> <tr> <th>Продукт</th><th>Белки</th><th>Жиры</th><th>Углеводы</th><th>ккал</th> </tr> <tr> <th>Хлеб ржаной</th><td>4,7</td><td>0,7</td><td>49,8</td><td>214</td> </tr> <tr> <th>Молоко</th><td>2,8</td><td>3,2</td><td>4,7</td><td>58</td> </tr> <tr> <th>Картофель</th><td>2</td><td>0,1</td><td>19,7</td><td>83</td> </tr> <tr> <th>Свинина</th><td>11,4</td><td>49,3</td><td>9</td><td>489</td> </tr> <tr> <th>Итого:</th><td>20,9</td><td>53,3</td><td>83,2</td><td>844</td> </tr> </table> </body> </html> К тегу <th> могут применятся точно такие же атрибуты как и к тегу <td> о них мы говорили в 4 главе поэтому повторятся не буду, а просто перечислю их:
Думаю понятно, а посему идем дальше.. Название таблицы и её описаниеТег <caption> позволяет озаглавить таблицу, подписать её каким либо текстом. Данный тег должен располагаться внутри таблицы сразу после <table> <table><caption>Название таблицы</caption> <tr> <td>ячейка</td> </tr> </table> Вот пример: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head> <title>Название таблицы</title> </head> <body> <table border="1" width="400" cellpadding="3" cellspacing="0"> <caption><b>Энергетическая ценность продуктов питания:</b></caption> <tr> <th>Продукт</th><th>Белки</th><th>Жиры</th><th>Углеводы</th><th>ккал</th> </tr> <tr> <th>Хлеб ржаной</th><td>4,7</td><td>0,7</td><td>49,8</td><td>214</td> </tr> <tr> <th>Молоко</th><td>2,8</td><td>3,2</td><td>4,7</td><td>58</td> </tr> <tr> <th>Картофель</th><td>2</td><td>0,1</td><td>19,7</td><td>83</td> </tr> <tr> <th>Свинина</th><td>11,4</td><td>49,3</td><td>9</td><td>489</td> </tr> <tr> <th>Итого:</th><td>20,9</td><td>53,3</td><td>83,2</td><td>844</td> </tr> </table> </body> </html> К тегу <caption> может быть применён атрибут align - выравнивание названия таблицы по горизонтали с возможными значениямиleft, right и center, а также атрибут valign который говорит от том где должно располагаться название сверху - top или снизу - bottomтаблицы. Однако хочу отметить, что данные атрибуты в разных браузерах ведут себя по разному, так например, запись: <caption align="left">Текст</caption>- для браузеров IE и Opera разместит название сверху таблицы по её левому краю, а для браузера Firefox это будет значить, что название следует размещать слева от самой таблицы. Так же название таблицы или её краткое описание можно указывать с помощью атрибута summary тега <table> Вот так: <table summary="описание таблицы">Такое описание никак не отображается и не выводится на экран обычными браузерами, однако может быть использовано поисковыми системами, а так же речевыми браузерами. Пример: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head> <title>Описание таблицы</title> </head> <body> <table border="1" width="400" cellpadding="3" cellspacing="0" summary="Энергетическая ценность продуктов питания"> <tr> <th>Продукт</th><th>Белки</th><th>Жиры</th><th>Углеводы</th><th>ккал</th> </tr> <tr> <th>Хлеб ржаной</th><td>4,7</td><td>0,7</td><td>49,8</td><td>214</td> </tr> <tr> <th>Молоко</th><td>2,8</td><td>3,2</td><td>4,7</td><td>58</td> </tr> <tr> <th>Картофель</th><td>2</td><td>0,1</td><td>19,7</td><td>83</td> </tr> <tr> <th>Свинина</th><td>11,4</td><td>49,3</td><td>9</td><td>489</td> </tr> <tr> <th>Итого:</th><td>20,9</td><td>53,3</td><td>83,2</td><td>844</td> </tr> </table> </body> </html> |
