~~~ KOCI.INUMO.RU ~~~
Таблицы, часть 2, устаревшие атрибуты. Урок 10. В данном уроке мы изучим некоторые устаревшие атрибуты таблиц, которые вряд ли стоит использовать на новых страничках HTML. Тем не менее, знать эти атрибуты необходимо, т.к. за долгое время сделано очень много документов с данными атрибуты и есть большая вероятность, что нам придется разбираться с этими документами. Примеры устаревших атрибутов для таблиц: width="640" (по новому width:640px; в атрибуте <style>), align="center" (margin-left:auto; margin-right:auto;), cellpadding="2" (padding:2px;), cellspacing="1" (border-spacing:1px;), align="center" (text-align:center;).
© Перепечатка разрешается с установкой ссылки на ресурс http://koci.inumo.ru
10. Таблицы, часть 2, устаревшие атрибуты.
В данном уроке мы изучим некоторые устаревшие атрибуты таблиц, которые вряд ли стоит использовать на новых страничках HTML.
Тем не менее, знать эти атрибуты необходимо, т.к. за долгое время сделано очень много документов с данными атрибуты и есть большая вероятность, что нам придется разбираться с этими документами.
Выполним некоторые пошаговые модернизации с нашей таблицей:
Наша тестовая страничка после данного урока:
article_010.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
article_010.zip ← скачайте пример, чтобы установить на свой сайт...
Тем не менее, знать эти атрибуты необходимо, т.к. за долгое время сделано очень много документов с данными атрибуты и есть большая вероятность, что нам придется разбираться с этими документами.
Выполним некоторые пошаговые модернизации с нашей таблицей:
- В атрибут <style> тега <table> добавим свойство width:640px; - таким путем мы добъемся, чтобы ширина нашей таблицы стала равной 640 пикселей (в старом стиле это делал атрибут width="640").
- В атрибут <style> тега <table> добавим свойства margin-left:auto; margin-right:auto; - таким путем мы добъемся, чтобы наша таблица оказалась выровненной по центру (в старом стиле это делал атрибут align="center").
- В тег <table> добавим атрибут padding:2px; - ячейки таблицы увеличатся на 2 пикселя сверху, справа, снизу, слева. Это увеличение заполнится пустым пространством (в старом стиле это делал атрибут cellpadding="2").
- В тег <table> добавим атрибут border-spacing:1px; - появятся расстояния между ячейками таблицы, которые будут равными 1 пикселю (в старом стиле это делал атрибут cellspacing="1").
- В атрибут <style> тега <table> добавим свойства style="text-align:center;" - чтобы информация в ячейках оказалась выровненной по центру (в старом стиле это делал атрибут align="center").
<table border="1" style="width:640px; margin-left:auto; margin-right:auto; padding:2px; border-spacing:1px;"> <caption>Цены на продукты в городах России</caption> <tr style="text-align:center;"><th>Дата</th><th>Время</th><th>Продукт</th><th>Место</th><th colspan="3">Жиры, Белки, Углеводы</th><th>Деньги</th></tr> <tr style="text-align:center;"><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 style="text-align:center;"><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 style="text-align: center;"><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 style="text-align:center;"> <td>23:00</td><td>Картофель</td><td>Псков</td><td>0</td><td>2</td><td>8</td><td>45</td></tr> </table>
article_010.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
article_010.zip ← скачайте пример, чтобы установить на свой сайт...
*** Машина-Функционал для передвижения по страничкам курса HTML ***
Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Тропинка к данной страничке:
ГлавСтр :: Урок_00 :: Урок_01 :: Урок_01.4 :: Лаба_1 :: Урок_01.5 :: Урок_01.6 :: Урок_02 :: Урок_03 :: Урок_04 :: Урок_05 :: Урок_06 :: Урок_07 :: Урок_08 :: Урок_09 :: Урок 10
Следующие странички, рекомендуемые для посещения и изучения:
Урок 11
Страничка сделана на основе контента курса HTML сайта kocby.ru