Здравствуйте, уважаемые читатели!
Построение таблицы в 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>
Получаем простой, но не очень привлекательный результат:
| Совар | Стоимость товара (у. е.) | Возможность заказа |
|---|---|---|
| Двери | 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>
Получаем следующий результат:
| Товар | Стоимость товара (у. е.) | Возможность заказа |
|---|---|---|
| Двери | 1000 | Отсутствует |
| Витраж | 500 | В наличии |
| Доборы | 300 | Под заказ |