HTML-таблица — основы построения

HTML-таблица — основы построения

Построение таблицы

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

Построение таблицы в HTML не потребует значительных усилий на изучение тегов и основных принципов.

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

Теги HTML для построения таблицы

Как и для создания любого веб-сайта, при построении таблицы необходимо использовать базовые теги, предназначенные для корректного отображения данных:

  • <thead></thead> — «голова» («шапка») или заголовки таблицы
  • <tbody></tbody> — «тело» таблицы, внутри которого размещается код и данные
  • <tfoot></tfoot> — «подвал» (нижняя строка (можно использовать, как итоговую))

Собственно, для создания самой таблицы применяют следующие теги:

  • <table></table> — непосредственно формируют таблицу
  • <th></th> — используются для определения заголовков таблицы
  • <tr></tr> — для построения рядов (строк) таблицы
  • <td></td> — для построения столбцов из ячеек таблицы
  • <caption></caption> — оформление названия таблицы (может располагаться внизу или вверху)

Рассмотрим пример построения простейшей таблицы для каталога абстрактного интернет магазина, размером 3х3:

<html>
<head>
<title>HTML-таблица</title>
</head>
//переходим к телу таблицы
<body>
//Далее непосредственно сама таблица
<table>
<caption>Таблица №1. Каталог продукции</caption>
<thead>
<tr><th>Товар</th><th>Стоимость товара (у.е.)</th><th>Возможность заказа</th></tr>
</thead>
//первый ряд
<tbody>
<tr><td>Двери</td><td>1000</td><td>Отсутствует</td></tr>
//второй ряд
<tr><td>Витраж</td><td>500</td><td>В наличии</td></tr>
//третий ряд
<tr><td>Доборы</td><td>300</td><td>Под заказ</td></tr>
</tbody>
</table>
</body>
</html>

Получаем простой, но не очень привлекательный результат:

Таблица №1. Каталог продукции
Совар Стоимость товара (у. е.) Возможность заказа
Двери 1000 Отсутствует
Витраж 500 В наличии
Доборы 300 Под заказ

При построении таблицы могут быть использованы атрибуты форматирования или оформления. Сюда относятся:

  • «width» — ширина столбцов и «height» — высота ячеек
  • «background» — заливка рисунком или «bgcolor» — заливка цветом
  • «border» — создание рамки заданной ширины
  • «align» — выравнивание таблицы и текста по горизонтали
  • «valign» — выравнивание текста по вертикали

Попробуем отредактировать таблицу с указанием заливки цветом заголовков, создания рамки и центрирования положения данных в ячейках. Для этого, указанные атрибуты добавим в тег <table> и тег <tr> с заданием необходимых параметров:

<table width="300" border="2" align="center">
<caption>Таблица №2. Каталог продукции</caption>
<thead>
<tr align="center" bgcolor="red"><th>Товар</th><th>Стоимость товара (у. е.)</th><th>Возможность заказа</th></tr>
</thead>
<tbody>
<tr align="center"><td>Двери</td><td>1000</td><td>Отсутствует</td></tr>
<tr align="center"><td>Витраж</td><td>500</td><td>В наличии</td></tr>
<tr align="center"><td>Доборы</td><td>300</td><td>Под заказ</td></tr>
</tbody>
</table>

Получаем следующий результат:

Таблица №2. Каталог продукции
Товар Стоимость товара (у. е.) Возможность заказа
Двери 1000 Отсутствует
Витраж 500 В наличии
Доборы 300 Под заказ

Дискуссия по теме