Это цитата сообщения Оригинальное сообщение

Как сделать таблицу в HTML

Создадим простейшую таблицу, содержащую три ячейки одной строки с помощью приведенного ниже кода:

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

В окне браузера только что созданная таблица выглядит следующим образом:

Столбец 1

Столбец 2

Столбец 3

Таблица начинается с тега <table> и заканчивается парным ему </table>. Всё содержимое таблицы описывается сверху вниз по строкам, каждая из которых начинается с тега <tr> и заканчивается </tr>.

Ячейки строки описываются слева направо с помощью тегов <td> и </td>. В ячейку вы можете поместить как текст, так и графические файлы и даже другие таблицы.

Границы и рамки

По умолчанию в таблице нет границы. Добавить её можно с помощью атрибута border тега <table>. Однако, иногда браузеры такую границу отображают по-разному, поэтому лучше данный процесс возложить на работу со стилями:

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

Столбец 1

Столбец 2

Столбец 3

Цвет фона и текста

Для того чтобы указать фон ячейки таблицы HTML, строки или отдельной ячейки, к тегам <table>, <td> и <tr> можно применить следующие параметры:

• background — в качестве фона используется изображение. Указать можно либо имя файла, либо путь к нему;
• bgcolor — фоном является определённый цвет. Указать можно как название интересующего оттенка, так и шестнадцатеричный код.

Для того чтобы изменить цвет текста в таблице HTML, необходимо использовать тег <font>.

<table border="1" bgcolor="green"><tr height="40" bgcolor="blue:<td<fontcolor=">Ячейка 1<td bgcolor="red"></td></tr><tr><td background="http://powdertoy.co.uk/Avatars/48446_40.png">Ячейка 3</td><td>Ячейка 4</td></tr></table>

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

Отступы таблицы в HTML

В HTML отступы в таблице задаются с помощью тега <table>:

• cellspacing — расстояние между границами соседних ячеек;
• cellpading — расстояние между содержимым и границей ячейки.

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

Выравнивание таблицы в HTML

Вы можете для каждой отдельной ячейки или строки задать два параметра, которые выполняют горизонтальное (align) и вертикальное (valign) выравнивание текста в таблице HTML.

Параметр align может иметь следующие значения:

• left — выравнивание по левой границе;
• right — выравнивание по правой границе;
• center — выравнивание по центру.

Параметр valign может иметь такие значения:

• bottom — выравнивание по нижней границе;
• top — выравнивание по верхней границы;
• middle — выравнивание посередине.

Текст 1

Текст 2

Как сделать таблицу по центру в HTML? С помощью упомянутого значения center.

<table cellpadding="0" cellspacing="0" width="100%" height="100%"><tr><td align="center"><table cellpadding="60" cellspacing="4" border="1"><tr><td>Текст таблицы</td></tr></table></td></tr></table>

Текст таблицы

Вставка изображения в HTML таблицу

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

<table border="1"><tr align="left"> <td><img src="http://www.liveinternet.ru/images/nopreview.gif"/> <a href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=http://powdertoy.co.uk/Avatars/48446_40.png" target=_blank border="0">[показать]</a></td> <td> Содержимое 2 ячейки </td> </tr><tr align="right"> <td> Содержимое 3 ячейки </td><td> Содержимое 4 ячейки </td> </tr></table>

[показать]	Содержимое 2 ячейки
Содержимое 3 ячейки	Содержимое 4 ячейки

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

• width — ширина;
• height — высота;
• alt — альтернативный текст, который отображается в браузере при отключенной функции отображения изображений;
• title — подпись к картинке;
• align — горизонтальное выравнивание;
• valign — вертикальное выравнивание.

Кроме того, облачив изображение в специальный тег <a href="страница, на которую ведёт ссылка"><img src="имя файла.jpg"></a>, его можно использовать в качестве ссылки.

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

Соседствующие ячейки внутри одного столбца или строки можно объединить с помощью параметров rowspan и colspan тега <td>.

Объединение столбцов одной строчки выглядит так:

<table border="1"><tr><td colspan="3">Текст 2</td></tr><tr><td>Текст 2</td><td>Текст 3</td><td>Текст 4</td></tr></table>

Текст 2
Текст 2	Текст 3	Текст 4

У HTML таблицы объединение ячеек одного столбца выглядит следующим образом:

<table border="1"><tr><td rowspan="3">Текст 1</td><td>Текст 2</td></tr><tr><td>Текст 3</td></tr><tr><td>Текст 4</td></tr></table>

Текст 1	Текст 2
	Текст 3
	Текст 4

Пример простейшей рамки для фото:

<table bgcolor="black" align="center" valign="middle" cellpadding="0" cellspacing="0"><tr><td colspan="3" align="center" valign="middle" background="http://ссылка_на_картинку" height="40" width="40"></td></tr><tr><td align="center" valign="middle" width="40" height="40" background="http://ссылка_на_картинку"></td><td align="center" valign="middle" height="40" width="40"><img src="http://www.liveinternet.ru/images/nopreview.gif"/> <a href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=http://ССЫЛКА_НА_ФОТО" target=_blank border="0">[показать]</a><br /><font color="white">Здесь твой текст (можно не писать)</font></td><td align="center" valign="middle" width="40" height="40" background="http://ссылка_на_картинку"></td></tr><tr><td colspan="3" align="center" valign="middle" background="http://ссылка_на_картинку" height="40" width="40"></td></tr></table>

	[показать]