07.03.2017   2120

Создаём таблицу в HTML: тег table

Как создать таблицу в HTML: тег table

Для того, чтобы осуществлять разметку на страницах web документов, применяется немало всевозможных объектов. Наиболее сложными из всех, с точки зрения новичка, являются именно таблицы. Как показывает практика, именно они, а никак не заголовки или, скажем, абзацы, доставляют тем, кто осваивает HTML, немало проблем. А используются таблицы на практике весьма часто.

Именно таблицам, как вы уже могли догадаться, будет посвящен данный уровень. Я расскажу вам о том, как создать таблицу в HTML. Мы будем идти от самых простых таблиц к более сложным. Более того, вы узнаете, как можно красиво оформить их с помощью CSS. И когда вы пройдете этот уровень, внимательно изучив каждый урок, таблицы вам перестанут казаться такой уж непосильной и сложной задачей. Итак, давайте узнаем как создать таблицу в HTML.

Добавление строк

Самая простая таблица в HTML создается с помощью трех тегов.

Тег <table>. Обозначает непосредственно саму таблицу.
Тег <tr>. Предназначен для обозначения строк таблицы. Является аббревиатурой, которая расшифровывается как "table row".
Тег <td>. Аналогично, аббревиатура, которая читается как "table data". Используется для обозначения ячейки внутри строки таблицы.

Данные три тега располагаются друг относительно друга по следующим правилам:

  • <td> – внутри тега <tr>;
  • <tr> – внутри тега <table>.

Как правило, текстовая информация, присутствующая в таблице, хранится в тегах <td>.

Создавая простую страницу в HTML, следует учитывать тот факт, что все строки должны иметь одно и тоже количество ячеек. Иными словами, количество тегов <td>, присутствующих внутри <tr>, должно быть одинаковым.

Добавление столбцов

Итак, мы разобрались, как происходит добавление строк. А теперь давайте поговорим о столбцах.

Чтобы в таблице появился столбец, необходимо в тег <tr> (строку) добавить как минимум по одному тегу <td> (ячейке).

Давайте создадим простейшую таблицу на новой страничке table.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Пример таблицы</title>
</head>
<body>
<table>
    <tr>
        <td>Верхняя левая ячейка</td><td>Верхняя правая ячейка</td>
    </tr>
    <tr>
        <td>Нижняя левая ячейка</td><td>Нижняя правая ячейка</td>
    </tr>
</table>
</body>
</html>

В браузере результат будет выглядеть так:
Пример таблицы

На этом первый урок по созданию таблиц в HTML завершён. Делайте домашку и переходите к следующему уроку.

Домашнее задание
Для просмотра домашки нужно войти на сайт.
Или получить доступ прямо сейчас:


Нажимая эту кнопку
Вы принимаете политику конфиденциальности

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

Комментарии

Чтобы написать комментарий нужно войти на сайт.
Или получить доступ прямо сейчас:


Нажимая эту кнопку
Вы принимаете политику конфиденциальности