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

Это трудно?

Построение таблиц в HTML может показаться сложным на первый взгляд, но, если вы не будете дёргаться, это окажется строго логичным — как и всё в HTML.

Пример 1:
Cell 1 Cell 2
Cell 3 Cell 4

будет выглядеть в браузере:

Cell 1 Cell 2
Cell 3 Cell 4

Какая разница между

?

Как видно из приведённого примера, это, возможно, самый сложный из примеров HTML, которые мы вам давали до сих пор. Давайте здесь остановимся и сделаем пояснения:

Для вставки таблиц используются 3 базовых тэга:

  • — начало и конец таблицы. Логично.
  •   —table row/ряд таблицы», начинает и заканчивает горизонтальный ряд ячеек. Тоже логично.

    Вот что происходит в Примере 1: таблица начинается с

    , затем идёт , указывающий на начало нового ряда. В ряду вставлены две ячейки: и . Ряд закрывается , и сразу начинается новый ряд . В новом ряду также две ячейки. Таблица закрывается

      — сокращение отtable data/табличные данные». Этот тэг начинает и заканчивает каждую ячейку ряда таблицы. Всё просто и логично.
    Cell 1 Cell 2

    .

    Чтобы было ещё понятнее: ряды это горизонтальные строки ячеек, а столбцы — вертикальные столбцы ячеек:

    Cell 1 Cell 2
    Cell 3 Cell 4

    Cell 1 и Cell 2 образуют ряд. Cell 1 и Cell 3 образуют столбец.

    В вышеприведённом примере в таблице имеются два ряда и два столбца. Но в таблице может быть неограниченное число рядов и столбцов.

    Пример 2:
    Cell 1 Cell 2 Cell 3 Cell 4
    Cell 5 Cell 6 Cell 7 Cell 8
    Cell 9 Cell 10 Cell 11 Cell 12

    будет выглядеть в браузере:

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

    Есть ещё какие-нибудь атрибуты?

    Разумеется. Например, атрибут border используется для специфицирования толщины рамки вокруг таблицы:

    Пример 3:
    Cell 1 Cell 2
    Cell 3 Cell 4

    будет выглядеть в браузере:

    Cell 1 Cell 2
    Cell 3 Cell 4

    Как и с изображениями, вы можете указывать размер таблицы в пикселах или в процентах от размера экрана:

    Пример 4:

    Cell 1

    Что можно вставлять в таблицы?

    Теоретически — всё: текст, ссылки и изображения… НО таблицы предназначаются для вывода табличных данных (т. е. данных, которые изначально представляются в виде столбцов и рядов), поэтому избегайте вставки данных в таблицы только потому, что вы хотите разместить их рядом друг с другом.

    В добрые старые времена Internet — т. е. несколько лет назад — таблицы часто использовались для распределения содержимого на странице. Однако сегодня для этого есть более крутой способ  — CSS. Но об этом позже.

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