Курс "WEB-master" модуль WEB-1 - занятие 4

Выбор занятия

Выберите текущее занятие

Все материалы предоставлены в образовательных целях. Для пополнения базы материалов или цитат присылайте свои тексты на эл. почту (внизу страницы).

HTML

Таблицы

Для создания таблиц используются следующие теги:

  • TABLE - Для обрамления самой таблицы;
  • THEAD - Определяет заголовки элементов таблицы;
  • TBODY - Определяет тело таблицы;
  • TFOOT - Определяет нижнюю, завершающую часть таблицы;
  • CAPTION - Для обрамления подписи; Атрибут ALIGN={TOP | BOTTOM} - размещение заголовка относительно таблицы (вверху или внизу таблицы)
  • COLGROUP - Задание свойств одного или более столбцов;
  • COL - Задание свойств одного или более столбцов;
  • TR - Для обрамления рядов таблицы;
  • TD - Для обрамления клеток
  • TH - тех, что нужно показывать пожирнее, например заголовков

<!doctype html>
<html>
	<head>
		<title>HTML структура документа</title>
	</head>
	<body>
		<table>
			<tr>
				<td>Cell 1</td>
				<td>Cell 2</td>
				<td>Cell 3</td>
				<td>Cell 4</td>
			</tr>
			<tr>
				<td>Cell 5</td>
				<td>Cell 6</td>
				<td>Cell 7</td>
				<td>Cell 8</td>
			</tr>
			<tr>
				<td>Cell 9</td>
				<td>Cell 10</td>
				<td>Cell 11</td>
				<td>Cell 12</td>
			</tr>
		</table>
	</body>
</html>	

<!doctype html>
<html>
	<head>
		<title>HTML структура документа</title>
	</head>
	<body>
		<table width="100%" border="0" cellspacing="0" cellpadding="4">
			<tr align="center" bgcolor="#999999">
				<td colspan="3" style="font-size: 160%; font-family: sans-serif">Lorem ipsum dolor sit amet...</td>
			</tr>
			<tr>
				<td><img src="images/title.png" alt="" width="150" height="70" border="0" style="background: #CC9"></td>
				<td align="right"><img src="images/logo.png" alt="" width="70" height="70" style="background: #CF9"></td>
				<td>
					<a href="lorem.html">Lorem</a><Br>
					<a href="lorem.html">Ipsum</a><Br>
					<a href="lorem.html">Dolar</a>
				</td>
			</tr>
			<tr>
				<td colspan="3">
					<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#333333">
						<tr>
							<td>&nbsp;</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</body>
</html>	

HTML блок может вмещать в себя любые элементы web-страницы, в любом количестве.