Создание простых таблиц

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

Публикация в группе: Хочу сделать сам! (PHP, MySQL, PostgreSQL, HTML, CSS, JavaScript)

Категории группы: Учимся верстать

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

Базовая структура таблицы

Выглядит она так:

<table>
    <tr>
        <td></td>
    </tr>
</table>

Разберём код

Вначале идёт тег <table> — своего рода контейнер. Внутри такого контейнера рисуется наша таблица. Потом идёт тег <tr> — контейнер табличной строки. И наконец, <td> — столбец таблицы.

Рассмотрим несколько примеров

<!DOCTYPE html>
<html lang="ru-RU">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Таблицы!</title>
    <meta name="description" content="Учимся создавать таблицы">
    <meta name="keywords" content="Таблицы">
</head>
<body>
    <table>
        <tr>
            <td>Первая строка 1</td>
            <td>Первая строка 2</td>
            <td>Первая строка 3</td>
        </tr>
        <tr>
            <td>Вторая строка 1</td>
            <td>Вторая строка 2</td>
            <td>Вторая строка 3</td>
        </tr>
        <tr>
            <td>Третья строка 1</td>
            <td>Третья строка 2</td>
            <td>Третья строка 3</td>
        </tr>
    </table>
</body>
</html>

Скриншот примера простой таблицы

Как мы видим, получилось 3 строки с 3-мя столбцами. Но мы не видим границы таблицы. Чтобы увидеть границы, нам надо написать в теге <table> атрибут “border” со значением 1. Где 1 – это любая положительная цифра, которая означает размер границ таблицы в пикселях.

<!DOCTYPE html>
<html lang="ru-RU">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Таблицы!</title>
    <meta name="description" content="Учимся создавать таблицы">
    <meta name="keywords" content="Таблицы">
</head>
<body>
    <table border="1">
        <tr>
            <td>Первая строка 1</td>
            <td>Первая строка 2</td>
            <td>Первая строка 3</td>
        </tr>
        <tr>
            <td>Вторая строка 1</td>
            <td>Вторая строка 2</td>
            <td>Вторая строка 3</td>
        </tr>
        <tr>
            <td>Третья строка 1</td>
            <td>Третья строка 2</td>
            <td>Третья строка 3</td>
        </tr>
    </table>
</body>
</html>

Скриншот примера простой таблицы

По картинке видно, что появились видимые границы. Но мы так же видим, что границы есть внешние и внутренние. За расстояние между внешними и внутренними границами отвечает атрибут в теге <table> “cellspacing”. У атрибута “cellspacing” можно ставить значение от 0 и выше. Что бы убрать расстояние мы ставим у атрибута “cellspacing” значение 0;

<!DOCTYPE html>
<html lang="ru-RU">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Таблицы!</title>
    <meta name="description" content="Учимся создавать таблицы">
    <meta name="keywords" content="Таблицы">
</head>
<body>
    <table border="1" cellspacing="0">
        <tr>
            <td>Первая строка 1</td>
            <td>Первая строка 2</td>
            <td>Первая строка 3</td>
        </tr>
        <tr>
            <td>Вторая строка 1</td>
            <td>Вторая строка 2</td>
            <td>Вторая строка 3</td>
        </tr>
        <tr>
            <td>Третья строка 1</td>
            <td>Третья строка 2</td>
            <td>Третья строка 3</td>
        </tr>
    </table>
</body>
</html>

Скриншот примера простой таблицы

Теперь наша таблица выглядит намного лучше. Но как-то границы слишком близко находятся к тексту. Что бы это исправить, нужно в теге <table> написать атрибут “cellpadding” со значением выше нуля.

<!DOCTYPE html>
<html lang="ru-RU">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Таблицы!</title>
    <meta name="description" content="Учимся создавать таблицы">
    <meta name="keywords" content="Таблицы">
</head>
<body>
    <table border="1" cellspacing="0" cellpadding="5">
        <tr>
            <td>Первая строка 1</td>
            <td>Первая строка 2</td>
            <td>Первая строка 3</td>
        </tr>
        <tr>
            <td>Вторая строка 1</td>
            <td>Вторая строка 2</td>
            <td>Вторая строка 3</td>
        </tr>
        <tr>
            <td>Третья строка 1</td>
            <td>Третья строка 2</td>
            <td>Третья строка 3</td>
        </tr>
    </table>
</body>
</html>

Скриншот примера простой таблицы

Чтобы поменять цвет границы от таблицы, нужно прописать атрибут “bordercolor” со значением любого цвета на английском языке или со значением шестнадцатеричного кода. Самый простой способ узнать шестнадцатеричный код в программе Photoshop.

Палитра в программе Photoshop

<!DOCTYPE html>
<html lang="ru-RU">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Таблицы!</title>
    <meta name="description" content="Учимся создавать таблицы">
    <meta name="keywords" content="Таблицы">
</head>
<body>
    <table border="1" cellspacing="0" cellpadding="5" bordercolor="red">
        <tr>
            <td>Первая строка 1</td>
            <td>Первая строка 2</td>
            <td>Первая строка 3</td>
        </tr>
        <tr>
            <td>Вторая строка 1</td>
            <td>Вторая строка 2</td>
            <td>Вторая строка 3</td>
        </tr>
        <tr>
            <td>Третья строка 1</td>
            <td>Третья строка 2</td>
            <td>Третья строка 3</td>
        </tr>
    </table>
</body>
</html>
<!DOCTYPE html>
<html lang="ru-RU">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Таблицы!</title>
    <meta name="description" content="Учимся создавать таблицы">
    <meta name="keywords" content="Таблицы">
</head>
<body>
    <table border="1" cellspacing="0" cellpadding="5" bordercolor="#ff0000">
        <tr>
            <td>Первая строка 1</td>
            <td>Первая строка 2</td>
            <td>Первая строка 3</td>
        </tr>
        <tr>
            <td>Вторая строка 1</td>
            <td>Вторая строка 2</td>
            <td>Вторая строка 3</td>
        </tr>
        <tr>
            <td>Третья строка 1</td>
            <td>Третья строка 2</td>
            <td>Третья строка 3</td>
        </tr>
    </table>
</body>
</html>

Скриншот примера простой таблицы

Сегодня мы рассмотрели простую структуру таблиц. А в следующем уроке мы рассмотрим сложные таблицы.

Задание!

На этом уроке будет 3 задания, которые надо выполнить для лучшего усвоение этого материала.

Выполненные задание можно присылать мне в личный кабинет (если даже Вы не состоите в группе). Задание запаковываем в zip и прикрепляем (не забываем указывать тема урока). Я посмотрю на код и напишу своё мнение. Ответ скорей всего будет только вечером (днём работаю). Просьба не обижаться, если в этот же день не отвечу.

Задание 1: написать код, который будет отображаться так же, как на картинке.

Создание простых таблиц - задание 1

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

Создание простых таблиц - задание 2

Задание 3: написать код, который будет отображаться так же, как на картинке. В этом задание используются теги, которые рассматривали в прошлом уроке.

Создание простых таблиц - задание 3

5

Автор публикации

не в сети 1 месяц

Леонид Никитин

1 610
Программист из Казахстана. Отзывчивый и целеустремлённый человек. В общении - приятная личность.
flagКазахстан. Город: Караганда
Комментарии: 64Публикации: 5Регистрация: 26-08-2019
Женский клуб Ирины Успешной
Комментарии: 17
  1. Сергей Бобков

    Здорово! Надо будет попробовать создать таблицы. Только на отдохнувшие мозги ;-)

    70
    1. Леонид Никитин (автор)

      Здравствуйте. Конечно, когда будет время и силы, тогда и попробуете :)
      У заданий нет срока.

      40
  2. Oksana

    Ой, а можно отложить выполнение заданий на выходные? А то в течении недели все дни напряжённые на работе, к вечеру голова навряд ли справиться с этим :roll:

    40
    1. Леонид Никитин (автор)

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

      40
  3. Yuliya

    Действительно, такие задания лучше выполнять в выходные, когда мозг не забит рутинными делами.

    40
    1. Леонид Никитин (автор)

      Здравствуйте, я с вами согласен :idea:

      20
  4. Olenka

    Хммм, на картинках немного страшновато оценивать код :roll: Это надо на практических действиях. И верно выше комментирующие пишут, что на свежую голову. Ждём выходных ;-)

    40
    1. Леонид Никитин (автор)

      Здравствуйте, надеюсь сложность с заданиями я не переборщил.

      10
  5. Сергей Бобков

    Не знаю как у других, а у меня ну никак не получается сесть за изучение кода. Леонид, извините пожалуйста за тишину с выполнением задания, но работы навалилось столько, что скоро во все буду баранку крутить :grin: Как спадут заказы, обязательно наверстаю упущенное.

    50
    1. Леонид Никитин (автор)

      Ничего страшного. Я всё понимаю. Время от времени, тоже бывают завалы.
      Как будет время возвращайтесь к изучению кода ;-)

      20
    2. Никита Демидов

      Так в конце года всегда так. У меня аналогичная ситуация – даже в инете некогда потусоваться :roll:

      10
  6. Oksana

    Немного не ловко за свой вопрос, но всё таки задам его. Как создаётся архив? Просто никогда ранее с этим не сталкивалась.

    20
    1. Леонид Никитин (автор)

      Здравствуйте. Выделяем папку или несколько файлов и после нажимаем правой кнопкой мыши и после выбираем “отправить” -> “Сжатая Zip-папка”.

      10
  7. Voronov

    Это уже в следующем году. Сейчас слишком напряжённый график.

    10
    1. Леонид Никитин (автор)

      Понимаю :idea:

      0
  8. Сергей Бобков

    И у вас затишье… ну это и к лучшему, ведь не было у многих свободного времени заняться изучением составления таблиц. Даже немного неловко за себя :roll:

    10
    1. Леонид Никитин (автор)

      Здравствуйте. Да, Вы правы, я давно не выкладывал новый материал. Постараюсь в ближайшем будущем вернуться. Надо только решить пару жизненно важных вопросов.

      0
Добавить комментарии
Войти с помощью: 
Создание простых таблиц
Коллекция одежды от Faberlic
Модные модели одежды с подиума Faberlic
Авторизация
*
*
Войти с помощью: 
Регистрация
*
*
*
Вы должны согласиться
Войти с помощью: 
Генерация пароля
Написать письмо

Я подтверждаю, что ознакомлен и согласен с Политикой конфиденциальности этого сайта и даю Согласие на обработку персональных данных

Задать вопрос

Я подтверждаю, что ознакомлен и согласен с Политикой конфиденциальности этого сайта и даю Согласие на обработку персональных данных

Обратный звонок
Закажите звонок (бесплатный)

Я подтверждаю, что ознакомлен и согласен с Политикой конфиденциальности этого сайта и даю Согласие на обработку персональных данных