Создание таблиц 2 — различия между версиями
| [досмотренная версия] | [досмотренная версия] |
| (не показана одна промежуточная версия этого же участника) | |||
| Строка 182: | Строка 182: | ||
</tr> | </tr> | ||
<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> | <td>Четвертая ячейка</td> | ||
</tr> | </tr> | ||
</table> | </table> | ||
Текущая версия на 13:08, 17 ноября 2011
Содержание
Таблицы в HTML
Начало и конец таблицы задаются тегами <table> </table>.
Строки задаются тегами <tr> </tr>
Столбцы задаются тегами <td> </td>
Пример:
<table>
<tr>
<td>Первая ячейка</td>
<td>Вторая ячейка</td>
</tr>
<tr>
<td>Третья ячейка</td>
<td>Четвертая ячейка</td>
</tr>
</table>
В Wiki это будет выглядеть так:
| Первая ячейка | Вторая ячейка |
| Третья ячейка | Четвертая ячейка |
Рамка
Обозначение рамки
Для обозначения рамки используется тег border.
Пример:
<table border="1">
<tr>
<td>Первая ячейка</td>
<td>Вторая ячейка</td>
</tr>
<tr>
<td>Третья ячейка</td>
<td>Четвертая ячейка</td>
</tr>
</table>
В Wiki это будет выглядеть так:
| Первая ячейка | Вторая ячейка |
| Третья ячейка | Четвертая ячейка |
Толщина рамки
Вы сами можете менять толщину рамки вокруг таблицу (между ячейками рамка всегда одной толщины): border="1" - самая тонкая рамка, border="10" - самая толстая:
| Первая ячейка | Вторая ячейка |
| Третья ячейка | Четвертая ячейка |
Расстояние между ячейками
Для изменения расстояния между соседними ячейками используется тег cellspacing
Пример:
<table border="6" cellspacing="10">
<tr>
<td>Первая ячейка</td>
<td>Вторая ячейка</td>
</tr>
<tr>
<td>Третья ячейка</td>
<td>Четвертая ячейка</td>
</tr>
</table>
В Wiki это будет выглядеть так:
| Первая ячейка | Вторая ячейка |
| Третья ячейка | Четвертая ячейка |
Расстояние внутри ячеек
Для изменения расстояния внутри ячеек используется тег cellpadding.
Пример:
<table border="6" cellpadding="10">
<tr>
<td>Первая ячейка</td>
<td>Вторая ячейка</td>
</tr>
<tr>
<td>Третья ячейка</td>
<td>Четвертая ячейка</td>
</tr>
</table>
В Wiki это будет выглядеть так:
| Первая ячейка | Вторая ячейка |
| Третья ячейка | Четвертая ячейка |
Объединение ячеек
По горизонтали
Для объединения ячеек по горизонтали используется тег colspan.
Пример: (объединим первую и вторую ячейки)
<table border="1">
<tr>
<td colspan="2">Первая ячейка</td>
</tr>
<tr>
<td>Третья ячейка</td>
<td>Четвертая ячейка</td>
</tr>
</table>
В Wiki это будет выглядеть так:
| Первая ячейка | |
| Третья ячейка | Четвертая ячейка |
По вертикали
Для объединения ячеек по вертикали используется тег rowspan.
Пример: (объединим первую и третью ячейки)
<table border="1">
<tr>
<td rowspan="2">Первая ячейка</td>
<td>Вторая ячейка</td>
</tr>
<tr>
<td>Четвертая ячейка</td>
</tr>
</table>
В Wiki это будет выглядеть так:
| Первая ячейка | Вторая ячейка |
| Четвертая ячейка |
Размер таблицы и ячеек
Для этого используются теги width (ширина) и height (высота). Их значения задаются в пикселах или процентах.
Пример:
<table width="75%" height="25%">
Так же меняется и размер ячеек.
Выравнивание
Горизонтальное
Для этого используется тег align. Для выравнивания по центру - center, по правому краю - right, по левому краю - left.
Пример:
<table border="1">
<tr>
<td>Первая ячейка</td>
<td align=center>Вторая ячейка</td>
</tr>
<tr>
<td>Третья ячейка</td>
<td>Четвертая ячейка</td>
</tr>
</table>
В Wiki это будет выглядеть так:
| Первая ячейка | Вторая ячейка |
| Третья ячейка | Четвертая ячейка |
Вертикальное
Для вертикального выравнивания содержимого ячеек используется тег valign, у которого есть следующие значения:
- baseline — по базовой линии;
- bottom — по нижнему краю;
- middle — по середине (значение по умолчанию);
- top — по верхнему краю.
Пример:
<td valign="top">Первая ячейка</td>
Цвет ячейки (таблицы)
Для этого используется тег bgcolor.
Пример:
<table border="1">
<tr>
<td>Первая ячейка</td>
<td>Вторая ячейка</td>
</tr>
<tr>
<td bgcolor="#FFFF00">Третья ячейка</td>
<td>Четвертая ячейка</td>
</tr>
</table>
В Wiki это будет выглядеть так:
| Первая ячейка | Вторая ячейка |
| Третья ячейка | Четвертая ячейка |