HTML теги таблицы, теги для создания таблиц, атрибуты тега TABLE

В этой статье мы поговорим о создании таблиц в HTML. Создать таблицу в HTML можно абсолютно любую по размерам и формы: какое кочешь столбцов и строк, а также различное оформление. Они очень полезны при создании страниц сайта, когда он имеет табличную структуру.

Например твой сайт состоит из трех столбцов и двух строк. Первую строку из 3 столбцов мы можем объеденить в одну общую, где разместим название нашего сайта и логотип, во второй строке в первом столбце мы можем разместить левое меню, во втором столбце текст сайта или же текст определенной страницы, ну а в последнем столбце правое меню. Не запутался? :) Да вот простой пример: эта страница, которую ты сейчас читаешь. Она тоже сделана именно по такому принципу. Думаю, лучше перейти к практике, и на примерах наглядно увидеть, как это все реализовать.

Чтобы создать таблицу, нам сперва потребуюся теги <TABLE> и </TABLE>, для создания строк нужны теги <TR> и </TR>, которые пишутся между тегами TABLE, ну а столбы создаются тегами <TD> и </TD>, и как вы уже поняли - помещаются между тегами TR.

Давайте создадим простую таблицу, которая состоит из 3 столбцов. HTML-код таблицы:

<table>
 <tr>
  <td>Столбец 1</td>
  <td>Столбец 2</td>
  <td>Столбец 3</td>
 </tr>
</table>

На странице в браузере таблица будет выглядеть вот так:

Столбец 1

Столбец 2

Столбец 3

По умолчанию браузер выводит таблицу с рамкой. Чтобы скрыть рамку таблицы, вам понядобится атрибут тега TABLE border. Пример таблицы без рамки:

<table border="0">
 <tr>
  <td>Столбец 1</td>
  <td>Столбец 2</td>
  <td>Столбец 3</td>
 </tr>
</table>

На странице мы увидем нашу таблицу без рамки:

Столбец 1

Столбец 2

Столбец 3

Атрибут border изменяет вечиличину лишь внешней рамки нашей таблицы. Значение 0 как вы поняли делает её невидимой, а значение от 1 до 10 задает её толщину. Примедем пример таблицы с рамкой 6:

<table border="6">
 <tr>
  <td>Столбец 1</td>
  <td>Столбец 2</td>
  <td>Столбец 3</td>
 </tr>
</table>

На выходе страницы получим такую таблицу:

Столбец 1

Столбец 2

Столбец 3

При помощи атрибута bordercolor можно задать цвет нашей рамки в таблице. На HTML примере покажу таблицу с зеленой рамкой и толщиной 4:

<table border="4" bordercolor="green">
 <tr>
  <td>Столбец 1</td>
  <td>Столбец 2</td>
  <td>Столбец 3</td> 
 </tr>
</table>

Получим вот что:

Столбец 1

Столбец 2

Столбец 3

Как видите, между ячейками существует небольшое расстояние. Чтобы от него избавится, или наоборот, увеличить расстояние нам поможет атрибут таблицы cellspacing. HTML пример увеличения расстройния между ячейками в таблице:

<table border="4" cellspacing="7">
 <tr>
  <td>Столбец 1</td>
  <td>Столбец 2</td>
  <td>Столбец 3</td>
 </tr>
</table>

Наш браузер выведет такую таблицу:

Столбец 1

Столбец 2

Столбец 3

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

Столбец 1

Столбец 2

Столбец 3

Полученная таблица в браузере:

Столбец 1

Столбец 2

Столбец 3

Для объединения ячеек в таблицы, применяются атрибуты тега TD:

• colspan — объединение ячеек по горизонтали;
• rowspan — объединение ячеек по вертикали.

Довольно сложно представить, поэтому приведу простой пример HTML-код:

<table border="4" cellpadding="7">
 <tr>
  <td colspan="2">Ячейка 1</td>
  <td rowspan="2">Ячейка 2</td>
 </tr>
 <tr>
  <td>Ячейка 3</td>
  <td>Ячейка 4</td>
 </tr>
</table>

В браузере получим такую таблицу:

Ячейка 1		Ячейка 2
Ячейка 3	Ячейка 4

Чтобы рзменить размеры таблицы и ячеек, надо использовать атрибуты width (ширина) и height (высота). Значения этих атрибутов можно указывать либо в пикселях, либо в процентах. Приведу пример HTML-кода:

<table width="300" height="200">
 <tr>
  <td>Столбец 1</td>
  <td>Столбец 2</td>
  <td>Столбец 3</td>
 </tr>
</table>

В бразуере:

Ячейка 1

Ячейка 2

Ячейка 3

C ячейками попробуй сам по такому же принципу. Выравнивать ттаблицу а также текст в ячейчах можно при помощи атрибута align. Значения могут быть знакомые нам: center (по центру), left (по левому краю) и right (по правому краю). Давай выравним таблицу по правому краю:

<table align="right">
 <tr>
  <td>Столбец 1</td>
  <td>Столбец 2</td>
  <td>Столбец 3</td>
 </tr>
</table>

В бразуере:

Ячейка 1

Ячейка 2

Ячейка 3

Чтобы выранивать содержимое ячеек по вертикали, нам понадобится атрибут для ячейки valign. Приведу его значения:

• baseline — по базовой линии;
• bottom — по нижнему краю;
• middle — по середине (значение по умолчанию);
• top — по верхнему краю.

Попробуйте сделать пример HTML-кода сами, мне кажется на данном этапе урока данное задание полезно :)

Далее, рассказывая про атрибуты таблицы, можно вспомнить атрибут bgcolor. Он задает цвет фона таблицы или ячейки. Если вы хотите вставить рисунок на фон таблицы или ячейки, используйте атрибут background, в значение которого пишите путь до картинки

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

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

← Теги HTML для создания ссылок

Метатеги в HTML →

Дата публикации: 15 мая, 2012