HTML таблицы

В этой последней части учебника про HTML, вы узнаете как сделать таблицу через HTML, и вообще как работать с таблицей.

Как делать таблицы в HTML:

Для того, что бы сделать таблицу, вам нужен тег <table>, как раз в нём вы и создаёте всё таблицу.

Давайте теперь разберём этот код, сначала вы видите атрибут в border внутри тега <table>, который задаёт размер рамок для таблице, по умолчанию ноль.

Внутри же этого же тега, вы видите тег <caption>, это просто заголовок таблице, потом тег <tr>, это же уже строчка таблице, в первом таком теги, внутри хранит <th>, это заголовки для столбцов.

Во следующих тегах <tr>, уже хранятся <td>, это уже обычная ячейка, вот результат.

работа с таблицами в html

Как видите вот такая таблица у нас получилась.

Как объединять ячейки:

Одна из проблем с которой может столкнутся начинающий верстальщик, так это объединение нескольких ячеек, что бы одна, занимала несколько.

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

Вот результат программы.

html таблица объединение ячеек

Как видите многие ячейки действительно объединились.

Атрибуты таблицы HTML:

Последние что нам тут стоит рассмотреть, так это какие атрибуты имеет таблица для её настройки.

  • align — Выравнивание текста внутри ячеек;
  • background — Задаёт фоновый рисунок;
  • bgcolor — Задаёт фоновый цвет;
  • bordercolor — Цвет для рамки;
  • cellpadding — Отступ от рамки до содержимого ячейки;
  • cellspacing — Расстояние между ячейками;
  • cols — Число колонок;
  • summary -Краткое описание таблицы;

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

Вывод:

В этой части учебника про то как сделать таблицу через HTML, и как с ней работать получилась не очень большая, но это только потому что вся настройка таблицы в основном происходит через CSS.

Подписываетесь на соц-сети:

Оценка:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
(Пока оценок нет)
Загрузка...

Поделится:

Дополнительно: