Таблицы

Таблицы используются для размещения информации табличного типа, раньше таблицы использовались для вёрстки сайта, создавалась одная большая и в ней несколько маленьких таблиц. Но такое создание сайтов очень неудобно, а код читается тяжело. Именно поэтому от создания сайтов с помощью таблиц отказались, а на смену им пришел css. Однако, таблицы по-прежнем актуальны и используются до сих пор.

Чтобы создать таблицу на html, используются тег <table></table>, таким образом, мы говорим интерпретатору, что здесь начинается таблица, но это не все, нам нужно указать строки, строки указываются с помощью тега <tr></tr> table rows (ряд таблицы), в каждой строке должны быть ячейки где и располагаются информация, существует два вида ячеек – это тег <th></th>, он отвечает за заголовок, т.е. контент находящийся в нутри этого тега автоматически становится по центру ячейки и жирным, <td></td> - это обычные для хранения данных, схема примерно такая:

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

<table border="1" width="200">
	<caption>Заголовок таблицы</caption>
		<tbody>
			<tr>
				<td align="center">1</td>
				<td align="center">2</td>
			</tr>
			<tr>
				<td align="center">3</td>
				<td align="center">4</td>
			</tr>
		</tbody>
</table>

Тег <caption> позволяет задать заголовок таблицы.

Он имеет единственный атрибут align. Этот атрибут может принимать одно из двух значений - это top - заголовок помещается над таблицей; bottom - заголовок располагается под таблицей.

Для логического форматирования таблицы предназначены теги <thead> и <tbody>. Тег <thead> описывает заголовок таблицы, а тег <tbody> - основное содержимое таблицы. Закрывающие теги </thead> и </tbody> не обязательны.

Одна строка, одна ячейка. У тега <table></table> имеются атрибуты, такие как border (рамка), можно также указать размеры таблицы с помощью атрибутов width и height, пример:

<table width=200 height=200 border=1></table>

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

<td align=”right”>

По вертикали отвечает атрибут valign (top – верх, bottom- низ, middle – по центру), этот же атрибут можно использовать и к самой таблице и к отдельной строке <table align=”center”>, <tr align=”center”>.

Colspan – объединяет ячейки по горизонту.

Rowspan – объединяет ячейки по вертикали.

Cellpading – отступ внутри ячейки.

Cellspacing – расстояние между ячейками.

bgcolor указывает цвет фона таблицы:

<table bgcolor="silver">
<table bgcolor="#C0C0C0">

Это основы по созданию таблицы в html, спасибо за внимание. :)