• Авторизация
Дневник LoRaLaRa Лента друзей - Дневник - Полная версия


Как создать таблицы HTML 18-09-2024 22:16 к комментариям - к полной версии - понравилось!

Это цитата сообщения БЕЛОЯР_2 Оригинальное сообщение

Как создать таблицы HTML



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


Основные теги

Итак, любая таблица начинается с тега <table> и заканчивается </table>

<tr> - начало строки;  </tr> - конец строки;
<td> и </td> - начало и конец ячейки соответственно.

Встроенные стили, которыми задают основные свойства таблицы (прописывают внутри тега table):

  • 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 ячейка
ячейка 1 таблицы 2 ячейка 2 таблицы 2
ячейка 3 таблицы 2 ячейка 4 таблицы 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>
<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>
<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>
вверх^ к полной версии понравилось! в evernote


Вы сейчас не можете прокомментировать это сообщение.

Дневник Как создать таблицы HTML | LoRaLaRa - Дневник LoRaLaRa | Лента друзей LoRaLaRa / Полная версия Добавить в друзья Страницы: раньше»