Rambler's Top100

КАК СОЗДАТЬ ТАБЛИЦУ

Для создания таблиц, в html предназначен открывающий и закрывающий тег <table></table> Обычно таблицы состоять из строк и колонок, каждя строка таблицы заключается в тег <tr></tr>, которые помещаются между тегами <table></table>, а каждая колонка таблицы заключается в тег <td></td>, которые помещаются между тегами <tr></tr>, между тегами td пишется текст, например для таблицы из одной строки и одной колонки код будет таким

<table>
<tr>
<td> Это таблица из одной строки и одной колонки</td></tr>
</table>

А сама таблица будет выглядеть так:

Это талица из одной строки и одной колонки

Для таблицы из одной строки и допустим трёх колонок код будет таким:

<table>
<tr>

<td>1-я колонка </td>
<td>
2-я колонка </td>
<td>
3-я колонка</td>
</tr>
</table>

В одной строке таблицы можно разместить любое количество колонок, как и любое количество строк в самой таблице. А таблица в одну строку с тремя колонками будет выглядеть так:

1-я колонка 2-я колонка 3-я колонка

Если сейчас вы вставите и сохраните код приведённый выше на своей странице, то никакой таблицы на ней не увидете или увидете текст вставленный между тегами td, как на примере ниже

1-я колонка 2-я колонка 3-я колонка

Это потому что в таблице прописываются атрибуты, в которых указывается ширина как самой таблицы, так и каждой колонке в отдельности, а так же высота, рамка, цвет, как будут будут располагаться ячейки и содержимое в них, вообще, по правилам хорошего тона в сайтостроении, эти атрибуты прописываются не в html - файле, а в css - файле, как это делается, вы узнате когда будете изучать Основы CSS, но знать как это делать в самой странице- html тоже нужно, и так атрибуты для таблиц:

width="" - ширина таблицы
height="" - высота таблицы
border="" - рамка вокруг таблицы
bgcolor="" - цвет фона всей таблицы или каждой колонке в отдельности
BORDERCOLOR="" - цвет рамки таблицы

<table border="1" bordercolor="#221EFF">
<tr>

<td width="50" bgcolor="#D0FF00" >1-я колонка </td>
<td width="100" bgcolor="#3AE2CE">
2-я колонка </td>
<td width="70" bgcolor="#FF5CCB">
3-я колонка</td>
</tr>
</table>

1-я 2-я 3-я

В результате мы видим три ячейки таблицы согласно заданных размеров и установленных цветов для каждой ячейки. Ячейки отделены друг от друга и от общей таблицы на 1 пиксель, а чтобы этих отступов не было и все ячейки плотно прилегали друг к другу, есть еще атрибуты для таблицы это:

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

- CELLPADDING - указывает какой будет отступ от краев ячеек, для содержимого этих ячеек.

Эти атрибуты прописываются в теге <table>, например так:

<table border="1" bordercolor="#221EFF" cellpadding="5" cellspacing="0">

1-я 2-я 3-я

В резултате все ячейки сомкнулись, а текст расположенный в них, отступает от краев на 5 пикселей. Для более полного понимания,поэксперементируйте сами с разными размерами этих атрибутов, а на следующей странице смотрите продолжение о таблицах

 

 

   Страницы по теме: ОСНОВЫ HTML

1. Как создать страницу HTML   2. Работа с текстом   3. Как вставлять картинки

4. Как сделать ссылки на странице   5. Как создать таблицу   6. Списки на сайте

Rambler's Top100 Яндекс цитирования