slogin.info

ihc 468x60 1 1
< >
Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда активна5 / 5
 
Автор: Администратор
Просмотров: 2201
Создание таблиц на страницах браузера довольно не простое действие. Нужно хорошее понимание всех тегов, а их тут не один и даже не два.

Как мы знаем, что любая таблица состоит из строчек и столбцов, которые и определяют количество ячеек таблицы.

<TABLE></TABLE> - тег, который сообщает браузеры, что тут будет таблица.

<TR></TR> - тег, сообщающий, что это одна строчка. Сколько строчек должно быть в таблице столько и этих тегов в коде.

<TD></TD> - тег, сообщающий, что это одна ячейка или столбец в строке.

Для всех этих тегов есть такие атрибуты как HEIGHT и WIDTH, которые в качестве атрибутов принимают размеры, которые можно задавать разными значениями – px, % и другие.

Все это работает следующим образом, сначала создаем таблицу, в ней определяем несколько строчек, внутри каждой строчки нужное кол-во столбиков (ячеек). Если вы хотите ровную таблицу, например, 3х3, с 9 ячейками, то количество тегов <TD></TD> внутри каждой строчки <TR></TR> должно совпадать, в данном случае быть равно 3.

Для примера создадим эта таблицу, вот код:

 

<HTML>
    <HEAD>
        <TITLE> Таблицы. Пример ровной таблицы. </TITLE>
    </HEAD>
    <BODY style="width:900px; margin:0 auto;">
        <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>
    </BODY>
</HTML>

 

Пока не очень похоже на привычную таблицу, для того, чтобы она выглядела более понятно, добавим границы таблицы, для этого есть атрибут BORDER тега <TABLE>, значением которого выставляем ширину границ. CELLSPACING этого же тега, отвечает за расстояние между ячейками. Атрибут CELLPADDING за отступы внутри ячейки. Установим следующие значения этим атрибутам, чтобы таблица выглядела более привычно:

 

<HTML>
    <HEAD>
        <TITLE> Таблицы. Полезные атрибуты TABLE </TITLE>
    </HEAD>
    <BODY style="width:900px; margin:0 auto;">
        <table border="1" cellspacing="0" cellpadding="0">
            <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>
    </BODY>
</HTML>

 

Для тега TR есть полезный атрибут VALIGN, который определяет выравнивание текста по вертикали, свойства TOP(по верху), BOTTOM(по низу), MIDLE(по центру), BASELINE(по базовой линии, при этом весь текст выравнивается по одной линии). Другие атрибуты для этого тега используются очень редко.

Рассмотрим атрибуты тега TD, у него уже есть знакомый нам VALIGN. Так же есть два очень важных атрибута COLSPAN и ROWSPAN. Первый отвечает за объединение ячеек по горизонтали, а второй по вертикали. В качестве значения принимает количество объединяемых ячеек. По горизонтали отсчет идет слева на право, а по вертикали сверху вниз. Используя два этих атрибута, можно создавать таблицы любой структуры. Важно понимать, как они работают, если вы хотите объединить две ячейки в одной строке, то нужно учитывать, что тег <TD> с таким атрибутом будет за место двух тегов <TD>.

Пример правильного объединения ячеек:

 

<HTML>
    <HEAD>
        <TITLE> Таблицы. Полезные атрибуты </TITLE>
    </HEAD>
    <BODY style="width:900px; margin:0 auto;">
        <p>Правильной объединение</p>
        <table border="1">
            <tr>
                <td colspan="2">Ячейка 1:1 и 1:2</td>
                <td>Ячейка 1:3</td>
            </tr>
            <tr>
                <td>Ячейка 2:1</td>
                <td>Ячейка 2:2</td>
                <td rowspan="2">Ячейка 2:3 bи 3:3</td>
            </tr>
            <tr>
                <td>Ячейка 3:1</td>
                <td>Ячейка 3:2</td>
            </tr>
        </table>
        <p>Неправильной объединение</p>
        <table border="1">
            <tr>
                <td colspan="2">Ячейка 1:1 и 1:2</td>
                <td>Ячейка 1:2</td>
                <td>Ячейка 1:3</td>
            </tr>
            <tr>
                <td>Ячейка 2:1</td>
                <td>Ячейка 2:2</td>
                <td rowspan="2">Ячейка 2:3 bи 3:3</td>
            </tr>
            <tr>
                <td>Ячейка 3:1</td>
                <td>Ячейка 3:2</td>
                <td>Ячейка 3:3</td>
            </tr>
        </table>
    </BODY>
</HTML>

 


Тестовые задания, для использования знаний на практике

Все задания разбиты на 3 уровня, начиная с 1 уровня до 3 они усложняются. Рекомендую делать задания по порядку, так как каждое следующее проще сделать, если сделано предыдущие. Выполнение этих заданий условно-обязательно, для лучшего понимания сути работы HTML машины их необходимо делать.

Уровень первый

Перед вами текст, который вы должны перепечатать и отформатировать при помощи различных тегов его так, чтобы он выглядел аналогично.

Как он должен выглядеть:

Скачать рабочий код задания
Рабочий код задания(для проверки)

 

<HTML>
    <HEAD>
        <TITLE> Таблицы. Первый уровень сложности. </TITLE>
    </HEAD>
    <BODY>
        <table>
            <tr>
                <td>Периоды</td>
                <td>Начало (млн. лет назад)</td>
            </tr>
            <tr>
                <td>Антропоген</td>
                <td>0,7</td>
            </tr>
            <tr>
                <td>Неоген</td>
                <td>25±2</td>
            </tr><tr>
                <td>Палеоген</td>
                <td>66±3</td>
            </tr><tr>
                <td>Меловой</td>
                <td>132±5</td>
            </tr>
            <tr>
                <td>Юрский</td>
                <td>185±5</td>
            </tr>
            <tr>
                <td>Триас</td>
                <td>235±5</td>
            </tr>
            <tr>
                <td>Пермский</td>
                <td>280±10</td>
            </tr>
            <tr>
                <td>Карбон</td>
                <td>345±10</td>
            </tr>
            <tr>
                <td>Девонский</td>
                <td>400±10</td>
            </tr>
            <tr>
                <td>Силур</td>
                <td>435±10</td>
            </tr>
            <tr>
                <td>Ордовик</td>
                <td>490±10</td>
            </tr>
        </table>
    </BODY>
</HTML>

 

Уровень второй

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

Как должен выглядеть текст:

Скачать рабочий код задания
Рабочий код задания(для проверки)

 

<HTML>
    <HEAD>
        <TITLE> Таблицы. Второй уровень сложности. </TITLE>
    </HEAD>
    <BODY>
        <table  border=1 width=100%  style="text-align:center;">
            <tr>
              <th>Эоны</th>
              <th>Эры</th>
              <th>Периоды</th>
              <th>Начало (млн. лет назад)</th>
              <th>Формы жизни</th>
            </tr>
            <tr>
              <td rowspan=12>Фанерозой (750 млн. лет)</td>
              <td rowspan=3>Кайнозой (66 млн. лет)</td>
              <td>Антропоген</td>
              <td>0,7</td>
              <td  rowspan=3>Млекопитающие</td>
            </tr>
            <tr>
              <td>Неоген</td>
              <td>25±2</td>
            </tr>
            <tr>
              <td>Палеоген</td>
              <td>66±3</td>
            </tr>
            <tr>
              <td  rowspan=3>Мезозой (169 млн. лет)</td>
              <td>Меловой</td>
              <td>132±5</td>
              <td  rowspan=3>Рептилии, аммониты</td>
            </tr>
            <tr>
              <td>Юрский</td>
              <td>185±5</td>
            </tr>
            <tr>
              <td >Триас</td>
              <td>235±5</td>
            </tr>
            <tr>
              <td  rowspan=6>Палеозой (340 млн. лет)</td>
              <td>Пермский</td>
              <td>280±10</td>
              <td  rowspan=2>Земноводные</td>
            </tr>
            <tr>
              <td>Карбон</td>
              <td>345±10</td>
            </tr>
            <tr>
              <td>Девонский</td>
              <td>400±10</td>
              <td>Рыбы, кораллы</td>
            </tr>
            <tr>
              <td>Силур</td>
              <td>435±10</td>
              <td  rowspan=3>Беспозвоночные</td>
            </tr>
            <tr>
              <td>Ордовик</td>
              <td>490±10</td>
            </tr>
            <tr>
              <td>Кембрий</td>
              <td>570±20</td>
            </tr>
            <tr>
              <td  rowspan=2>Криптозой (3 млрд. лет)</td>
              <td>Протерозой (1.6 млрд. лет)</td>
              <td rowspan=2>&nbsp;</td>
              <td>2600±100</td>
              <td  rowspan=2>&nbsp;</td>
            </tr>
            <tr>
              <td>Архей (2 млрд. лет)</td>
              <td>св. 3500</td>
            </tr>
        </table>
    </BODY>
</HTML>

 

Уровень третий

Третий уровень сложности аналогичен 1 и 2 уровням сложности. Подсказка! Используйте атрибут style.

Как должен выглядеть текст:

Скачать рабочий код задания
Рабочий код задания(для проверки)

 

<HTML>
    <HEAD>
        <TITLE> Таблицы. Третий уровень сложности. </TITLE>
    </HEAD>
    <BODY>
        <table border=1 width=100% cellspacing="0" cellpadding="0" style="text-align:center; color:#FFFFFF;" bgcolor="#333333">
            <tr bgcolor="#000000" style="font-size:24px;">
              <th>Эоны</th>
              <th>Эры</th>
              <th>Периоды</th>
              <th>Начало (млн. лет назад)</th>
              <th>Формы жизни</th>
            </tr>
            <tr>
              <td rowspan=12 bgcolor="#666666">Фанерозой (750 млн. лет)</td>
              <td rowspan=3 bgcolor="#666666">Кайнозой (66 млн. лет)</td>
              <td bgcolor="#666666">Антропоген</td>
              <td bgcolor="#666666">0,7</td>
              <td rowspan=3 bgcolor="#666666">Млекопитающие</td>
            </tr>
            <tr>
              <td>Неоген</td>
              <td>25±2</td>
            </tr>
            <tr>
              <td bgcolor="#666666">Палеоген</td>
              <td bgcolor="#666666">66±3</td>
            </tr>
            <tr>
              <td  rowspan=3>Мезозой (169 млн. лет)</td>
              <td>Меловой</td>
              <td>132±5</td>
              <td  rowspan=3>Рептилии, аммониты</td>
            </tr>
            <tr>
              <td bgcolor="#666666">Юрский</td>
              <td bgcolor="#666666">185±5</td>
            </tr>
            <tr>
              <td >Триас</td>
              <td>235±5</td>
            </tr>
            <tr>
              <td rowspan=6 bgcolor="#666666">Палеозой (340 млн. лет)</td>
              <td bgcolor="#666666">Пермский</td>
              <td bgcolor="#666666">280±10</td>
              <td rowspan=2 bgcolor="#666666">Земноводные</td>
            </tr>
            <tr>
              <td>Карбон</td>
              <td>345±10</td>
            </tr>
            <tr>
              <td bgcolor="#666666">Девонский</td>
              <td bgcolor="#666666">400±10</td>
              <td>Рыбы, кораллы</td>
            </tr>
            <tr>
              <td>Силур</td>
              <td>435±10</td>
              <td  rowspan=3 bgcolor="#666666">Беспозвоночные</td>
            </tr>
            <tr>
              <td bgcolor="#666666">Ордовик</td>
              <td bgcolor="#666666">490±10</td>
            </tr>
            <tr>
              <td>Кембрий</td>
              <td>570±20</td>
            </tr>
            <tr>
              <td rowspan=2>Криптозой (3 млрд. лет)</td>
              <td >Протерозой (1.6 млрд. лет)</td>
              <td rowspan=2 bgcolor="#666666">&nbsp;</td>
              <td bgcolor="#666666">2600±100</td>
              <td rowspan=2>&nbsp;</td>
            </tr>
            <tr>
              <td bgcolor="#666666">Архей (2 млрд. лет)</td>
              <td>св. 3500</td>
            </tr>
        </table>
    </BODY>
</HTML>

 

< >

Поиск по сайту

Топ 10 активных пользователей

  • Имя пользователя Баллы
  • gawk
    44.20
  • hr@proovelab
    15.00
  • intuit89
    6.00
  • Varvarka
    4.00
  • ZOMRO
    3.20
  • Akyla58
    3.00
  • AnnaOl
    3.00
  • dimasik_3557
    3.00
  • ErcardSa
    3.00
  • Galinamuh
    3.00
 

Рекламные ссылки

IHC

Пожертвования

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

ihc 468x60 1 1

Последнее с форума

Urii-Polyakov-odnoklassniki аватар
Мы – команда разработчиков, дизайнеров и SEO-специалистов, которая любит свое дело и умеет создавать...
Перейти в тему
ZOMRO аватар
Оптимальные VDS/VPS Это сбалансированное предложение в соотношение цена-качество-количество ресурсо...
Перейти в тему
ZOMRO аватар
Скидка 50% на первый месяц Хотите получить уникальную скидку 50% на первый месяц пользования нашим ...
Перейти в тему

Последние статьи

Javascript функции

Функции - одна из основных концепций языка JavaScript. При этом есть кардинальное отличие от многих языков программирования, в JS каждая функция сама по себе является объектом, а соответственно и манипулировать с ней можно разными способами:

Ссылка на телефон

В этой статье мы рассмотрим простой и обычный способ создания ссылки на телефон.

CPA сети 30.01.2017
CPA сети

Сегодня мы подробно рассмотрим тему зарабатка на своих проектах (т.е. это не обязательно сайты) при помощи CPA сетей.