Таблица

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

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

<table> <caption> <tr> <td> <th>

Тег <table> определяет собственно таблицу; тег <tr> отвечает за формирование ее строк; тег <td> описывает ячейки таблицы.

Таблица в HTML надлежит описывать построчно: каждая строка (<tr>...</tr>) таблицы может содержать в себе одну или несколько ячеек (<td>...</td>)

Дополнительные функции применяемые для таблиц обозначаемые тегами <caption>
заголовок таблицы и <th> - ячейка-заголовок.

Для того, чтобы границы таблицы отображалась, нужно использовать атрибут border для определения ширины внешней рамки.
При значении  "0" рамка отображаться не будет, в нашем случае толщина границы "1".

Пример:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Пример</title>
</head>
<body>
<table border="1">
 <tr>
  <td> первый столбец, первой строки</td>
  <td> второй столбец, первой строки</td>
 </tr>
 <tr>
  <td>первый столбец, второй строки</td>
  <td> второй столбец, второй строки</td>
 </tr>
</table>
</body>
</html>

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

Пример:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Пример</title>
</head>
<body>
<table border="1">
 <tr>
  <td> первый столбец, первой строки </td>
  <td>&nbsp;</td>
 </tr>
 <tr>
  <td>первый столбец, второй строки ></td>
  <td> второй столбец, второй строки </td>
 </tr>
</table>
</body>
</html>

Чтобы добавить заголовок к таблице нужно использовать тег <caption>.
Заголовок будет отображаться над таблицей или под ней.
Указать место расположения заголовка поможет атрибут align
По умолчанию заголовок размещается вверху тоже самое, что со значением top (верх), а вот под таблицей в том случае, если добавить значение bottom (низ)

Пример:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Пример</title>
</head>
<body>
<table border="1">
 <tr>
 <caption align="bottom">Заголовок</caption>
  <td> первый столбец, первой строки </td>
  <td> второй столбец, первой строки </td>
 </tr>
 <tr>
  <td>первый столбец, второй строки ></td>
  <td> второй столбец, второй строки </td>
 </tr>
</table>
</body>
</html>

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

<caption align="bottom"><b><font size="5">Заголовок</font></b></caption>

Есть другой вид заголовка который будет размещен в отдельной ячейки. Ячейка-заголовок обозначается тегом <th> текст, которой выделен жирным.

Пример:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Пример</title>
</head>
<body>
<table border="1">
 <tr>
 <th>Заголовок</th>
  <td>второй столбец, первой строки ></td>
 </tr>
 <tr>
  <td>первый столбец, второй строки ></td>
  <td> второй столбец, второй строки </td>
 </tr>
</table>
</body>
</html>

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

Mini-Site Generator PRO ver.2.0 - Генератор создания сайтов