Учебный курс Социальные сервисы Веб 2.0. Модуль 3: различия между версиями

Материал из Wiki Mininuniver
Перейти к навигацииПерейти к поиску
Строка 1: Строка 1:
 +
Цель работы:
 +
 +
1. Научиться работать в Вики с таблицами
 +
 +
2. Добавить таблицу в визитную карточку участника
 +
 +
3. Добавить таблицы в статьи
 +
 
<center>'''Таблицы в Вики'''</center>
 
<center>'''Таблицы в Вики'''</center>
 +
 +
Любая таблица в Вики начинается с фигурной скобки { с последующей вертикальной чертой | и заканчивается вертикальной чертой | с закрывающей фигурной скобкой }. Каждая ячейка строки начинается с вертикальной черточки |, после которой пишется её содержание.
 +
 +
Пример:
 +
Исходный код таблицы с одной строкой
 +
{|
 +
|Ячейка 1
 +
|Ячейка 2
 +
|Ячейка 3
 +
|}
 +
 +
 +
В Вики это будет выглядеть так
 +
Ячейка 1 Ячейка 2 Ячейка 3
 +
Для введения следующей строки после вертикальной черточки ставится штрих «-». Таким образом можно вводить любое количество строк.
 +
 +
Пример:
 +
Исходный код таблицы в две строки
 +
{|
 +
|Ячейка 1*1
 +
|Ячейка 2*1
 +
|Ячейка 3*1
 +
|-
 +
|Ячейка 1*2
 +
|Ячейка 2*2
 +
|Ячейка 3*2
 +
|}
 +
В Вики это будет выглядеть так:
 +
Ячейка 1*1 Ячейка 2*1 Ячейка 3*1
 +
Ячейка 1*2 Ячейка 2*2 Ячейка 3*2
 +
Таблица в три строки пишется так:
 +
{|
 +
|Ячейка 1*1
 +
|Ячейка 2*1
 +
|Ячейка 3*1
 +
|-
 +
|Ячейка 1*2
 +
|Ячейка 2*2
 +
|Ячейка 3*2
 +
|-
 +
|Ячейка 1*3
 +
|Ячейка 2*3
 +
  |Ячейка 3*3
 +
|}
 +
Соответственно, в Вики это выглядит так:
 +
Ячейка 1*1 Ячейка 2*1 Ячейка 3*1
 +
Ячейка 1*2 Ячейка 2*2 Ячейка 3*2
 +
Ячейка 1*3 Ячейка 2*3 Ячейка 3*3
 +
 +
Табличные рамки. Вид рамки описывается в первой строке,  сразу после {|. Между ними и атрибутом должен быть пробел. Толщина линий рамки задается атрибутом border=n, где «n» — толщина линии:
 +
Пример:
 +
Исходный код:                                              Вид в Вики:
 +
{| border=1
 +
|Ячейка 1*1
 +
|Ячейка 2*1
 +
|Ячейка 3*1
 +
|-
 +
|Ячейка 1*2
 +
|Ячейка 2*2
 +
|Ячейка 3*2
 +
|-
 +
|Ячейка 1*3
 +
|Ячейка 2*3
 +
|Ячейка 3*3
 +
|}
 +
Заголовки. Чтобы содержимое ячейки выделялось жирным шрифтом и центрировалось, вместо вертикальных черточек ставятся восклицательные знаки. Обычно это применяется для выделения заголовков.
 +
Пример:
 +
{| border=1                                                    Вид в Вики:         
 +
!Первый столбец
 +
!Второй столбец
 +
!Третий столбец
 +
|-
 +
!Первая строчка
 +
|Ячейка 2*1
 +
|Ячейка 3*1
 +
|-
 +
!Вторая строчка
 +
|Ячейка 2*2
 +
|Ячейка 3*2
 +
|-
 +
!Третья строчка
 +
|Ячейка 2*3
 +
|Ячейка 3*3
 +
|}
 +
Запись в одну строчку. Чтобы сделать записываемую в таблицу информацию более читабельной, можно писать ряды в одну строчку, отделяя их дополнительной вертикальной чертой.
 +
Пример:
 +
{| border=1
 +
!Первый столбец||Второй столбец||Третий столбец
 +
|-
 +
|Ячейка 1*1||Ячейка 2*1||Ячейка 3*1
 +
|-
 +
|Ячейка 1*2||Ячейка 2*2||Ячейка 3*2
 +
|-
 +
|Ячейка 1*3||Ячейка 2*3||Ячейка 3*3
 +
|}
 +
В Вики это будет выглядеть так:         
 +
 +
 +
Объединение ячеек. В Вики, как и в HTML, имеется возможность объединять несколько ячеек как по вертикали, так и по горизонтали. Для объединения по вертикали применяется атрибут rowspan=n, где «n» — число ячеек, которые должна объединить данная ячейка. Этот атрибут вписывается перед содержанием объединяющей ячейки.
 +
 +
Вертикальное объединение двух ячеек пишется так:
 +
{| border=1
 +
|Ячейка 1
 +
|rowspan=2 |Ячейка 2, объединяет два ряда таблицы
 +
|Ячейка 3
 +
|-
 +
|Ячейка 4
 +
|Ячейка 5
 +
|}
 +
В Вики это будет выглядеть следующим образом:         
 +
 +
 +
 +
Для объединения по горизонтали используется атрибут colspan=n.
 +
Пример:
 +
{| border=1
 +
|Ячейка 1
 +
|colspan=2 |Ячейка 2, объединяет два столбца
 +
|-
 +
|Ячейка 3
 +
|Ячейка 4
 +
|Ячейка 5
 +
|}
 +
Вид в Вики:         
 +
 +
 +
 +
«Раскраска» таблиц. Текст, находящийся в таблице, можно сделать цветным. С этой целью применяются те же тэги, что и в HTML:
 +
• для отдельного слова — <font color="#ABCDEF">Teкст</font>;
 +
• для длинного текста — <div style="color:#ABCDEF">Текст, текст.</div>, где «ABCDEF» — индекс цвета в Таблице цветов (http://www.farb-tabelle.de/ru/table-of-color.htm)
 +
Пример:
 +
Для "раскраски" текста пишут так:
 +
{| border=1
 +
|Ячейка 1*1
 +
|Здесь цветное только <font color="#FF00FF">одно</font> слово.
 +
|Ячейка 3*1
 +
|-
 +
|Ячейка 1*2
 +
|Ячейка 2*2
 +
|<div style="color:#008B00">А здесь выделен цветом длинный-длинный абзац.</div>
 +
|-
 +
|Ячейка 1*3
 +
|Ячейка 2*3
 +
|Ячейка 3*3
 +
|}
 +
В Вики это будет выглядеть так:         
 +
 +
 +
 +
Сделать цветную ячейку можно с помощью атрибута «bgcolor=#ABCDEF», где «ABCDEF» — индекс цвета в Таблице цветов.
 +
Пример:
 +
Для «раскраски» одной ячейки пишется так:
 +
{| border=1
 +
|Ячейка 1*1
 +
|bgcolor=#FFCC00|Ячейка 2*1
 +
|Ячейка 3*1
 +
|-
 +
|Ячейка 1*2
 +
|Ячейка 2*2
 +
|Ячейка 3*2
 +
|-
 +
|bgcolor=#CCFF00|Ячейка 1*3
 +
|Ячейка 2*3
 +
|Ячейка 3*3
 +
|}
 +
Вид в Вики:         
 +
 +
 +
 +
 +
Ширина таблицы и столбцов. Если, например, подряд идут несколько отдельных таблиц, то желательно, чтобы ширина их была одинаковой, не зависимо от их содержания. Для фиксации ширины таблицы применяется атрибут width.
 +
Пример:
 +
{| border=1 width=75%
 +
|+Таблица 1
 +
|Ячейка 1*1 - long - long- long- long- long
 +
|Ячейка 1*2
 +
|-
 +
|Ячейка 1*3
 +
|Ячейка 1*4
 +
|}
 +
{| border=1 width=75%
 +
|+Таблица 2
 +
|Ячейка 2*1
 +
|Ячейка 2*2
 +
|-
 +
|Ячейка 2*3
 +
|Ячейка 2*4
 +
|}
 +
Выглядеть это будет так:
 +
 +
 +
 +
 +
 +
 +
С помощью этого же атрибута можно регулировать ширину отдельных столбцов:
 +
Пример:
 +
{| border=1 width=75%
 +
|+Таблица 1
 +
| width=40%|Ячейка 1*1 - long - long- long- long- long
 +
| width=20%|Ячейка 1*2 - long - long- long- long- long
 +
| width=40%|Ячейка 1*3 - long - long- long- long- long
 +
|-
 +
|Ячейка 1*4
 +
|Ячейка 1*5
 +
|Ячейка 1*6
 +
|}
 +
Вид в Вики:         
 +
 +
 +
 +
 +
Задание 1. Найдите на страницах Летописи.ру примеры интересных таблиц (например, Шаблон:ВикиУниверситет). Разберитесь с Вики-кодом в них.
 +
 +
Задание 2. Добавьте в свою визитную карточку участника какую-либо интересную таблицу (свое портфолио, электронную зачетную книжку, календарь важных дат и др.)
 +
 +
Задание 3. Просмотрите визитные карточки друг друга. Оставьте отзывы на странице обсуждения.
  
 
[[Категория: Учебный курс Социальные сервисы Веб 2.0]]
 
[[Категория: Учебный курс Социальные сервисы Веб 2.0]]

Версия 09:53, 11 апреля 2008

Цель работы:

1. Научиться работать в Вики с таблицами

2. Добавить таблицу в визитную карточку участника

3. Добавить таблицы в статьи

Таблицы в Вики

Любая таблица в Вики начинается с фигурной скобки { с последующей вертикальной чертой | и заканчивается вертикальной чертой | с закрывающей фигурной скобкой }. Каждая ячейка строки начинается с вертикальной черточки |, после которой пишется её содержание.

Пример: Исходный код таблицы с одной строкой

Ячейка 1 Ячейка 2 Ячейка 3


В Вики это будет выглядеть так Ячейка 1 Ячейка 2 Ячейка 3 Для введения следующей строки после вертикальной черточки ставится штрих «-». Таким образом можно вводить любое количество строк.

Пример: Исходный код таблицы в две строки

Ячейка 1*1 Ячейка 2*1 Ячейка 3*1
Ячейка 1*2 Ячейка 2*2 Ячейка 3*2

В Вики это будет выглядеть так: Ячейка 1*1 Ячейка 2*1 Ячейка 3*1 Ячейка 1*2 Ячейка 2*2 Ячейка 3*2 Таблица в три строки пишется так:

Ячейка 1*1 Ячейка 2*1 Ячейка 3*1
Ячейка 1*2 Ячейка 2*2 Ячейка 3*2
Ячейка 1*3 Ячейка 2*3 Ячейка 3*3

Соответственно, в Вики это выглядит так: Ячейка 1*1 Ячейка 2*1 Ячейка 3*1 Ячейка 1*2 Ячейка 2*2 Ячейка 3*2 Ячейка 1*3 Ячейка 2*3 Ячейка 3*3

Табличные рамки. Вид рамки описывается в первой строке, сразу после {|. Между ними и атрибутом должен быть пробел. Толщина линий рамки задается атрибутом border=n, где «n» — толщина линии: Пример: Исходный код: Вид в Вики:

Ячейка 1*1 Ячейка 2*1 Ячейка 3*1
Ячейка 1*2 Ячейка 2*2 Ячейка 3*2
Ячейка 1*3 Ячейка 2*3 Ячейка 3*3

Заголовки. Чтобы содержимое ячейки выделялось жирным шрифтом и центрировалось, вместо вертикальных черточек ставятся восклицательные знаки. Обычно это применяется для выделения заголовков. Пример:

Первый столбец Второй столбец Третий столбец
Первая строчка Ячейка 2*1 Ячейка 3*1
Вторая строчка Ячейка 2*2 Ячейка 3*2
Третья строчка Ячейка 2*3 Ячейка 3*3

Запись в одну строчку. Чтобы сделать записываемую в таблицу информацию более читабельной, можно писать ряды в одну строчку, отделяя их дополнительной вертикальной чертой. Пример:

Первый столбец Второй столбец Третий столбец
Ячейка 1*1 Ячейка 2*1 Ячейка 3*1
Ячейка 1*2 Ячейка 2*2 Ячейка 3*2
Ячейка 1*3 Ячейка 2*3 Ячейка 3*3

В Вики это будет выглядеть так:


Объединение ячеек. В Вики, как и в HTML, имеется возможность объединять несколько ячеек как по вертикали, так и по горизонтали. Для объединения по вертикали применяется атрибут rowspan=n, где «n» — число ячеек, которые должна объединить данная ячейка. Этот атрибут вписывается перед содержанием объединяющей ячейки.

Вертикальное объединение двух ячеек пишется так:

Ячейка 1 Ячейка 2, объединяет два ряда таблицы Ячейка 3
Ячейка 4 Ячейка 5

В Вики это будет выглядеть следующим образом:


Для объединения по горизонтали используется атрибут colspan=n. Пример:

Ячейка 1 Ячейка 2, объединяет два столбца
Ячейка 3 Ячейка 4 Ячейка 5

Вид в Вики:


«Раскраска» таблиц. Текст, находящийся в таблице, можно сделать цветным. С этой целью применяются те же тэги, что и в HTML: • для отдельного слова — Teкст;

• для длинного текста —

Текст, текст.

, где «ABCDEF» — индекс цвета в Таблице цветов (http://www.farb-tabelle.de/ru/table-of-color.htm)

Пример: Для "раскраски" текста пишут так:

Ячейка 1*1 Здесь цветное только одно слово. Ячейка 3*1
Ячейка 1*2 Ячейка 2*2
А здесь выделен цветом длинный-длинный абзац.
Ячейка 1*3 Ячейка 2*3 Ячейка 3*3

В Вики это будет выглядеть так:


Сделать цветную ячейку можно с помощью атрибута «bgcolor=#ABCDEF», где «ABCDEF» — индекс цвета в Таблице цветов. Пример: Для «раскраски» одной ячейки пишется так:

Ячейка 1*1 Ячейка 2*1 Ячейка 3*1
Ячейка 1*2 Ячейка 2*2 Ячейка 3*2
Ячейка 1*3 Ячейка 2*3 Ячейка 3*3

Вид в Вики:



Ширина таблицы и столбцов. Если, например, подряд идут несколько отдельных таблиц, то желательно, чтобы ширина их была одинаковой, не зависимо от их содержания. Для фиксации ширины таблицы применяется атрибут width. Пример:

Таблица 1
Ячейка 1*1 - long - long- long- long- long Ячейка 1*2
Ячейка 1*3 Ячейка 1*4
Таблица 2
Ячейка 2*1 Ячейка 2*2
Ячейка 2*3 Ячейка 2*4

Выглядеть это будет так:




С помощью этого же атрибута можно регулировать ширину отдельных столбцов: Пример:

Таблица 1
Ячейка 1*1 - long - long- long- long- long Ячейка 1*2 - long - long- long- long- long Ячейка 1*3 - long - long- long- long- long
Ячейка 1*4 Ячейка 1*5 Ячейка 1*6

Вид в Вики:



Задание 1. Найдите на страницах Летописи.ру примеры интересных таблиц (например, Шаблон:ВикиУниверситет). Разберитесь с Вики-кодом в них.

Задание 2. Добавьте в свою визитную карточку участника какую-либо интересную таблицу (свое портфолио, электронную зачетную книжку, календарь важных дат и др.)

Задание 3. Просмотрите визитные карточки друг друга. Оставьте отзывы на странице обсуждения.

Источник — https://wiki.mininuniver.ru/index.php?title=Учебный_курс_Социальные_сервисы_Веб_2.0._Модуль_3&oldid=2715