Создание таблицы в html

Содержание

теги вставки строк и столбцов

Таблицы в HTML настолько функциональны, что с помощью них можно верстать целые сайты (читайте следующую статью). Сейчас мы поговорим о вставке на веб-страницу несложных HTML-таблиц, разбирая только разметку, но не касаясь оформления, потому что украшать таблицы лучше с помощью CSS-стилей.

Теги и атрибуты таблиц

Вот основные элементы, которые нужны для создания таблиц:

<table> — контейнер, внутри которого располагается таблица (такой же, как <ul> для маркированных или <ol> для нумерованных списков).
border — атрибут, определяющий толщину рамок. Вместо него лучше использовать свойство border CSS.
<caption> задаёт подпись таблицы. Контейнер можно не использовать, но если вы всё-таки решили озаглавить таблицу, то ставьте его сразу после тега <table>, вне ячеек и строк.
<tr> — парный тег, содержащий строку таблицы (ячейки, расположенные на одном уровне по горизонтали).

<th> — тег, создающий ячейку заголовка таблицы. Внешне её содержимое отличается от контента в других ячейках — обычно текст внутри <th> обозреватель выделяет жирным и размещает по центру.
<td> — контейнер, с помощью которого создаётся простая ячейка. Сколько таких тегов будет содержать строка (тег <tr>, столько ячеек в ней и будет: один тег — одна ячейка.
<colgroup> позволяет группировать столбцы, быстро и не засоряя код задавать им общие характеристики. С помощью контейнера можно отделять логические части таблицы друг от друга. Располагается после тега <caption>, если его нет, то после <table>.
<col> используется для той же цели, что и <colgroup>. <colgroup>
может содержать <col>, но не наоборот.
span — атрибут, задающий число столбцов, к которым применяются свойства контейнера <col>.
<thead>, <tbody> и <tfoot> — контейнеры, которые позволяют разделить таблицу соответственно на верхнюю (заголовки), основную (тело) и нижнюю (итоговую) части. В HTML-таблице последовательность этих тегов такая же, как последовательность контейнеров <head>, <body> и <footer> в HTML-документе.
colspan нужен для объединения ячеек в строке. Значение атрибута содержит цифру, которая и задаёт количество объединяемых ячеек.
rowspan объединяет ячейки по столбцам.

Пример создания таблицы

Создайте документ формата HTML и скопируйте в него следующий код:

<!DOCTYPE html>
<html>
   <head>
	<title>Пример таблицы</title>
   </head>
   <body>
	<table border="1">
	 <caption>Инструменты создания сайтов</caption>
	 <tr>
	  <th>Назначение</th><th colspan="2">Инструмент</th>
	 </tr>
	 <tr>
	  <td>Разметка</td><td>HTML</td><td>XHTML</td>
	 </tr>
	 <tr>
	  <td>Оформление</td><td colspan="2">CSS</td>
	 </tr>
	 <tr>
	  <td>Разработка</td><td>PHP</td><td>Python</td>
	 </tr>
	</table>
   </body>
</html>

В браузере документ будет выглядеть так:

Разберём, какие строчки кода за что отвечают.

<table border=»1″> — открыли таблицу, задав ей толщину рамок.
<caption> Инструменты создания сайтов </caption> — озаглавили её.
<tr> — открыли строку.
<th>Назначение</th> — создали ячейку с оформлением заголовка.
<th colspan=»2″>Инструмент</th> — создали вторую заголовочную ячейку в строке. Параметром colspan указали, что эта ячейка должна занимать по горизонтали две.
</tr> — закрыли строку. Аналогично создали остальные строки.
<tr> <td>Разметка</td><td>HTML</td><td>XHTML</td> </tr> — добавили вторую строку таблицы уже с обычными, а не заголовочными, ячейками. Аналогично вставили последующие строки и ячейки.
</table> — закрыли таблицу.

Полезные ссылки:

Создание таблиц html

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

Атрибуты таблицы<table></table>.
Состоит она из строки <tr></tr> и столбца <td></td>.
Пересечение строки и столбца дает ячейку,в которую и надо вписывать данные.Ячейки <td> должны находиться внутри строки <tr>.

Необходимо соблюдать принцип вложенности тегов,иначе говоря столбец
<td></td> должен находиться между тегами строки <tr> </tr> вот так
<tr>
<td></td>
</tr>
а они должны быть между тегами таблицы <table></table>. Это обязательное условие.

Составляем самую простую таблицу

<table>
<tr>
<td></td>
</tr>
</table>
Эта таблица состоит из одной строки и одной ячейки.

Выглядит она так:

Следующая таблица будет состоять из двух строк и двух столбцов,всего четыре ячейки.

Вот ее вид:

Таблица в нашем уроке состояла из трех строк,трех столбцов и записывалась она так:

</tr>
</table>

Это ее схема:

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

Что бы увидеть таблицу, надо в теге таблицы указать рамку<table border=»1″> где 1-ширина рамки в пикселях и вы можете менять это значение на ваше усмотрение.
После заполнения контентом сайта можно убрать рамки таблицы- <table border=0>

Таблицы можно окрасить цветом так:
<table bgcolor=»#цвет»> или
<tr bgcolor=»#цвет»> или
<td bgcolor=»#цвет»>

Не делайте цвет таблицы и цвет текста одинаковым иначе вы ничего не увидите

Изменение размеров строк и ячеек

Измененение по высоте строки задается значением height в теге <tr>

<tr> где «100» размер в пикселях, или в процентах «100%»,или <td>
<td.
Изменение по ширине задается значением width и также вставляется в тег
<td> (в пикселях) ,или например <td>
Следует обратить внимание на то что все браузеры должны показывать таблицы с одинаковым количеством ячеек в строке по всей таблице.Иными словами если у вас в первой строке находятся три ячейки,то и во второй и в следующих строках тоже должно быть три ячейки.Ячейки можно объединять по высоте <td rowspan=»?»> где»?» количество объединеных ячеек,а также по ширине <td colspan=»?»>

Посмотрим как будет выглядеть таблица после внесения вышеназванных атрибутов

<html>
<head><title></title>
</head>
<body>
<table border=»1″ cellpadding=»2″ cellspacing=»2″> <tbody>
<tr>
<td colspan=»2″>Объединеные ячейки</td>

<td colspan=»1″ rowspan=»2″>Объединеные ячейки</td>
</tr>
<tr>
<td>Заполнение формы</td>
<td>Заполнение формы</td>
</tr>
<tr>
<td>Заполнение формы</td>
<td>Заполнение формы</td>
<td>Заполнение формы</td>
</tr>
</tbody>
</table>
</body>
</html>

Вид этой таблицы

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

На странице можно разместить несколько таблиц.Например:

<table border=»1″ bgcolor=»#E7FEE1″>
<tr>
<td>Первая таблица,первая ячейка</td><td>Первая таблица,вторая ячейка</td>

</tr>
</table>
<table border=»1″ bgcolor=»#FEFFE0″>
<tr>
<td>Вторая таблица,первая ячейка</td><td>Вторая таблица,вторая ячейка</td>
</tr>
</table>

Можно разместить таблицу в таблице.Зеленым цветом выделена вставляемая таблица, а также вставим в ячейки числа,что бы был виден бордюр.

</table>

</td>
</tr>
</table>

Выглядит она так

Дополнительно настроить прорисовку таблицы можно с помощью параметров

FRAME и RULES тега <TABLE>.
Параметр FRAME управляет прорисовкой внешней линии таблицы и может принимать следующие значения:
BOX или BORDER — рамка рисуется со всех четырех сторон
ABOVE — только с верхней стороны
BELOW — только с нижней стороны
HSIDES — рисуется нижняя и верхняя сторона
VSIDES — рисуется левая и правая сторона
LHS — только с левой стороны
RHS — только с правой стороны
VOID — таблица без внешних рамок

Например:

Параметр RULES управляет прорисовкой внутренних линий сетки таблицы и может принимать следующие значения:
ALL — рисуются все внутренние линии
GROUPS — рисуются только линии, разделяющие группы
ROWS — рисуются линии, разделяющие строки
COLS — рисуются линии, разделяющие столбцы
NONE — внутренние линии не рисуются

Например:

Обратите внимание на то что параметры frame и rules работают только тогда когда в значении border установлена 1 и более.

Теги для создания таблиц.

Таблица —————<table></table>
Рамка таблицы—- ——<table border=?></table>
Расстояние между ячейками—<table cellspacing=?>
Ширина в пикселях——<table width=?>
Ширина в процентах——<table>
Строка таблицы ———<tr></tr>
Выравнивание ———-<tr align=left|right|center>|middle|bottom>
Ячейка таблицы ———-<td></td>.
Без перевода строки ——<td nowrap>
Объединение ячеек по ширине -<td colspan=?>
Объединение ячеек по высоте -<td rowspan=?>
Желаемая ширина ———<td width=?> (в точках)
Ширина в процентах ——<td>
Цвет ячейки ————-<td bgcolor=»#******»>
Заголовок таблицы ——-<th></th>
Выравнивание ————<th align=left|right|center|middle |bottom>
Запрет перевода строки —<th nowrap>
Растягивание по колонке -<th colspan=?>
Растягивание по строке —<th rowspan =?>
Ширина в пикселях ——-<th width=?>
Ширина в процентах ——<th>
Цвет ячейки ————-<th bgcolor=»#$$$$$$»>
Заглавие таблицы ———<caption></caption>
Выравнивание————-<caption align=top|bottom>(сверху/снизу таблицы)

HTML: Создание таблицы | Таблица внутри таблицы

Таблица — набор данных, распределенных по строкам и ячейкам. В большинстве ячеек размещаются табличные данные, остальные содержат заголовки для строк и столбцов, описывающие содержимое.

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

Создание таблицы всегда начинается со строк, которые определяются с помощью тега <tr>, каждая строка, в свою очередь, состоит из ячеек. Тег <tr> может содержать в себе только теги для создания ячеек.

В HTML существует два разных тега для создания ячеек, первым из них является <td>, он создает обычные ячейки с данными. По умолчанию, содержимое тегов <td> выравнивается по левому краю. Второй тег для создания ячеек — это тег <th>, он позволяет определять ячейки, которые содержат заголовки для столбцов или строк, содержимое таких ячеек отображается жирным текстом и выравнивается по центру. Теги <td> и <th> могут включать в себя любые HTML-элементы, которые доступны для использования в теле документа.


<table border="1">
  <tr><th>Первый заголовок</th><th>Второй заголовок</th></tr>
  <tr><td>строка 1, ячейка 1</td><td>строка 1, ячейка 2</td></tr>
  <tr><td>строка 2, ячейка 1</td><td>строка 2, ячейка 2</td></tr>
</table>

Попробовать »

Таблица внутри таблицы

В HTML есть возможность создания вложенных таблиц, то есть таких таблиц, которые расположены внутри других таблиц. Чтобы сделать вложенную таблицу надо код таблицы, которую требуется сделать вложенной, поместить внутрь любого тега <td>.

Для примера, возьмём уже созданную ранее нами таблицу и поместим этот код во вторую ячейку второй строки:


<table border="1">
  <tr><th>Первый заголовок</th><th>Второй заголовок</th></tr>
  <tr><td>строка 1, ячейка 1</td><td>строка 1, ячейка 2</td></tr>
  <tr><td>строка 2, ячейка 1</td>
    <td>строка 2, ячейка 2
	  <table border="1">
        <tr><th>Первый заголовок</th><th>Второй заголовок</th></tr>
        <tr><td>строка 1, ячейка 1</td><td>строка 1, ячейка 2</td></tr>
        <tr><td>строка 2, ячейка 1</td><td>строка 2, ячейка 2</td></tr>
      </table>
	</td>
  </tr>
</table>

Попробовать »

В итоге у нас получилась таблица внутри ячейки другой таблицы, то есть таблица внутри таблицы.

С этой темой смотрят:

Теги для создания и оформления таблицы в html

Цель урока: создание и оформление таблицы в html

Рассмотрим теги для создания таблицы:

<table>
	<tr>
		<td> содержание </td>
	</tr>
</table>

<table> <tr> <td> содержание </td> </tr> </table>

Результат:

Добавим границу для таблицы — атрибут border:

<table border="1">
	<tr>
		<td> содержание </td>
	</tr>
</table>

<table border=»1″> <tr> <td> содержание </td> </tr> </table>

Результат:

Создания таблицы начинается с тега table (от англ. «таблица»). Тег tr служит для создания строки. В строке располагаются ячейки — тег td. Завершается таблица закрывающим тегом /table

Или пример таблицы посложнее:

Атрибуты тега TABLE

`align`	`left` — таблица влево; `center` – табл. по центру; `right` — табл. вправо.
`width`	`400` `50%`
`bоrdеr`	ширина
`bordercolor`	цвета рамки
`сеllspacing`	ширина грани рамки
`cellpadding`	внутреннее расстояние до рамки
`bgсоlоr`	`Цвет` `#rrggbb`
`bасkground`	`файл` (фон таблицы)

Важно: Для ячеек-заголовка таблицы используется тег th вместо td. Браузер размещает содержимое таких ячеек по центру и делает шрифт полужирным

Атрибуты тега TR — строки

`align`	`left`, `center`, `right`	выравнивание по горизонтали
`valign`	`top`, `middle`, `bottom`, `baseline`	выравнивание по вертикали
`bgcolor`	цвет	задний фон
`bordercolor`	цвет	цвет границы

Атрибуты тега TD или TH — ячейки

`align`	`left`, `center`, `right`	выравнивание по горизонтали
`valign`	`top`, `middle`, `bottom`, `baseline`	выравнивание по вертикали
`width`	число или процент	ширина ячейки
`bgcolor`	цвет	цвет фона
`background`	файл	файл фона
`bordercolor`	цвет	цвет границы
`nowrap`		заставляет текст внутри ячейки отображаться без переносов, одной сплошной строкой

Важно:

Тег caption служит для создания заголовка таблицы
Для группировки заголовочных ячеек используется тег thead
Для группировки основного содержимого таблицы используется тег tbody
Тег tfoot определяет нижнюю часть таблицы

Тег caption заголовка таблицы может иметь атрибут, определяющий расположение заголовка — align — со следующими значениями:
top — заголовок над таблицей,
bottom — заголовок под таблицей,
left — заголовок вверху и выровнен влево,
right — заголовок вверху и выровнен вправо. К сожалению не все значения «работают» во всех браузерах.

Пример: Создать «каркас» таблицы со всеми тегами группировки

Выполнение:

<table  border="1">
<caption>таблица</caption>
<thead>
	<tr>
	<th>Заголовок 1</th><th>3аголовок 2</th>
	</tr>
</thead>
<tbody>
	<tr>
	<td>содержимое</td><td>содержимое</td>
	</tr>
</tbody>
<tfoot>
...
</tfoot>
</table>

<table border=»1″> <caption>таблица</caption> <thead> <tr> <th>Заголовок 1</th><th>3аголовок 2</th> </tr> </thead> <tbody> <tr> <td>содержимое</td><td>содержимое</td> </tr> </tbody> <tfoot> … </tfoot> </table>

Объединение ячеек в таблице

В происходит при помощи двух атрибутов тега td: COLSPAN — объединение ячеек по горизонтали, ROWSPAN — объединение ячеек по вертикали.

Синтаксис COLSPAN:
1
2
3
4
<table border="1">
<tr><td colspan="2"> </td></tr>
<tr><td> </td><td> </td></tr>
</table>
<table border=»1″> <tr><td colspan=»2″> </td></tr> <tr><td> </td><td> </td></tr> </table>

Синтаксис ROWSPAN:
1
2
3
4
<table border="1">
<tr><td rowspan="2"> </td><td> </td></tr>
<tr><td> </td></tr>
</table>
<table border=»1″> <tr><td rowspan=»2″> </td><td> </td></tr> <tr><td> </td></tr> </table>

Пример: создать таблицу по образцу на картинке. Использовать слияние ячеек

Выполнение:

<table  border="1">
<caption>таблица с объединенными ячейками </caption>
<tr>
<th rowspan="2">&nbsp;</th>
<th colspan="2">3аголовок 1</th>
</tr>
<tr><th> заголовок 1.1</th><th> заголовок 1.2</th></tr>
<tr><th> заголовок 2</th>
<td> ячейка 1</td><td> ячейка 2</td></tr>
<tr><th> заголовок 3</th>
<td> ячейка 3</td><td> ячейка 4</td></tr>
</table>

<table border=»1″> <caption>таблица с объединенными ячейками </caption> <tr> <th rowspan=»2″> </th> <th colspan=»2″>3аголовок 1</th> </tr> <tr><th> заголовок 1.1</th><th> заголовок 1.2</th></tr> <tr><th> заголовок 2</th> <td> ячейка 1</td><td> ячейка 2</td></tr> <tr><th> заголовок 3</th> <td> ячейка 3</td><td> ячейка 4</td></tr> </table>

Лабораторная работа: создайте таблицы, с расположенными в их ячейках цифрами, точно по образцу:

Группировка ячеек: COLGROUP

Элемент colgroup позволяет создавать группы колонок с одинаковыми свойствами.

Рассмотрим на примере:

Пример: Создать таблицу по образцу

Выполнение:

<TABLE border="4">
<colgroup >
	<col span="2" />
	<col />
</colgroup>
<colgroup>
	<col span=2/>
</colgroup>
<TR>
<TD> 1-1 </TD><TD> 1-2 </TD><TD> 1-3 </TD><TD> 1-4 </TD><TD> 1-5</TD>
</TR>
<TR>
<TD> 2-1 </TD><TD> 2-2 </TD><TD> 2-3 </TD><TD> 2-4 </TD><TD> 2-5 </TD>
</TR>
</table>

Атрибуты тега COLGROUP

`align`	выравнивание содержимого столбца `left` — по левому краю (по умолчанию) `center` — по центру `right` — по правому краю не работает в Firefox
`dir`	определяет направление символов: `ltr` — слева направо `rtl` — справа налево не работает в Firefox
`span`	количество столбцов, к которым будет применяться оформление (по умолчанию 1)
`style`	задает встроенную таблицу стилей
`valign`	вертикальное выравнивание в ячейке таблицы `bottom` — по нижнему краю ячейки `middle` — по центру ячейки (по умолчанию) `top` — по верхнему краю ячейки не работает в Firefox
`width`	ширина столбца

HTML вложенные таблицы

Таблицы со сложной структурой проще заменять на вложенные таблицы.

Пример: создайте вложенные таблицы по образцу:

Выполнение:

<TABLE border="4">
<tr><td bgcolor="yellow">Таблица 1</td>
<td bgcolor="yellow">
<TABLE border=2 bgcolor="#FFFFFF">
<tr><td>Таблица 2</td> <td>Ячейка 2-2</td></tr>
<tr><td>Ячейка 3-2</td> <td>Ячейка 4-2</td></tr>
</TABLE>
</td>
<tr><td bgcolor="yellow">Ячейка 3-1</td>
<td bgcolor="yellow">Ячeйкa 4-1</td></tr>
</TABLE>

<TABLE border=»4″> <tr><td bgcolor=»yellow»>Таблица 1</td> <td bgcolor=»yellow»> <TABLE border=2 bgcolor=»#FFFFFF»> <tr><td>Таблица 2</td> <td>Ячейка 2-2</td></tr> <tr><td>Ячейка 3-2</td> <td>Ячейка 4-2</td></tr> </TABLE> </td> <tr><td bgcolor=»yellow»>Ячейка 3-1</td> <td bgcolor=»yellow»>Ячeйкa 4-1</td></tr> </TABLE>

Лабораторная работа:

Создайте таблицу с фиксированными размерами, содержащую ячейки указанной на рисунке ширины
Вставьте в левую нижнюю ячейку вложенную таблицу
Фон ячеек вложенной таблицы сделайте серым

Лабораторная работа:

Откройте задание, выполненное на прошлой лабораторной работе
Добавьте в верхнюю ячейку еще одну вложенную таблицу
Фон ячеек вложенной таблицы сделайте белым

Как создать таблицу в HTML: тег table

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

Именно таблицам, как вы уже могли догадаться, будет посвящен данный уровень. Я расскажу вам о том, как создать таблицу в HTML. Мы будем идти от самых простых таблиц к более сложным. Более того, вы узнаете, как можно красиво оформить их с помощью CSS. И когда вы пройдете этот уровень, внимательно изучив каждый урок, таблицы вам перестанут казаться такой уж непосильной и сложной задачей. Итак, давайте узнаем как создать таблицу в HTML.

Добавление строк

Самая простая таблица в HTML создается с помощью трех тегов.

Тег <table>. Обозначает непосредственно саму таблицу.
Тег <tr>. Предназначен для обозначения строк таблицы. Является аббревиатурой, которая расшифровывается как «table row».
Тег <td>. Аналогично, аббревиатура, которая читается как «table data». Используется для обозначения ячейки внутри строки таблицы.

Данные три тега располагаются друг относительно друга по следующим правилам:

<td> – внутри тега <tr>;
<tr> – внутри тега <table>.

Как правило, текстовая информация, присутствующая в таблице, хранится в тегах <td>.

Создавая простую страницу в HTML, следует учитывать тот факт, что все строки должны иметь одно и тоже количество ячеек. Иными словами, количество тегов <td>, присутствующих внутри <tr>, должно быть одинаковым.

Добавление столбцов

Итак, мы разобрались, как происходит добавление строк. А теперь давайте поговорим о столбцах.

Чтобы в таблице появился столбец, необходимо в тег <tr> (строку) добавить как минимум по одному тегу <td> (ячейке).

Давайте создадим простейшую таблицу на новой страничке table.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Пример таблицы</title>
</head>
<body>
<table>
    <tr>
        <td>Верхняя левая ячейка</td><td>Верхняя правая ячейка</td>
    </tr>
    <tr>
        <td>Нижняя левая ячейка</td><td>Нижняя правая ячейка</td>
    </tr>
</table>
</body>
</html>

В браузере результат будет выглядеть так:

На этом первый урок по созданию таблиц в HTML завершён. Делайте домашку и переходите к следующему уроку.

Как создать таблицу в html

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

Чтоб создать таблицу, в первую очередь вы должны знать и понимать такие понятия как столбцы и строки. Для общего восприятия откройте Microsoft Office Excel и посмотрите. Кстати, если вы хотите увидеть сколько по количеству столбцов и строк содержит один документ Excel, нажмите Ctrl+стрелочка вниз и Ctrl+стрелочка направо.

к оглавлению ^

Создание таблицы

Как делается таблица, ее базовая структура. Обо всем по порядку. Для создания таблицы в самом начале используют элемент table. Дальнейшее ее содержимое описывается по строкам. Далее открывается тег <tr>, который обозначает начало новой строки в таблице. В середине тега <tr> помещаются элементы <td>. Элемент <td> соответствует отдельной ячейкой в данной строке.

Когда строчка заканчивается, закрывается тег </tr>. Еще раз… в начале указали <table>, потом открыли <tr>, в нем используете <td>, закрываете </tr> и закрываете </table>. Каждая из ячеек обязательно должна быть представлена элементов <td> и так же его закрытием </td>. Прочитайте статью до конца, с каждым новым тегом или атрибутом я навожу пример кода и конечного результата.

А в конце статьи я покажу пример почти всего, чего можно добавить в таблицу. Получилась такая небольшая каша, для примера я думаю сойдет. Основные теги для создания таблицы в html в блокноте:

к оглавлению ^

Написание кода в блокноте

Создаем и открываем обычный блокнот, в него копируем уже готовый код. После всех действий, вам нужно будет переименовать расширение txt блокнота на html. Каждая таблица начинается и должна быть закрыта тегом table. Каждая строка в таблице начинается и заканчивается тегом tr. В каждой строке существуют свои столбцы, которые должны быть заключены в тег td. Все из перечисленных тегов должны быть открыты и закрыты.

Если вспомнить основы html, к главному тегу таблицы table так же могут быть добавлены теги border, CELLspacing, CELLpadding, Width и Align. Про некоторые из них речь будет идти в этой статье. Каждый из них отвечает за свое свойство и тем самым добавляет дополнительные возможности вашей таблице. При желании, не обязательно использовать их в каждой таблице.

Скачай бесплатно пять техник верстки.

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

<table> <tr> <td>Иванов</td> <td>Петров</td> <td>Сидоров</td> <td>Лукашин</td> <td>Михайлов</td> <td>Березин</td> <td>Комаров</td> </tr> <tr> <td>3</td> <td>4</td> <td>8</td> <td>12</td> <td>1</td> <td>17</td> <td>18</td> </tr> <tr> <td>13</td> <td>14</td> <td>18</td> <td>24</td> <td>11</td> <td>27</td> <td>31</td> </tr> <tr> <td>113</td> <td>114</td> <td>118</td> <td>124</td> <td>111</td> <td>127</td> <td>131</td> </tr> </table>

<table>

<tr>

<td>Иванов</td>

<td>Петров</td>

<td>Сидоров</td>

<td>Лукашин</td>

<td>Михайлов</td>

<td>Березин</td>

<td>Комаров</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

к оглавлению ^

Готовый пример

В первую очередь нужно разобраться с заголовками. Для этого используется элемент <th>, данный элемент применяется так же как и элемент <td>, с помощью которого вы создаете ячейки. Но его предназначение создание конкретно заголовков в таблицах. Таким образом, все названия столбцов, которые были заключены в данные тег, выделяются жирным.

Не стоит забывать, если у вас должна быть одна или несколько ячеек пустыми, вы так же должны указать все элементы <td> или <th>, иначе вся таблица может сбиться. Посмотрим на пример, обратите внимание, заголовки выделяются жирным шрифтом.

<table> <tr> <th>Иванов</th> <th>Петров</th> <th>Сидоров</th> <th>Лукашин</th> <th>Михайлов</th> <th>Березин</th> <th>Комаров</th> </tr> <tr> <td>3</td> <td>4</td> <td>8</td> <td>12</td> <td>1</td> <td>17</td> <td>18</td> </tr> <tr> <td>13</td> <td>14</td> <td>18</td> <td>24</td> <td>11</td> <td>27</td> <td>31</td> </tr> <tr> <td>113</td> <td>114</td> <td>118</td> <td>124</td> <td>111</td> <td>127</td> <td>131</td> </tr> </table>

<table>

<tr>

<th>Иванов</th>

<th>Петров</th>

<th>Сидоров</th>

<th>Лукашин</th>

<th>Михайлов</th>

<th>Березин</th>

<th>Комаров</th>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

Бывает такое, что нужно несколько ячеек обьединить в одну, для этого используется атрибут colspan. Его так же можно использовать с элементами <th> и <td>. Вы добавляете в элемент <td colspan=”3”>, тем самым говорите браузеру, что хотите обьединить три ячейки в одну. Всегда обращайте внимание и будьте внимательные, когда нужно открыть и закрыть объединение, чтоб в дальнейшем не запутаться и не искать часами ошибку.

<table> <tr> <th>Иванов</th> <th>Петров</th> <th>Сидоров</th> <th>Лукашин</th> <th>Михайлов</th> <th>Березин</th> <th>Комаров</th> </tr> <tr> <td>3</td> <td colspan=»3″>4</td> <td>8</td> <td>12</td> <td>1</td> </tr> <tr> <td>13</td> <td>14</td> <td>18</td> <td>24</td> <td>11</td> <td>27</td> <td>31</td> </tr> <tr> <td>113</td> <td>114</td> <td>118</td> <td>124</td> <td>111</td> <td>127</td> <td>131</td> </tr> </table>

<table>

<tr>

<th>Иванов</th>

<th>Петров</th>

<th>Сидоров</th>

<th>Лукашин</th>

<th>Михайлов</th>

<th>Березин</th>

<th>Комаров</th>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

к оглавлению ^

Как объединить ячейки

В процессе создания таблицы в html, можно соединить строки в таблице. Действия практически те же самые, как с вариантом со столбцами, только в этом случае используется атрибут rowspan. Так же само указывается количество строк, которые нужно обьединить в одну.

<table> <tr> <th>Иванов</th> <th>Петров</th> <th>Сидоров</th> <th>Лукашин</th> <th>Михайлов</th> <th>Березин</th> <th>Комаров</th> </tr> <tr> <td>3</td> <td rowspan=»3″>4</td> <td>8</td> <td>12</td> <td>1</td> <td>13</td> <td>14</td> </tr> <tr> <td>13</td> <td>14</td> <td>18</td> <td>24</td> <td>11</td> <td>27</td> </tr> <tr> <td>113</td> <td>114</td> <td>118</td> <td>124</td> <td>111</td> <td>127</td> </tr> </table>

<table>

<tr>

<th>Иванов</th>

<th>Петров</th>

<th>Сидоров</th>

<th>Лукашин</th>

<th>Михайлов</th>

<th>Березин</th>

<th>Комаров</th>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

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

Атрибут width вам уже знаком из прошлых уроков, где было описано как работать с изображением в html. Чтобы задать промежуток между границами ячеек и ее промежутками, указывают элемент cellpading. Чтобы указать величину промежутка между ячейками, указывается атрибут cellspacing.

<table cellpadding=»25″ cellspacing=»15″> <tr> <th>Иванов</th> <th>Петров</th> <th>Сидоров</th> <th>Лукашин</th> <th>Михайлов</th> <th>Березин</th> <th>Комаров</th> </tr> <tr> <td>3</td> <td rowspan=»3″>4</td> <td>8</td> <td>12</td> <td>1</td> <td>13</td> <td>14</td> </tr> <tr> <td>13</td> <td>14</td> <td>18</td> <td>24</td> <td>11</td> <td>27</td> </tr> <tr> <td>113</td> <td>114</td> <td>118</td> <td>124</td> <td>111</td> <td>127</td> </tr> </table>

<tr>

<th>Иванов</th>

<th>Петров</th>

<th>Сидоров</th>

<th>Лукашин</th>

<th>Михайлов</th>

<th>Березин</th>

<th>Комаров</th>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

к оглавлению ^

Как сделать границы

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

Параметр Border.
Параметр CELLSPACING.
CELLPADDING.

Параметр BORDER выступает за рамку вокруг вашей таблицы или каждой ячейки. По умолчанию никакие рамки не рисуются, все необходимо задавать самому изначально при каждом написании новой таблички. Задается ширина рамки в пикселях целым числом, как это показано на примере. Как показывает практика, большие границы никто не практикует, большинство пользователей устанавливают значение не больше 1-2.

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

Параметр CELLSPACING, задается так же в цифрах. В качестве числа выступает параметр в пикселях, который отвечает за расстояние между рамками ячеек, как по горизонтали так и по вертикали. По умолчанию уже стоит значение 2, но всегда можно сделать его больше или меньше.

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

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

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

<table border=»5″ CELLSPACING=»2″ > <tr> <th>Иванов</th> <th>Петров</th> <th>Сидоров</th> <th>Лукашин</th> <th>Михайлов</th> <th>Березин</th> <th>Комаров</th> </tr> <tr> <td>3</td> <td rowspan=»3″>4</td> <td>8</td> <td>12</td> <td>1</td> <td>13</td> <td>14</td> </tr> <tr> <td>13</td> <td>14</td> <td>18</td> <td>24</td> <td>11</td> <td>27</td> </tr> <tr> <td>113</td> <td>114</td> <td>118</td> <td>124</td> <td>111</td> <td>127</td> </tr> </table>

<tr>

<th>Иванов</th>

<th>Петров</th>

<th>Сидоров</th>

<th>Лукашин</th>

<th>Михайлов</th>

<th>Березин</th>

<th>Комаров</th>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

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

к оглавлению ^

Пример готовой таблицы

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

Границы и выравнивание.
Открытие и закрытие тегов tr и th.
Объединение строк.
Объединение столбцов.

<table border=»10″ align=»center» cellpadding=»1″ cellspacing=»9″> <tr> <th>Иванов</th> <th>Петров</th> <th>Сидоров</th> <th>Лукашин</th> <th>Михайлов</th> <th>Березин</th> <th>Комаров</th> </tr> <tr> <td>3</td> <td>4</td> <td align=»center»><font size=»5″ color=»red»>8</font></td> <td>12</td> <td align=»center»>1</td> <td><font size=»7″ color=»red»>17</font></td> <td>18</td> </tr> <tr> <td>13</td> <td>14</td> <td align=»center»>18</td> <td>24</td> <td>11</td> <td align=»center»>27</td> <td>31</td> </tr> <tr> <td align=»center»>113</td> <td>114</td> <td>118</td> <td>124</td> <td>111</td> <th align=»center»>127</th> <td align=»center»>131</td> </tr> <tr> <td>3</td> <td align=»center»>4</td> <td align=»center»>8</td> <td>12</td> <td>1</td> <td>17</td> <td>18</td> </tr> <tr> <td>3</td> <td align=»center»>4</td> <td>8</td> <td align=»center»>12</td> <td>1</td> <td>17</td> <td>18</td> </tr> <tr> <td>3</td> <th align=»center»>4</th> <td>8</td> <td>12</td> <td>1</td> <td align=»center»>17</td> <td>18</td> </tr> <tr> <td>3</td> <td>4</td> <td align=»center»>8</td> <td>12</td> <td>1</td> <td align=»center»>17</td> <td>18</td> </tr> <tr> <td>3</td> <td align=»center»>4</td> <td>8</td> <td>12</td> <td align=»center»>1</td> <td>17</td> <th>18</th> </tr> <tr> <td>3</td> <th>4</th> <th>8</th> <td align=»center»>12</td> <td align=»center»>1</td> <td>17</td> <td>18</td> </tr> <tr> <td>3</td> <td>4</td> <td align=»center»>8</td> <td>12</td> <td>1</td> <td align=»center»>17</td> <td>18</td> </tr> <tr> <td align=»center»>3</td> <td>4</td> <td>8</td> <td>12</td> <td>1</td> <td>17</td> <td align=»center»>18</td> </tr> <tr> <td>3</td> <td align=»center»>4</td> <td align=»center»>8</td> <td>12</td> <td align=»center»>1</td> <td>17</td> <td>18</td> </tr> <tr> <td align=»center»>3</td> <td>4</td> <td>8</td> <td>12</td> <td align=»center»>1</td> <td>17</td> <td>18</td> </tr> <tr> <td>3</td> <td>4</td> <td>8</td> <td>12</td> <td>1</td> <td>17</td> <td align=»center»>18</td> </tr> <tr> <td>3</td> <td>4</td> <td>8</td> <td>12</td> <td align=»center»>1</td> <td>17</td> <td>18</td> </tr> <tr> <td align=»center»>3</td> <td>4</td> <td>8</td> <td bgcolor=»#ffffff»>12</td> <td>1</td> <td>17</td> <td align=»center»>18</td> </tr> <tr> <td align=»center»>3</td> <td bgcolor=»#000000″>4</td> <td>8</td> <td>12</td> <td>1</td> <td align=»center»>17</td> <td>18</td> </tr> </table>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

<tr>

<th>Иванов</th>

<th>Петров</th>

<th>Сидоров</th>

<th>Лукашин</th>

<th>Михайлов</th>

<th>Березин</th>

<th>Комаров</th>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

Кроме перечисленных параметров BORDER, CELLPADDING и CELLSPACING, существует еще несколько, которые так же пользуются популярностью и часть применяются на практике. Управление шириной и высотой таблицы (WIDTH и HEIGHT) и выравнивание по центру или по краям (ALIGN).

к оглавлению ^

Высота и ширина

При создании новой таблице в блокноте, ширина и высота каждой из них вычисляется автоматически браузером. При заполнении ячеек таблицы текстом, ваш браузер будет сам автоматически показывать ширину и высоту таблички, в зависимости от величины помещенного внутрь контента. Похожий пример можно посмотреть, если вы создадите и заполните табличку в текстовом редакторе Microsoft Word.

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

к оглавлению ^

Выравнивание

Точно так же, как с примером по границам и отступам, всей таблице можно задать выравнивание по одной из сторон или по центру. К главному тегу таблицы table добавляется параметр ALIGN, который отвечает за выравнивание по сторонам. Допустимое значение LEFT (выравнивание по левой стороне), RIGHT (выравнивание по правой стороне). Попробуйте установить CENTER, получить у вас выровнять таблицу по центру или нет?

Если дело касается цвета таблицы или конкретных ячеек, вы так же можете использовать атрибут bgcolor, чтобы задать цвет шапке вашей таблицы или нужным вам ячейкам. Выравнивайте таблицу по центру или по правому краю. Используйте в таблицах тег font для изменения шрифта ваших данных. Так же можно задать в таблице цвет текста, его размер… что угодно.

Евгений Несмелов

Создание таблиц в HTML

В этой статье Вы познакомитесь с важнейшим моментом при создании своего сайта — таблицами!

Я думаю, что Вы обратили внимание на то, что в предыдущих статьях мы не занимались выравниванием, если, конечно, не считать выравнивание по левому краю, по центру и по правому краю браузера. Собственно, этого крайне недостаточно для красивого оформления страницы. Яркий тому пример — наша форма, которую мы создали в предыдущей статье. Как можно видеть, форма ОЧЕНЬ НЕРОВНАЯ. Вот, как раз для того, чтобы выравнивать элементы страницы более точно, чем просто по краям браузера, и были придуманы html таблицы.

Давайте для начала создадим простую html таблицу.

Но прежде, чем это делать, давайте восстановим код, который у нас остался после создания формы, то есть вот этот: Создание форм в HTML

Принцип создания таблиц в html таков: создаётся таблица, потом создаётся строка, потом все столбцы данной строки, потом очередная строка, снова все очередные столбцы данной строки и так далее.

Таблица создаётся с помощью тега <table>, а заканчивается тегом </table>. Это, думаю, понятно. У таблицы есть строки и столбцы, поэтому их необходимо создать. Теперь согласно принципу создания таблиц, необходимо создать строку. Строка создаётся с помощью тега <tr>. Соответственно, сигналом к окончанию строки является закрывающий тег </tr>. Внутри тега <tr> необходимо создавать столбцы, которые создаются с помощью тега <td>. И уже внутри этого тега находятся те элементы, которые должны быть расположены внутри данной ячейки. После того, как все элементы уложили, то можно закрывать столбец с помощью тега </td>. Дальше открывается новый тег <td>. В него снова помещаются элементы, после этого закрывается </td>. Это сигнал к концу второго столбца. И так далее, столько столбцов, сколько Вам нужно. В конце закрывается строка тегом </tr>. Затем следующая строка и так далее. А заканчивается всё закрывающим тегом </table>.

Чтобы стало понятнее, давайте сразу после формы напишем следующие строки:

<table>
  <tr>
    <td>(1, 1)</td>
    <td>(1, 2)</td>
  </tr>
  <tr>
    <td>(2, 1)</td>
    <td>(2, 2)</td>
  </tr>
</table>

Здесь мы создали таблицу, состоящую из двух строк (два тега <tr>) и двух столбцов (по два тега <td> в каждом теге <tr>). В качестве элемента я решил взять обычный текст, в виде координат ячейки. Соответственно, первая цифра означает номер строки, а вторая — номер столбца. Это был яркий пример таблицы.

Теперь поговорим об атрибутах. Сначала атрибуты тега <table>.

1) Атрибут «border«, значение которого задаёт толщину рамки таблицы в пикселях. По умолчанию, рамки вообще нет. Давайте поставим значение этого атрибута в «2«.

2) Атрибуты «width» и «height» задают ширину и высоту таблицы соответственно. Размер может быть указан, как в абсолютных единицах (пиксели, px), так и в относительных (проценты, %). Относительный размер, чем хорош, так это тем, что он всегда подстроится под любое разрешение монитора пользователя и любой браузер. А абсолютные тем хороши, что при любых браузерах и любых разрешениях монитора не будет сюрпризов с дизайном, связанные, например, с растягиванием элементов (если монитор широкоэкранный, к примеру). Какой выбрать: решать Вам, но я, лично, предпочитаю, в основном, относительные размеры, изредка разбавляя абсолютными, в зависимости от ситуации. Давайте поставим значение атрибутов «width» и «height» по «30%«.

Думаю, что атрибутов Вам дал достаточно. Таким образом, тег <table> выглядит так:

<table border = "2" width = "30%" height = "30%">

Посмотрите в браузере, как выглядит теперь наша таблица.

Теперь поговорим об атрибутах тега <tr>:

1) Атрибут «height«. Заметьте, что у тега <tr> нет атрибута «width«, впрочем, это логично, ведь тег <tr> отвечает за строку, а, следовательно, за высоту. А за ширину отвечают столбцы.

Собственно, даже атрибут «height» не особо-то и используется, поэтому можно сказать, что атрибутов у тега <tr> и вовсе нету.

Наиболее богатым по количеству атрибутов является тег <td>, отвечающий за ячейку таблицы:

1) Атрибут «width«. Объяснение то же, что и для атрибута тега <tr>. Соответственно, атрибута «height» нет.

2) Атрибут «colspan«. Значение этого атрибута означает количество столбцов, которое занимает данная ячейка. Поставьте этот атрибут в значение «2«, где у нас координаты «(1, 1)«. Сразу посмотрите на результат.

3) Атрибут «rowspan«. Значение этого атрибута означает количество строк, которое занимает данная ячейка. Поставьте этот атрибут в значение «2«, где координаты «(1, 2)«. Сразу посмотрите на результат.

4) Атрибут «align«. Значение этого атрибута означает выравнивание элемента внутри ячейки по горизонтали. Бывают три значения: «left» (по левому краю), «center» (по центру), «right» (по правому краю). По умолчанию стоит выравнивание по левому краю. Давайте выравняем координаты «(1, 1)» по центру, а координаты «(2, 1)» по правому краю. Посмотрите результат.

5) Атрибут «valign«. Значение этого атрибута означает выравнивание элемента внутри ячейки по вертикали. Снова имеются только три значения: «top» (по верху), «middle» (по середине), «bottom» (по низу). По умолчанию стоит значение «middle«. Давайте поменяем значение этого атрибута у элемента «(2, 1)» на «top«. А также у элемента «(2, 2)» поставим значение «bottom«. Сразу посмотрите на результат.

Таким образом, Ваша таблица имеет такой HTML-код:

<table border = "2" width = "30%" height = "30%">
  <tr>
    <td colspan = "2" align = "center">(1, 1)</td>
    <td rowspan = "2">(1, 2)</td>
  </tr>
  <tr>
    <td align = "right" valign = "top" >(2, 1)</td>
    <td valign = "bottom">(2, 2)</td>
  </tr>
</table>

В принципе, с теорией всё. А вот на практике необходимо научиться применять эти знания. И в качестве практики, мы сейчас выравняем нашу форму. Для начала сотрите все теги <br>, так как теперь на новую строку у нас будет переходить тег <tr>.

Теперь помещаем всё содержимое формы в таблицу, то есть сразу после тега <form> пишем тег <table>, а сразу перед тегом </form> закрываем таблицу с помощью тега </table> (не забываем про принцип вложенности!). Рекомендую поставить временно рамку у таблицы, чтобы видеть, как всё выравнивается, и как делится общее пространство между элементами таблицы.

Теперь каждую строку формы помещаем в отдельный тег <tr>. И делаем два столбца: первый для описания элемента, а второй для самого элемента формы. И так делаем вплоть до <textarea>.

С текстовой областью поступаем так: во-первых, пояснение (далее буду называть меткой) запихиваем в одну строку, причём ширину делаем в два столбца. Текстовую область на следующей строке таблицы, и также шириной в два столбца. Более того, выравниваем и метку, и текстовую область по центру.

Далее всё помещаем в одну строку и одну ячейку, но шириной эта ячейка будет в два столбца.

Вот и всё, что необходимо знать для успешного использования таблиц, а дальше лишь надо набивать руку. Я Вам скажу так: таблица наиболее часто используемая возможность при создании HTML-страницы, и без них не обходится почти ни один сайт. Правда, таблицы и наиболее сложная тема в основных знаниях по HTML, для усвоения которой необходимо потренироваться, а также избавиться от стереотипа о том, что элементом таблицы может быть только текст (уж, так нас научили в школе, учебниках и вообще в жизни). И когда Вы избавитесь от этого стереотипа и поймёте, что под элементом может подразумеваться не только текст, но и картинки, ссылки, формы, элементы формы, и даже целые таблицы, тогда можно считать, что дело сделано.

С уважением, Михаил Русаков.

P.S. Если Вы хотите узнать больше по HTML, то посмотрите мой бесплатный курс с примером создания сайта на HTML: http://srs.myrusakov.ru/html

Создано 30.04.2010 10:47:05
Михаил Русаков

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Создание таблицы в html – Онлайн генерация HTML таблицы с возможностью объединения ячеек

теги вставки строк и столбцов

Теги и атрибуты таблиц

Пример создания таблицы

Создание таблиц html

Изменение размеров строк и ячеек

Теги для создания таблиц.

HTML: Создание таблицы | Таблица внутри таблицы

Таблица внутри таблицы

Теги для создания и оформления таблицы в html

Создание таблицы в HTML

Атрибуты тега TABLE

Атрибуты тега TR — строки

Атрибуты тега TD или TH — ячейки

Объединение ячеек в таблице

Группировка ячеек: COLGROUP

Атрибуты тега COLGROUP

HTML вложенные таблицы

Как создать таблицу в HTML: тег table

Добавление строк

Добавление столбцов

Как создать таблицу в html

Создание таблицы

Написание кода в блокноте

Готовый пример

Как объединить ячейки

Как сделать границы

Пример готовой таблицы

Высота и ширина

Выравнивание

Создание таблиц в HTML

Добавить комментарий Отменить ответ

Рубрики