~~~ KOCI.INUMO.RU ~~~
Таблицы, часть 1. Урок 09. Раньше таблицы были основным элементом сайтов. С помощью таблиц делали дизайн, который представлял собой трудно понятную систему из множества таблиц, вложенных одна в другую. Код таких сайтов было трудно читать и понимать не только людям-программистам, но и браузерам. Сейчас ситуация кардинально изменилась, таблицы играют важную роль, но используют их только для таких вещей, для которых они и предназначены - для представления табличных данных. Допустим начальник нам поставил задачу, а художник изобразил эту постановку в виде рисунка (графического файла). Нам необходимо создать такую же табличку средствами HTML и разместить ее на нашу тестовую страничку.
© Перепечатка разрешается с установкой ссылки на ресурс http://koci.inumo.ru
Таблицы, часть 1
Еще не в столь давние времена, где-то до 2005-го года таблицы были основным элементом сайтов. С помощью таблиц делали дизайн, который представлял собой трудно понятную систему из множества таблиц, вложенных одна в другую. Код таких сайтов было трудно читать и понимать не только людям-программистам, но и браузерам.
Сейчас ситуация кардинально изменилась, таблицы играют важную роль, но используют их только для таких вещей, для которых они и предназначены - для представления табличных данных.
Допустим начальник нам поставил задачу, а художник изобразил эту постановку в виде рисунка (графического файла) следующим образом:
Нам необходимо создать такую же табличку средствами HTML и разместить ее на нашу тестовую страничку.
Пошагово эта задача решается следующим образом:
Получилось что-то похожее на таблицу в постановке задачи. Поставим наш код на тестовую страничку:
Наша тестовая страничка после данного урока:
article_009.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
article_009.zip ← скачайте пример, чтобы установить на свой сайт...
Сейчас ситуация кардинально изменилась, таблицы играют важную роль, но используют их только для таких вещей, для которых они и предназначены - для представления табличных данных.
Допустим начальник нам поставил задачу, а художник изобразил эту постановку в виде рисунка (графического файла) следующим образом:
Нам необходимо создать такую же табличку средствами HTML и разместить ее на нашу тестовую страничку.
Пошагово эта задача решается следующим образом:
- Создаем тег <table> - этот тег служит для браузера указанием, что далее идет таблица. В данном теге используем атрибут border="1" (рисуем рамку толщиной 1) и атрибут summary, в котором даем общее описание таблицы (этот атрибут служит для слепых пользователей Интернета, он зачитывает вслух его содержание).
- Создаем тег <caption> - этот тег для создания заголовка таблицы. В нашем случае можно целиком сдублировать текст, который мы создали для атрибута summary тега <table> ранее.
- Создаем тег <tr> (строка) для <th> (заголовки столбцов) - в нашем случае для заголовка столбца <th> "Жиры, Белки, Углеводы" используем атрибут colspan="3", чтобы в данном месте объеденить три столбца в один.
- Создаем 4 тега <tr> (строка) для <td> ячеек с информацией - в нашем случае для предпоследней строки используем атрибут rowspan="2", чтобы объеденить две последние строки в одну.
- Создаем тег </table> - этот тег служит для браузера указанием, что таблица закончилась.
| Дата | Время | Продукт | Место | Жиры, Белки, Углеводы | Деньги | ||
|---|---|---|---|---|---|---|---|
| 12.12.2011 | 19:00 | Кефир | Москва | 0 | 4 | 2 | 30 |
| 13.12.2011 | 20:00 | Мясо | Уфа | 1 | 3 | 4 | 50 |
| 14.12.2011 | 22:00 | Морковь | Самара | 1 | 2 | 7 | 23 |
| 23:00 | Картофель | Псков | 0 | 2 | 8 | 45 | |
<table border="1" style=""> <caption>Цены на продукты в городах России</caption> <tr style="text-align: center;"><th>Дата</th><th>Время</th><th>Продукт</th><th>Место</th><th colspan="3">Жиры, Белки, Углеводы</th><th>Деньги</th></tr> <tr><td>12.12.2011</td><td>19:00</td><td>Кефир</td><td>Москва</td><td>0</td><td>4</td><td>2</td><td>30</td></tr> <tr><td>13.12.2011</td><td>20:00</td><td>Мясо</td><td>Уфа</td><td>1</td><td>3</td><td>4</td><td>50</td></tr> <tr><td rowspan="2">14.12.2011</td><td>22:00</td><td>Морковь</td><td>Самара</td><td>1</td><td>2</td><td>7</td><td>23</td></tr> <tr> <td>23:00</td><td>Картофель</td><td>Псков</td><td>0</td><td>2</td><td>8</td><td>45</td></tr> </table>
article_009.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
article_009.zip ← скачайте пример, чтобы установить на свой сайт...
*** Машина-Функционал для передвижения по страничкам курса HTML ***
Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Тропинка к данной страничке:
ГлавСтр :: Урок_00 :: Урок_01 :: Урок_01.4 :: Лаба_1 :: Урок_01.5 :: Урок_01.6 :: Урок_02 :: Урок_03 :: Урок_04 :: Урок_05 :: Урок_06 :: Урок_07 :: Урок_08 :: Урок 09
Следующие странички, рекомендуемые для посещения и изучения:
Урок 10
Страничка сделана на основе контента курса HTML сайта kocby.ru