Exore LTD » Основы html » Урок 7. Таблицы
Лого SiteHere.ru

Май 14, 2020 Запись была обновлена

Время чтения: 3 мин. Прочитать позже

Урок 7. Таблицы

Урок 7. Таблицы

Здравствуй, уважаемый читатель.

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


Перед прочтением данного урока рекомендую пройти предыдущие уроки:
Урок 1. Что такое html?
Урок 2. Параграфы, заголовки
Урок 3. Списки
Урок 4. Изображения Урок 5. Ссылки. Часть 1 Урок 5. Ссылки. Часть 2 Урок 6. Атрибуты

Теория и практика

Таблицы используют как контейнеры для хранения данных. Чтобы долго не расписывать, давайте сразу перейдем к примеру:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<html>
<head>
    <title>Главная</title>
</head>
<body>
    <p>Меню</p>
    <ul>	
        <li>Главная</li>
        <li>Банан</li>
        <li>Яблоко</li>
        <li><a href="persik.html" title="Польза персика">Персик</a></li>
    </ul>
    <table border="2">
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>	
</body>
</html>

Также мы установили значения для атрибута border="2", который отвечает за толщину границы нашей таблицы. Как таблица будет выглядеть в браузере:

Таблица в Firefox

Обо всём по порядку.

  • За создание таблицы отвечает тег <table></table>.
  • За создание строки отвечает тег <tr></tr>.
  • А уже внутри идут столбцы, которые создаются тегом <td></td>. Вот внутри данного тега уже можно размещать содержимое таблицы.

В нашем первом примере у нас получилась таблицы 2х2. Я думаю если вы поняли как создаются таблицы, вы сможете создать таблицу с нужным количеством строк и столбцов. А поэтому не будем долго задерживаться и перейдем дальше.

Также существует тег, с помощью которого можно задавать название столбцов. Это тег <th></th>. Давайте посмотрим как он размещается в коде:

Заголовок столбцов таблиц

Что изменилось?

Добавилась еще одна строка, которая находится над всеми остальными. И я добавил столько же тегов <th> сколько и столбцов. Иначе если вы добавите тегов заголовка больше чем количество столбцов, тогда ваша таблица будет выглядеть примерно вот так:

Тегов заголовка больше чем столбцов

Сейчас изучим еще несколько важных и часто используемых атрибутов.

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

Сначала объединим столбцы:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<table border="2">
    <tr>
        <th>Первый столбец</th>
        <th>Второй столбец</th>
    </tr>
    <tr>
        <td COLSPAN="2">1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

Как это выгляди в браузере:

Colspan в браузере

Как видите ячейка с цифрой "2" вылезла за пределы таблицы. Это произошло из-за того что мы объединили две ячейки по горизонтали. Мы применили здесь атрибут COLSPAN="2". И в значении указали 2, то есть объединить две ячейки.

Сейчас посмотрим как объединить ячейки по вертикали:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<table border="2">
    <tr>
        <th>Первый столбец</th>
        <th>Второй столбец</th>
    </tr>
    <tr>
        <td ROWSPAN="2">1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

Как это выгляди в браузере:

Rowspan в браузере

Сейчас лишней оказалась ячейка с цифрой "4". Также все данные теги и атрибуты можно комбинировать. Например:

Как это будет выглядеть в браузере:

Комбинирование атрибутов и тегов

Также есть два атрибута, которые отвечают за отступы рамки. Это атрибуты CELLPADDING="" CELLSPACING="".

За что отвечают данные атрибуты:

  • CELLPADDING — расстояние между границей ячейки и ее содержимым.
  • CELLSPACING — расстояние между внешними границами ячеек.

Рассмотрим данные атрибуты на практике.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<table border="2" cellpadding="6">
    <tr>
        <th>Первый столбец</th>
        <th>Второй столбец</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

Как это будет выглядеть в браузере:

cellpadding в браузере

А сейчас рассмотрим как работает атрибут cellspacing.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<table border="2" cellpadding="6">
    <tr>
        <th>Первый столбец</th>
        <th>Второй столбец</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

Как это будет выглядеть в браузере:

cellspacing в браузере

А сейчас пример с двумя атрибутами вместе:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<table border="2" cellspacing="0" cellpadding="6">
    <tr>
        <th>Первый столбец</th>
        <th>Второй столбец</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

Как это будет выглядеть в браузере:

cellpadding и cellspacing в браузере-

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

Больше практикуйтесь!

Предыдущий урок
Следующий урок

Еще материалы по этой теме

Спасибо за ваше обращение!

Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)

4 комментария к записи
  • Ирина

    Почему-то, когда жму на следующий урок, направляет на предыдущий. 🙂

     
    Ответить
  • Liudmila

    таблицы получаются замечательно, но как сдвинуть цифры в право ili vlevo??

     
    Ответить
    • Юрий

      Людмила, в файле CSS нужно написать следующее (тогда для всех ячеек выравнивание будет по центру):
      td {
      text-align:center;
      }
      Или, еще можно для каждой ячейки прописывать отдельно прямо в HTML, например:
      <td style="text-align:center">3</td>

       
      Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *