Главная Заказать статью Связь с автором Заказать сайт Статьи

Создание таблиц в html

Создание таблиц в html понадобится вам в любом случае. Таблицы широко используются при верстке сайтов, при создании дизайна сайта ну и для простого представления данных в виде таблиц. В html таблица обозначается парным тегом <table></table>. <table> сообщает о начале таблицы, а </table> соответственно о конце таблицы. В свою очередь таблица состоит из строк и столбцов, причем что в каждой строке есть как минимум 1 столбец.

P.S. Кстати, таблиц без данных не видно, так как параметр рамки = 0 по умолчанию, для того, чтобы увидеть таблицу, необходимо в ней что-нибудь написать (между тегами <td></td>) или вставить другое содержимое (картинку, например) но об этом чуть ниже.

Для того чтобы описать строку таблицы прописываем парный тег <tr></tr> между тегами <table></table>, то есть выглядит так:

<table>

<tr>

</tr>

</table>

Как мы уже говорили, в любой строке должен быть хотя бы один столбец. Для того, чтобы описать этот столбец, нужно прописать парный тег <td></td> внутри строки:

<table>

<tr>

<td></td>

</tr>

</table>

Вот это тот минимум - таблица, состоящая из одной строки и одного столбца.

1

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

<table>

<tr>

<td></td>
<td></td>

</tr>

</table>

Выглядеть будет следующим образом:

1 2

Аналогично будет для трех ячеек

<table>

<tr>

<td></td>
<td></td>
<td></td>

</tr>

</table>
1 2 3

Теперь сделаем вот что: добавим в данную таблицу вторую строку

<table>

<tr>

<td></td>
<td></td>
<td></td>

</tr>

<tr>

<td></td>
<td></td>
<td></td>

</tr>

</table>
1 2 3
1 2 3

Ну а теперь добавим еще и третью строку.

<table>

<tr>

<td></td>
<td></td>
<td></td>

</tr>

<tr>

<td></td>
<td></td>
<td></td>

</tr>

<tr>

<td></td>
<td></td>
<td></td>

</tr>

</table>
1 2 3
1 2 3
1 2 3

Думаю суть вы поняли.

Вы, наверное, скажете, что суть-то мы поняли, а вот как написать внутри таблицы текст? Необходимо запомнить, что содержимое таблицы пишется только между тегами <td></td>, то есть между тегами столбца. Вот пример:

<table width="200" height="100" border="2" cellpadding="0" cellspacing="0">

<tr>

<td>а)1</td>
<td>а)2</td>
<td>а)3</td>

</tr>

<tr>

<td>б)1</td>
<td>б)2</td>
<td>б)3</td>

</tr>

<tr>

<td>в)1</td>
<td>в)2</td>
<td>в)3</td>

</tr>

</table>
а)1 а)2 а)3
б)1 б)2 б)3
в)1 в)2 в)3

В таблицу были добавлены записи:

width="200" - ширина таблицы
height="100" - высота таблицы
border="2" - рамка таблицы, без нее вы не увидите границ таблицы
cellpadding="0" - расстояние между рамкой ячейки и ее содержимым
cellspacing="0" - расстояние между ячейками таблицы

Кроме всего прочего можно создавать таблицу прямо внутри другой таблицы. В html главное соблюдать вложенность тегов, поэтому будьте внимательны. Создадим простую таблицу в первой ячейке первого столбца для наглядности, а а)1 - ее содержимое перенесем в новую внутреннюю таблицу.

<table width="200" height="100" border="2" cellpadding="0" cellspacing="0"><tr><td><table><tr><td>а)1</td></tr></table></td>
<td>а)2</td>
<td>а)3</td></tr><tr><td>б)1</td>
<td>б)2</td>
<td>б)3</td></tr><tr><td>в)1</td>
<td>в)2</td>
<td>в)3</td></tr>

</table>

а)1
а)2 а)3
б)1 б)2 б)3
в)1 в)2 в)3

Создание сайта с помощью html
Как задать цвет фона в html
Добавление картинки на сайт
Изменение размера шрифта в html
Выравнивание сайта по центру
Как сделать активную ссылку
Создание таблиц в html
Объединение ячеек таблицы в html

Лучшая система размещения статей

cubass - копирайтер на TextSale.ru Рейтинг@Mail.ru Rambler's Top100 PR-CY.ru

© 2009-2011 Все права защищены www.baxtop.ru | Копирование материалов сайта без обратной гиперссылки на первоисточник ЗАПРЕЩАЕТСЯ!!!