Как создать таблицы HTML
Содержание
Основные теги
<td> и </td> - начало и конец ячейки соответственно.
- border - ширина бордюра в пикселях. Если указать значение, равное 0, то границы не будет.
- widht - ширина таблицы. можно указать значение в процентах (какое место она будет занимать на странице) или в пикселях.
Параметры задаются такими переменными, как ALIGN, BGCOLOR, BORDER, BORDERCOLOR, CELLPADDING, CELLSPACING, HEIGHT, WIDTH, COLSPAN, NOWRAP, ROWSPAN, VALIGN. Их еще называют атрибутами.
Атрибуты тега table
- ALIGN - Выравнивание по правому (right) или левому (left) краю.
- BGCOLOR - цвет фона.
- BORDER - толщина бордюра в пикселях.
- BORDERCOLOR - цвет бордюра.
- CELLPADDING - расстояние между бордюром и содержимым ячейки.
- CELLSPACING - расстояние между двумя рамками таблицы (т.к. по умолчанию, таблица имеет двойную рамку, и если задать значение cellspacing=0, то рамка будет одинарная.
- HEIGHT - высота, может измеряться как в пикселях ( в этом случае единицу измерения опускаем, т.е. например, height="100", так и в % (тогда это будет выглядеть следующим образом: height="100%").
- WIDTH - ширина, так же как и высота измеряется в пикселях и в процентах.
- style="float: left; margin: 0 5px 2px 0;" - обтекание таблицы текстом слева,
- style="float: right; margin: 0 0 2px 5px;" - обтекание таблицы текстом справа.
Атрибуты тега td
- ALIGN - так же означает выравнивание содержимого ячеек.
- BGCOLOR - цвет фона ячейки,
- BORDERCOLOR - цвет рамки ячейки,
- COLSPAN - число ячеек таблицы, объединенных по горизонтали, таким образом можно задать, например, шапку таблицы. Более подробно в примерах разберем ниже.
- NOWRAP - заставляет содержимое ячейки отображаться в ней без переноса по строке.
- ROWSPAN - показывает число ячеек, объединенных по вертикали.
- VALIGN - вертикальное выравнивание содержимого. Переменные: top - по верхнему краю, middle - по середине, bottom - по нижнему краю.
Простая таблица
Код простой таблицы, состоящей из 2 столбцов и 3 строк будет иметь следующий вид:
<table border="1" width="52%"> <tr> <td>содержимое в 1 столбце и 1 строке</td> <td>содержимое во 2 столбце и 1 строке</td> </tr> <tr> <td>содержимое в 1 столбце и 2 строке</td> <td>содержимое в 2 столбце и 2 строке</td> </tr> <tr> <td>содержимое в 1 столбце и 3 строке</td> <td>содержимое в 2 столбце и 3 строке</td> </tr></table>
Внешний вид:
<table><tr> <td>Содержимое столбца 1 строки 1</td> | <td>Содержимое столбца 2 строки 1</td></tr> |
<tr> <td>Содержимое столбца 1 строки 2</td> | <td>Содержимое столбца 2 строки 2</td></tr></table> |
Сложные таблицы
Наибольшие затруднения вызывает у начинающих вебмастеров создание сложных таблиц. Для этого воспользуемся приёмами - "таблица в таблице", объединение столбцов и объединение строк.
Таблица в таблице
Для того, чтобы вложить таблицу в таблицу, нужно вставить код таблицы 2 в нужную ячейку основной таблицы. Пример:
1 ячейка | 2 ячейка |
| ||||
4 ячейка | 5 ячейка | 6 ячейка |
Скопировать код:
<table border="3"><tr><td>1 ячейка</td><td>2 ячейка</td> <td><table border="1" bgcolor="A1CCDD"><tr><td>ячейка 1 таблицы 2</td><td>ячейка 2 таблицы 2</td></tr><tr><td>ячейка 3 таблицы 2</td><td>ячейка 4 таблицы 2</td></tr></table></td></tr><tr><td>4 ячейка</td><td>5 ячейка</td><td>6 ячейка</td></tr></table>
Объединение столбцов с помощью colspan
Тег Colspan служит для объединения столбцов. Присуждаем colspan значение 2, чтобы объединить 2 ячейки в одну. Таким образом, создадим шапку таблице.
Ячейка на два столбца | |
---|---|
Ячейка 1 | Ячейка 2 |
Ячейка 3 | Ячейка 4 |
Код:
<table> <tbody> <tr> <th style="text-align: center;" colspan="2">Ячейка на два столбца</th> </tr> <tr> <td>Ячейка 1</td> <td>Ячейка 2</td> </tr> <tr> <td>Ячейка 3</td> <td>Ячейка 4</td> </tr> </tbody> </table>
Объединение строк при помощи rowspan
Объединение работает в этом случае по вертикали сливая ячейки. Задаем значение атрибуту rowspan, чтобы указать сколько ячеек необходимо слить.
Ячейка на две строки | Ячейка 1 | Ячейка 2 |
---|---|---|
Ячейка 3 | Ячейка 4 | |
Ячейка 5 | Ячейка 6 | Ячейка 7 |
Код:
<table> <tbody> <tr> <th rowspan="2">Ячейка на две строки</th> <td>Ячейка 1</td> <td>Ячейка 2</td> </tr> <tr> <td>Ячейка 3</td> <td>Ячейка 4</td> </tr> <tr> <td>Ячейка 5</td> <td>Ячейка 6</td> <td>Ячейка 7</td> </tr> </tbody> </table>
Как вставить таблицу на сайт
Для корректного отображения таблицы в сообщении на сайте, нужно добавлять теги таблицы в запись в режиме HTML (для вордпресс - это режим "Текст"). Некоторые платформы и движки некорректно отображают таблицы (такие, как например, Blogger и Ucoz). Есть секрет вставки таблицы в сложных случаях - необходимо перед вставкой сжать код в любом онлайн-компрессоре кода.
спасибо
Большое спасибо!
БОЛЬШОЕ СПАСИБО! бУДУ УЧИТЬСЯ.
Позновательно, поучительно, ОГРОМНОЕ СПАСИБО!
у Вас опечатка
Заметила, в таблице. Исправлю.
Большое спасибо!