Таблицы HTML

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

1. Как создать таблицу

Таблица создаётся при помощи парного тега table. Данный тег является контейнером для элементов таблицы и все элементы должны находиться внутри него 

Потом создаются строки или ряды таблицы с помощью тега tr. Количество горизонтальных строк таблицы определяется количеством парных тегов tr.

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

Пример таблицы:

<table>

       <tr>

              <td>1</td> <td>Системное программирование</td>

       </tr>

       <tr>

              <td>2</td> <td>Офисное программирование</td>

       </tr>

</table>

Рис. 16

По умолчанию таблица и ячейки не имеют видимых границ. Цвет и другое оформление таблицы можно задать с помощью стилей (смотри раздел «Основы CSS»).

2. Как вставить заголовки в таблице

Каждой таблице можно добавить связанный с ней заголовок, расположив его перед таблицей или после неё. Тег caption создает заголовок таблицы. Добавляется непосредственно после тега table, вне строки или ячейки.

Кроме заголовка таблицы, можно также добавить заголовки столбцов и строки.  Тег th создаёт заголовок столбца или строки — специальную ячейку, текст в которой выделяется полужирным. Количество ячеек заголовка определяется количеством пар тегов <td></td>.

Пример таблицы c заголовками:

<table> <caption>Программа курса</caption>

       <tr> <th>№</th><th>Дисциплина</th></tr>

       <tr>

              <th>1</th> <td>Системное программирование</td>

       </tr>

       <tr>

              <th>2</th> <td>Офисное программирование</td>

       </tr>

</table>

Рис. 17

3. Как объединить ячейки таблицы

Атрибуты colspan и rowspan объединяют ячейки таблицы. Атрибут colspan задает количество ячеек, объединенных по горизонтали, а rowspan — по вертикали.

<TABLE> <CAPTION>Таблица с объединенными ячейками</CAPTION>

   <TR>

      <TH rowspan="2"> </TH>

      <TH colspan="2">Средний</TH>

      <TH rowspan="2">Карие глаза</TH>

   </TR>

   <TR>

      <TH>высота</TH> <TH>вес</TH>

   </TR>

   <TR>

      <TH>мужской пол</TH> <TD> &nbsp;  &nbsp; 1.9</TD>

      <TD>0.003</TD>       <TD> &nbsp;  &nbsp;  &nbsp; 40%</TD>

    </TR>

    <TR>

       <TH>женский пол</TH>  <TD> &nbsp; &nbsp; 1.7</TD>

       <TD>0.002</TD>        <TD> &nbsp;  &nbsp;  &nbsp; 43%</TD>

    </TR>

    <TR>

       <TH>&nbsp; &nbsp;  &nbsp; среднее</TH>   <TH> &nbsp; 1.8</TH>

       <TH>0.0025</TH>                          <TH> &nbsp;  &nbsp; 42,5%</TD>

    </TR>

</TABLE>

Рис. 18

Здесь мы использовали спецсимвол &nbsp; для вставки пробелов в ячейке таблицы.