Урок № 3

[Литари]

Теперь по просьбам многочисленных ПЧей рассмотрим как делать таблицы на странице.

читать урок далее

Таблица описывается парным тегом <table> и </table><table> говорит браузеру, что начинается таблица, а </table> говорит о том, что таблица заканчивается.
таким образом при создании таблицы пишем сразу 2 тега
<table>
</table>
Теперь надо описать строку таблицы. Для создания строки в таблице используется парный тег <tr> </tr>
Если у нас таблица состоит из одной строки, то будет так
<table>
<tr> </tr>
</table>
 
Если таблица состоит из 3 строк, то делаем так :
<table>
<tr> </tr>
<tr> </tr>
<tr> </tr>
</table>
Но это еще не все
В каждой строке должна находиться как минимум 1 ячейка..или иначе говоря надо кроме строки, описать еще как минимум один столбец.
Столбцы в HTML описываются с помощью тегов <td> и </td>,которые должны находиться между тегами <tr> и </tr>
Например. если у нас в таблице 1 строка и 1 столбец, т.е. например вот такая

то таблица будет описана так :
<table>
<tr><td> </td></tr>
</table>
Если таблица состоит из 1 строки и 3 столбцов, т.е. вот такая

то таблица будет описана вот так
<table>
<tr><td> </td><td>
</td><td> </td></tr>
</table>
Если мы хотим добавить еще одну строку в таблицу из 3 ячеек, т.е. сделать вот такую таблицу

то код таблицы будет такой
<table>
<tr><td> </td><td>
</td><td> </td></tr>
<tr><td> </td><td>
</td><td> </td></tr>
</table>

А вот содержимое ячеек пишется ТОЛЬКО МЕЖДУ тегами <td> и </td>
Писать контент между <tr> и <td>, между </td> и </tr>
или между </td> и </td> - НЕЛЬЗЯ.
ВАЖНО. Для описания таблицы вы должны использовать именно такой порядок: сначала пишите теги таблицы, затем теги строки, затем теги ячеек.
Заполним нашу таблицу содержимым, расположив покрасивее теги
<table>
<tr>
<td> строка 1 ячейка 1</td>
<td>строка 1 ячейка 2</td>
<td>строка 1 ячейка 3</td>
</tr>
<tr>
<td>строка 2 ячейка 1</td>
<td>строка 2 ячейка 2</td>
<td>строка 2 ячейка 3</td>
</tr>
</table>
 
Таблица будет выглядеть так

строка 1 ячейка 1	строка 1 ячейка 2	строка 1 ячейка 3
строка 2 ячейка 1	строка 2 ячейка 2	строка 2 ячейка 3

Конечный код таблицы выглядит так:

<table border="1" cellpadding="0" cellspacing="0">
<tbody><tr>
<td> строка 1 ячейка 1 </td>
<td>строка 1 ячейка 2</td>
<td>строка 1 ячейка 3</td>
</tr>
<tr>
<td>строка 2 ячейка 1 </td>
<td>строка 2 ячейка 2</td>
<td>строка 2 ячейка 3</td>
</tr>
</tbody></table>

 
Соответственно, в ячейке 1 мы ставим нумерацию аватаров, а в ячейке 2 располагаем сами аватары.
При этом, мы видим следующие параметры -

<table border="1" cellpadding="0" cellspacing="0">

первый параметр регулирует толщину границ. Второй - расстояние от аватара до таблицы по горизонтали, третий параметр - по вертикали.
Элемент <tbody> предназначен для хранения одной или нескольких строк таблицы. Это позволяет создавать структурные блоки, к которым можно применять единое оформление через стили, а также управлять их видом через скрипты.
Допускается применять несколько тегов <tbody> внутри контейнера <table>.

помощь данного сайта

Вопрос: Использовано?

1. да, удачно, спасибо		18	(90%)
2. да, неудачно, но я буду разбираться далее		2	(10%)
Всего:		20

@темы: уроки, Литари

Comments

[Shaegrass]

Это надо переварить)))))

[Литари]

не отрицаю) но информация полезная)

[Shaegrass]

Литари
Это да

[Харука.]

это у меня глюк или нужно что-то сделать ещё
у меня получается таблица,только без её границ (чёрненьких линий нету)

[Литари]

Hime-niashka
виновата, не усмотрела))
поправила.

[Харука.]

Литари спасибо)
а теперь ещё вопрос:как сделать отступ снизу от границы?

[Литари]

Hime-niashka
так cellspacing тебе в помощь)

[Харука.]

Литари угу) поняла) спасибо большое)))) *что-то я сегодня торможу*

[Литари]

Hime-niashka
все хорошо)) учиццо надо всем))

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

оффтопом

а научи, как закруглять уголки на авках.

[Литари]

Lovely Leo
предыдущий урок)
Урок № 2

ой, как же круто! ты молодец.

[Литари]

мне приятно, если уроки вам помогают))

[jultschik]

Литари, а как сделать, чтобы ячейки были определённго размера, под аватарку? а то они у меня какие-то широкие получаются

[Литари]

jultschik

<table border="1" cellpadding="0" cellspacing="0">

отступы должны быть по нулям.
Можете мне код показать?

[jultschik]

Литари, получилось!!! спасибо

[Литари]

пожалуйста)))