Создание таблиц 2 — различия между версиями

Материал из wiki-энциклопедии игры Karos
Страница загружается. Перейти к:навигация, поиск
[досмотренная версия][досмотренная версия]
 
(не показаны 3 промежуточные версии этого же участника)
Строка 127: Строка 127:
 
<tr>
 
<tr>
 
<td>Третья ячейка</td>
 
<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>
 
<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 это будет выглядеть так:

Первая ячейка Вторая ячейка
Третья ячейка Четвертая ячейка
Источник — «http://www.gamexp.com/tr/wiki/karos/index.php?title=Создание_таблиц_2&oldid=16044»
На сайте работает система проверки ошибок. Обнаружив неточность в тексте, выделите ее и нажмите Ctrl + Enter.

Также открыть окошко отправки сообщения можно, кликнув по ссылке:
Отправить сообщение об ошибке