Вики-Мастер: Новая страница: «

Таблицы в HTML

Начало и конец таблицы задаются тегами '''<'''table'''>''' '''<'''/table'''>'''.
Строки ...»

2011-11-17T10:10:05Z

Новая страница: «<h2>Таблицы в HTML</h2> Начало и конец таблицы задаются тегами '''<'''table'''>''' '''<'''/table'''>'''. <br>Строки ...»

Новая страница

<h2>Таблицы в HTML</h2>

Начало и конец таблицы задаются тегами '''<'''table'''>''' '''<'''/table'''>'''.
<br>Строки задаются тегами '''<'''tr'''>''' '''<'''/tr'''>'''
<br>Столбцы задаются тегами '''<'''td'''>''' '''<'''/td'''>'''

'''Пример:'''

'''<'''table>
<br>'''<'''tr>
<br>'''<'''td>Первая ячейка'''<'''/td>
<br>'''<'''td>Вторая ячейка</td>
<br>'''<'''/tr>
<br>'''<'''tr>
<br>'''<'''td>Третья ячейка</td>
<br>'''<'''td>Четвертая ячейка</td>
<br>'''<'''/tr>
<br>'''<'''/table>

'''В Wiki это будет выглядеть так:'''
<table>
<tr>
<td>Первая ячейка</td>
<td>Вторая ячейка</td>
</tr>
<tr>
<td>Третья ячейка</td>
<td>Четвертая ячейка</td>
</tr>
</table>

<h2>Рамка</h2>
<h3>Обозначение рамки</h3>
Для обозначения рамки используется тег border.

'''Пример:'''

'''<'''table border="1">
<br>'''<'''tr>
<br>'''<'''td>Первая ячейка'''<'''/td>
<br>'''<'''td>Вторая ячейка</td>
<br>'''<'''/tr>
<br>'''<'''tr>
<br>'''<'''td>Третья ячейка</td>
<br>'''<'''td>Четвертая ячейка</td>
<br>'''<'''/tr>
<br>'''<'''/table>

'''В Wiki это будет выглядеть так:'''
<table border="1">
<tr>
<td>Первая ячейка</td>
<td>Вторая ячейка</td>
</tr>
<tr>
<td>Третья ячейка</td>
<td>Четвертая ячейка</td>
</tr>
</table>

<h3>Толщина рамки</h3>
Вы сами можете менять толщину рамки вокруг таблицу (между ячейками рамка всегда одной толщины): border="1" - самая тонкая рамка, border="10" - самая толстая:

<table border="10">
<tr>
<td>Первая ячейка</td>
<td>Вторая ячейка</td>
</tr>
<tr>
<td>Третья ячейка</td>
<td>Четвертая ячейка</td>
</tr>
</table>

<h2>Расстояние между ячейками</h2>

Для изменения расстояния между соседними ячейками используется тег cellspacing

'''Пример:'''

'''<'''table border="6" cellspacing="10">
<br>'''<'''tr>
<br>'''<'''td>Первая ячейка'''<'''/td>
<br>'''<'''td>Вторая ячейка</td>
<br>'''<'''/tr>
<br>'''<'''tr>
<br>'''<'''td>Третья ячейка</td>
<br>'''<'''td>Четвертая ячейка</td>
<br>'''<'''/tr>
<br>'''<'''/table>

'''В Wiki это будет выглядеть так:'''
<table border="6" cellspacing="10">
<tr>
<td>Первая ячейка</td>
<td>Вторая ячейка</td>
</tr>
<tr>
<td>Третья ячейка</td>
<td>Четвертая ячейка</td>
</tr>
</table>

<h2>Расстояние внутри ячеек</h2>

Для изменения расстояния внутри ячеек используется тег cellpadding.

'''Пример:'''

'''<'''table border="6" cellpadding="10">
<br>'''<'''tr>
<br>'''<'''td>Первая ячейка'''<'''/td>
<br>'''<'''td>Вторая ячейка</td>
<br>'''<'''/tr>
<br>'''<'''tr>
<br>'''<'''td>Третья ячейка</td>
<br>'''<'''td>Четвертая ячейка</td>
<br>'''<'''/tr>
<br>'''<'''/table>

'''В Wiki это будет выглядеть так:'''
<table border="6" cellpadding="10">
<tr>
<td>Первая ячейка</td>
<td>Вторая ячейка</td>
</tr>
<tr>
<td>Третья ячейка</td>
<td>Четвертая ячейка</td>
</tr>
</table>

<h2>Объединение ячеек</h2>
<h3>По горизонтали</h3>

Для объединения ячеек по горизонтали используется тег colspan.

'''Пример:''' (объединим первую и вторую ячейки)

'''<'''table border="1">
<br>'''<'''tr>
<br>'''<'''td colspan="2">Первая ячейка'''<'''/td>
<br>'''<'''/tr>
<br>'''<'''tr>
<br>'''<'''td>Третья ячейка</td>
<br>'''<'''td>Четвертая ячейка</td>
<br>'''<'''/tr>
<br>'''<'''/table>

'''В Wiki это будет выглядеть так:'''
<table border="1">
<tr>
<td colspan="2">Первая ячейка</td>
</tr>
<tr>
<td>Третья ячейка</td>
<td>Четвертая ячейка</td>
</tr>
</table>

<h3>По вертикали</h3>

Для объединения ячеек по вертикали используется тег rowspan.

'''Пример:''' (объединим первую и третью ячейки)

'''<'''table border="1">
<br>'''<'''tr>
<br>'''<'''td rowspan="2">Первая ячейка'''<'''/td>
<br>'''<'''td>Вторая ячейка</td>
<br>'''<'''/tr>
<br>'''<'''tr>
<br>'''<'''td>Четвертая ячейка</td>
<br>'''<'''/tr>
<br>'''<'''/table>

'''В Wiki это будет выглядеть так:'''
<table border="1">
<tr>
<td rowspan="2">Первая ячейка</td>
<td>Вторая ячейка</td>
</tr>
<tr>
<td>Четвертая ячейка</td>
</tr>
</table>

<h2>Размер таблицы и ячеек</h2>
Для этого используются теги width (ширина) и height (высота). Их значения задаются в пикселах или процентах.

Пример:

'''<'''table width="75%" height="25%">

Так же меняется и размер ячеек.

<h2>Выравнивание</h2>
<h3>Горизонтальное</h3>
Для этого используется тег align. Для выравнивания по центру - center, по правому краю - right, по левому краю - left.

'''Пример:'''

'''<'''table border="1">
<br>'''<'''tr>
<br>'''<'''td>Первая ячейка'''<'''/td>
<br>'''<'''td align=center>Вторая ячейка</td>
<br>'''<'''/tr>
<br>'''<'''tr>
<br>'''<'''td>Третья ячейка</td>
<br>'''<'''td>Четвертая ячейка</td>
<br>'''<'''/tr>
<br>'''<'''/table>

'''В Wiki это будет выглядеть так:'''
<table border="1">
<tr>
<td>Первая ячейка</td>
<td align=center>Вторая ячейка</td>
</tr>
<tr>
<td>Третья ячейка</td>
<td>Четвертая ячейка</td>
</tr>
</table>

<h3>Вертикальное</h3>
Для вертикального выравнивания содержимого ячеек используется тег valign, у которого есть следующие значения:

*baseline — по базовой линии;
*bottom — по нижнему краю;
*middle — по середине (значение по умолчанию);
*top — по верхнему краю.

'''Пример:'''

'''<'''td valign="top">Первая ячейка</td>

<h2>Цвет ячейки (таблицы)</h2>
Для этого используется тег bgcolor.

'''Пример:'''

'''<'''table border="1">
<br>'''<'''tr>
<br>'''<'''td>Первая ячейка'''<'''/td>
<br>'''<'''td>Вторая ячейка</td>
<br>'''<'''/tr>
<br>'''<'''tr>
<br>'''<'''td bgcolor="#FFFF00">Третья ячейка</td>
<br>'''<'''td>Четвертая ячейка</td>
<br>'''<'''/tr>
<br>'''<'''/table>

'''В Wiki это будет выглядеть так:'''
<table border="1">
<tr>
<td>Первая ячейка</td>
<td>Вторая ячейка</td>
</tr>
<tr>
<td bgcolor="#FFFF00">Третья ячейка</td>
<td>Четвертая ячейка</td>
</tr>
</table>

Создание таблиц 2 - История изменений

Вики-Мастер: Новая страница: «

Таблицы в HTML