Материал

15.04.15

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

Часто при создании HTML страниц пользователь сталкивается с созданием таблиц различного содержания и сложности. При этом создаются как обычные таблицы, так и таблицы, используемые для верстки (написания кода) страниц. Например, на странице «Результаты олимпиады для школьников» имеются разделы по математике, русскому языку и информатике. На каждой странице помещается таблица с набранными баллами по предметам, состоящая из нескольких столбцов и множества строк. Для перехода между страницами предметов создается горизонтальное меню, ссылки которого могут быть помещены в ячейки невидимой таблицы. Второй способ построения таблиц, как правило, применяется для формирования различной структуры страниц.

Итак, как же сделать таблицу на HTML. Для создания таблицы используется тэг <table>, <tr> и <td>. Первый тэг объявляет таблицу, а последние два используются для формирования строк и столбцов. Простейшая таблица, состоящая из стрех строк и двух столбцов, представлена на рисунке.

kak-cdelat-tabluci-html-1

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

<table border="1">
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
<tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</table>

В данном примере в тэге <table> указан атрибут border, который предназначен для указания размера рамки и границы таблицы. Так же существуют другие атрибуты таблицы и ее элементов. Атрибут cellspacing применяется для определения расстояния между ячейками, cellpadding – для определения расстояния внутри ячейки от границы до информации в ячейке, bgcolor – для задания цвета фона таблицы, width – для указания ширины таблицы или ее ячеек, height - для указания ширины таблицы или ее ячеек, align – для определения положения таблицы на странице (по левому краю, по правому краю, по центру), valign – для определения вертикального положения информации в ячейке.

cellpadding-cellspsacing

attributi-width-height-v-tablice

 

Для соединения строк или столбцов используются атрибуты colspan и rowspan соответственно.

Пример использования выше указанных атрибутов тэга <table> для создания таблицы на html представлен на рисунке.

kak-cdelat-tabluci-html-2

Полный код таблицы:

<table border="2" cellspacing="10" cellpadding="5" bgcolor="green">
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
<tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
<tr>
<td colspan="2" align="center">Ячейка 5</td>
</tr>
<tr>
<td rowspan="2" valign="center">Ячейка 6</td>
<td>Ячейка 7</td>
</tr>
<tr>
<td>Ячейка 8</td>
</tr>
</table>

Таким образом мы разобрали как сделать таблицу в HTML. При создании таблиц можно использовать специализированные редакторы, но они часто допускают ошибки, поэтому знание HTML тегов при создании таблиц является немаловажным моментом.