Учебный курс Социальные сервисы Веб 2.0. Модуль 3: различия между версиями
(не показано 9 промежуточных версий 1 участника) | |||
Строка 1: | Строка 1: | ||
+ | '''Цель работы:''' | ||
+ | |||
+ | '''1.''' Научиться работать в Вики с таблицами | ||
+ | |||
+ | '''2.''' Добавить таблицу в визитную карточку участника | ||
+ | |||
+ | '''3.''' Добавить таблицы в статьи | ||
+ | |||
<center>'''Таблицы в Вики'''</center> | <center>'''Таблицы в Вики'''</center> | ||
+ | |||
+ | Любая таблица в Вики начинается с фигурной скобки { с последующей вертикальной чертой | и заканчивается вертикальной чертой | с закрывающей фигурной скобкой }. Каждая ячейка строки начинается с вертикальной черточки |, после которой пишется её содержание. | ||
+ | |||
+ | Пример: | ||
+ | |||
+ | Исходный код таблицы с одной строкой | ||
+ | |||
+ | <nowiki>{|</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 1</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 2</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 3</nowiki> | ||
+ | |||
+ | <nowiki>|}</nowiki> | ||
+ | |||
+ | В Вики это будет выглядеть так: | ||
+ | {| | ||
+ | |Ячейка 1 | ||
+ | |Ячейка 2 | ||
+ | |Ячейка 3 | ||
+ | |} | ||
+ | |||
+ | Для введения следующей строки после вертикальной черточки ставится штрих «-». Таким образом можно вводить любое количество строк. | ||
+ | |||
+ | Пример: | ||
+ | |||
+ | Исходный код таблицы в две строки | ||
+ | |||
+ | <nowiki>{|</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 1*1</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 2*1</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 3*1</nowiki> | ||
+ | |||
+ | <nowiki>|-</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 1*2</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 2*2</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 3*2</nowiki> | ||
+ | |||
+ | <nowiki>|}</nowiki> | ||
+ | |||
+ | В Вики это будет выглядеть так: | ||
+ | |||
+ | {| | ||
+ | |Ячейка 1*1 | ||
+ | |Ячейка 2*1 | ||
+ | |Ячейка 3*1 | ||
+ | |- | ||
+ | |Ячейка 1*2 | ||
+ | |Ячейка 2*2 | ||
+ | |Ячейка 3*2 | ||
+ | |} | ||
+ | Таблица в три строки пишется так: | ||
+ | |||
+ | <nowiki>{|</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 1*1</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 2*1</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 3*1</nowiki> | ||
+ | |||
+ | <nowiki>|-</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 1*2</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 2*2</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 3*2</nowiki> | ||
+ | |||
+ | <nowiki>|-</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 1*3</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 2*3</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 3*3</nowiki> | ||
+ | |||
+ | <nowiki>|}</nowiki> | ||
+ | |||
+ | Соответственно, в Вики это выглядит так: | ||
+ | |||
+ | {| | ||
+ | |Ячейка 1*1 | ||
+ | |Ячейка 2*1 | ||
+ | |Ячейка 3*1 | ||
+ | |- | ||
+ | |Ячейка 1*2 | ||
+ | |Ячейка 2*2 | ||
+ | |Ячейка 3*2 | ||
+ | |- | ||
+ | |Ячейка 1*3 | ||
+ | |Ячейка 2*3 | ||
+ | |Ячейка 3*3 | ||
+ | |} | ||
+ | |||
+ | Табличные рамки. Вид рамки описывается в первой строке, сразу после {|. Между ними и атрибутом должен быть пробел. Толщина линий рамки задается атрибутом border=n, где «n» — толщина линии: | ||
+ | |||
+ | Пример: | ||
+ | |||
+ | Исходный код: | ||
+ | |||
+ | |||
+ | <nowiki>{| border=1</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 1*1</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 2*1</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 3*1</nowiki> | ||
+ | |||
+ | <nowiki>|-</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 1*2</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 2*2</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 3*2</nowiki> | ||
+ | |||
+ | <nowiki>|-</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 1*3</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 2*3</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 3*3</nowiki> | ||
+ | |||
+ | <nowiki>|}</nowiki> | ||
+ | |||
+ | Вид в Вики: | ||
+ | |||
+ | {| border=1 | ||
+ | |Ячейка 1*1 | ||
+ | |Ячейка 2*1 | ||
+ | |Ячейка 3*1 | ||
+ | |- | ||
+ | |Ячейка 1*2 | ||
+ | |Ячейка 2*2 | ||
+ | |Ячейка 3*2 | ||
+ | |- | ||
+ | |Ячейка 1*3 | ||
+ | |Ячейка 2*3 | ||
+ | |Ячейка 3*3 | ||
+ | |} | ||
+ | |||
+ | |||
+ | Заголовки. Чтобы содержимое ячейки выделялось жирным шрифтом и центрировалось, вместо вертикальных черточек ставятся восклицательные знаки. Обычно это применяется для выделения заголовков. | ||
+ | |||
+ | Пример: | ||
+ | |||
+ | <nowiki>{|border=1</nowiki> | ||
+ | |||
+ | <nowiki>!Первый столбец</nowiki> | ||
+ | |||
+ | <nowiki>!Второй столбец</nowiki> | ||
+ | |||
+ | <nowiki>!Третий столбец</nowiki> | ||
+ | |||
+ | <nowiki>|-</nowiki> | ||
+ | |||
+ | <nowiki>!Первая строчка</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 2*1</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 3*1</nowiki> | ||
+ | |||
+ | <nowiki>|-</nowiki> | ||
+ | |||
+ | <nowiki>!Вторая строчка</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 2*2</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 3*2</nowiki> | ||
+ | |||
+ | <nowiki>|-</nowiki> | ||
+ | |||
+ | <nowiki>!Третья строчка</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 2*3</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 3*3</nowiki> | ||
+ | |||
+ | <nowiki>|}</nowiki> | ||
+ | |||
+ | Вид в Вики: | ||
+ | |||
+ | {| border=1 | ||
+ | !Первый столбец | ||
+ | !Второй столбец | ||
+ | !Третий столбец | ||
+ | |- | ||
+ | !Первая строчка | ||
+ | |Ячейка 2*1 | ||
+ | |Ячейка 3*1 | ||
+ | |- | ||
+ | !Вторая строчка | ||
+ | |Ячейка 2*2 | ||
+ | |Ячейка 3*2 | ||
+ | |- | ||
+ | !Третья строчка | ||
+ | |Ячейка 2*3 | ||
+ | |Ячейка 3*3 | ||
+ | |} | ||
+ | |||
+ | |||
+ | Запись в одну строчку. Чтобы сделать записываемую в таблицу информацию более читабельной, можно писать ряды в одну строчку, отделяя их дополнительной вертикальной чертой. | ||
+ | |||
+ | Пример: | ||
+ | |||
+ | <nowiki>{| border=1</nowiki> | ||
+ | |||
+ | <nowiki>!Первый столбец||Второй столбец||Третий столбец</nowiki> | ||
+ | |||
+ | <nowiki>|-</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 1*1||Ячейка 2*1||Ячейка 3*1</nowiki> | ||
+ | |||
+ | <nowiki>|-</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 1*2||Ячейка 2*2||Ячейка 3*2</nowiki> | ||
+ | |||
+ | <nowiki>|-</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 1*3||Ячейка 2*3||Ячейка 3*3</nowiki> | ||
+ | |||
+ | <nowiki>|}</nowiki> | ||
+ | |||
+ | В Вики это будет выглядеть так: | ||
+ | |||
+ | {| border=1 | ||
+ | !Первый столбец||Второй столбец||Третий столбец | ||
+ | |- | ||
+ | |Ячейка 1*1||Ячейка 2*1||Ячейка 3*1 | ||
+ | |- | ||
+ | |Ячейка 1*2||Ячейка 2*2||Ячейка 3*2 | ||
+ | |- | ||
+ | |Ячейка 1*3||Ячейка 2*3||Ячейка 3*3 | ||
+ | |} | ||
+ | |||
+ | Объединение ячеек. В Вики, как и в HTML, имеется возможность объединять несколько ячеек как по вертикали, так и по горизонтали. Для объединения по вертикали применяется атрибут rowspan=n, где «n» — число ячеек, которые должна объединить данная ячейка. Этот атрибут вписывается перед содержанием объединяющей ячейки. | ||
+ | |||
+ | Вертикальное объединение двух ячеек пишется так: | ||
+ | |||
+ | <nowiki>{| border=1</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 1</nowiki> | ||
+ | |||
+ | <nowiki>|rowspan=2 |Ячейка 2, объединяет два ряда таблицы</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 3</nowiki> | ||
+ | |||
+ | <nowiki>|-</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 4</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 5</nowiki> | ||
+ | |||
+ | <nowiki>|}</nowiki> | ||
+ | |||
+ | В Вики это будет выглядеть следующим образом: | ||
+ | |||
+ | {| border=1 | ||
+ | |Ячейка 1 | ||
+ | |rowspan=2 |Ячейка 2, объединяет два ряда таблицы | ||
+ | |Ячейка 3 | ||
+ | |- | ||
+ | |Ячейка 4 | ||
+ | |Ячейка 5 | ||
+ | |} | ||
+ | |||
+ | Для объединения по горизонтали используется атрибут colspan=n. | ||
+ | |||
+ | Пример: | ||
+ | |||
+ | <nowiki>{| border=1</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 1</nowiki> | ||
+ | |||
+ | <nowiki>|colspan=2 |Ячейка 2, объединяет два столбца</nowiki> | ||
+ | |||
+ | <nowiki>|-</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 3</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 4</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 5</nowiki> | ||
+ | |||
+ | <nowiki>|}</nowiki> | ||
+ | |||
+ | Вид в Вики: | ||
+ | |||
+ | {| border=1 | ||
+ | |Ячейка 1 | ||
+ | |colspan=2 |Ячейка 2, объединяет два столбца | ||
+ | |- | ||
+ | |Ячейка 3 | ||
+ | |Ячейка 4 | ||
+ | |Ячейка 5 | ||
+ | |} | ||
+ | |||
+ | «Раскраска» таблиц. Текст, находящийся в таблице, можно сделать цветным. С этой целью применяются те же тэги, что и в HTML: | ||
+ | |||
+ | • для отдельного слова — <nowiki><font color="#ABCDEF">Teкст</font></nowiki>; | ||
+ | |||
+ | • для длинного текста — <nowiki><div style="color:#ABCDEF">Текст, текст.</div></nowiki>, где «ABCDEF» — индекс цвета в Таблице цветов (http://www.farb-tabelle.de/ru/table-of-color.htm) | ||
+ | |||
+ | Пример: | ||
+ | |||
+ | Для "раскраски" текста пишут так: | ||
+ | |||
+ | <nowiki>{| border=1</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 1*1</nowiki> | ||
+ | |||
+ | <nowiki>|Здесь цветное только <font color="#FF00FF">одно</font> слово.</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 3*1</nowiki> | ||
+ | |||
+ | <nowiki>|-</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 1*2</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 2*2</nowiki> | ||
+ | |||
+ | <nowiki>|<div style="color:#008B00">А здесь выделен цветом длинный-длинный абзац.</div></nowiki> | ||
+ | |||
+ | <nowiki>|-</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 1*3</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 2*3</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 3*3</nowiki> | ||
+ | |||
+ | <nowiki>|}</nowiki> | ||
+ | |||
+ | В Вики это будет выглядеть так: | ||
+ | |||
+ | {| 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» — индекс цвета в Таблице цветов. | ||
+ | |||
+ | Пример: | ||
+ | |||
+ | Для «раскраски» одной ячейки пишется так: | ||
+ | |||
+ | <nowiki>{| border=1</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 1*1</nowiki> | ||
+ | |||
+ | <nowiki>|bgcolor=#FFCC00|Ячейка 2*1</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 3*1</nowiki> | ||
+ | |||
+ | <nowiki>|-</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 1*2</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 2*2</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 3*2</nowiki> | ||
+ | |||
+ | <nowiki>|-</nowiki> | ||
+ | |||
+ | <nowiki>|bgcolor=#CCFF00|Ячейка 1*3</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 2*3</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 3*3</nowiki> | ||
+ | |||
+ | <nowiki>|}</nowiki> | ||
+ | |||
+ | |||
+ | Вид в Вики: | ||
+ | |||
+ | {| 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. | ||
+ | |||
+ | Пример: | ||
+ | |||
+ | <nowiki>{| border=1 width=75%</nowiki> | ||
+ | |||
+ | <nowiki>|+Таблица 1</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 1*1 - long - long- long- long- long</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 1*2</nowiki> | ||
+ | |||
+ | <nowiki>|-</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 1*3</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 1*4</nowiki> | ||
+ | |||
+ | <nowiki>|}</nowiki> | ||
+ | |||
+ | <nowiki>{| border=1 width=75%</nowiki> | ||
+ | |||
+ | <nowiki>|+Таблица 2</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 2*1</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 2*2</nowiki> | ||
+ | |||
+ | <nowiki>|-</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 2*3</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 2*4</nowiki> | ||
+ | |||
+ | <nowiki>|}</nowiki> | ||
+ | |||
+ | |||
+ | Выглядеть это будет так: | ||
+ | |||
+ | {| 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 | ||
+ | |} | ||
+ | |||
+ | |||
+ | |||
+ | С помощью этого же атрибута можно регулировать ширину отдельных столбцов: | ||
+ | + | ||
+ | Пример: | ||
+ | |||
+ | <nowiki>{| border=1 width=75%</nowiki> | ||
+ | |||
+ | <nowiki>|+Таблица 1</nowiki> | ||
+ | |||
+ | <nowiki>| width=40%|Ячейка 1*1 - long - long- long- long- long</nowiki> | ||
+ | |||
+ | <nowiki> | width=20%|Ячейка 1*2 - long - long- long- long- long</nowiki> | ||
+ | |||
+ | <nowiki>| width=40%|Ячейка 1*3 - long - long- long- long- long</nowiki> | ||
+ | |||
+ | <nowiki>|-</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 1*4</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 1*5</nowiki> | ||
+ | |||
+ | <nowiki>|Ячейка 1*6</nowiki> | ||
+ | |||
+ | <nowiki>|}</nowiki> | ||
+ | |||
+ | Вид в Вики: | ||
+ | |||
+ | {| 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. Просмотрите визитные карточки друг друга. Оставьте отзывы на странице обсуждения. | ||
+ | |||
+ | ==Литература== | ||
+ | |||
+ | 1. Круподерова Е.П. Применение сетевых сервисов Веб 2.0 в проектной деятельности студентов. Материалы Международной научно-практической конференции «Информационные технологии в организации единого образовательного пространства». – Н.Новгород, ВГИПУ, 2007. – С. 213-218. | ||
+ | |||
+ | 2. Патаракин Е.Д., Быховский Я.С., Ястребцева Е.Н. Геокешинг, Геотаггинг, Фликр, Вики-Вики, Веб-блоги и Живой журнал в образовании: Новое поколение учебных проектов городских улиц и сетевых сообществ. – М.: Институт развития образовательных технологий, 2005. – 36 с. | ||
+ | |||
+ | 3. Патаракин Е.Д., Быховский Я.С., Ястребцева Е.Н. Создание учебной гипертекстовой энциклопедии в среде ВикиВики: Общероссийский проект Летописи.ру. – М.: Институт развития образовательных технологий, 2006. – 30 с. | ||
+ | |||
+ | 4. Патаракин Е.Д. Социальные сервисы Веб 2.0 в помощь учителю. М: Интуит.ру, 2007. – 63 с. | ||
+ | |||
+ | |||
+ | |||
+ | ==Интернет источники== | ||
+ | |||
+ | # [http://letopisi.ru/index.php/Cетевые_сервисы_Веб_2.0._Учебный_курс Cетевые сервисы Веб 2.0. Учебный курс] | ||
+ | # [http://letopisi.ru/index.php/Тренинг_Практические_задания_для_учащихся_в_среде_Wiki Практический справочный материал по работе в вики-среде] | ||
+ | |||
+ | [[Категория: Учебный курс Социальные сервисы Веб 2.0]] |
Текущая версия на 11:20, 20 мая 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» — толщина линии:
Пример:
Исходный код:
{| border=1
|Ячейка 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=1
!Первый столбец
!Второй столбец
!Третий столбец
|-
!Первая строчка
|Ячейка 2*1
|Ячейка 3*1
|-
!Вторая строчка
|Ячейка 2*2
|Ячейка 3*2
|-
!Третья строчка
|Ячейка 2*3
|Ячейка 3*3
|}
Вид в Вики:
Первый столбец | Второй столбец | Третий столбец |
---|---|---|
Первая строчка | Ячейка 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
|}
В Вики это будет выглядеть так:
Первый столбец | Второй столбец | Третий столбец |
---|---|---|
Ячейка 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
|}
В Вики это будет выглядеть следующим образом:
Ячейка 1 | Ячейка 2, объединяет два ряда таблицы | Ячейка 3 |
Ячейка 4 | Ячейка 5 |
Для объединения по горизонтали используется атрибут colspan=n.
Пример:
{| border=1
|Ячейка 1
|colspan=2 |Ячейка 2, объединяет два столбца
|-
|Ячейка 3
|Ячейка 4
|Ячейка 5
|}
Вид в Вики:
Ячейка 1 | Ячейка 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
|}
В Вики это будет выглядеть так:
Ячейка 1*1 | Здесь цветное только одно слово. | Ячейка 3*1 |
Ячейка 1*2 | Ячейка 2*2 | А здесь выделен цветом длинный-длинный абзац.
|
Ячейка 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
|}
Вид в Вики:
Ячейка 1*1 | Ячейка 2*1 | Ячейка 3*1 |
Ячейка 1*2 | Ячейка 2*2 | Ячейка 3*2 |
Ячейка 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
|}
Выглядеть это будет так:
Ячейка 1*1 - long - long- long- long- long | Ячейка 1*2 |
Ячейка 1*3 | Ячейка 1*4 |
Ячейка 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*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. Просмотрите визитные карточки друг друга. Оставьте отзывы на странице обсуждения.
Литература
1. Круподерова Е.П. Применение сетевых сервисов Веб 2.0 в проектной деятельности студентов. Материалы Международной научно-практической конференции «Информационные технологии в организации единого образовательного пространства». – Н.Новгород, ВГИПУ, 2007. – С. 213-218.
2. Патаракин Е.Д., Быховский Я.С., Ястребцева Е.Н. Геокешинг, Геотаггинг, Фликр, Вики-Вики, Веб-блоги и Живой журнал в образовании: Новое поколение учебных проектов городских улиц и сетевых сообществ. – М.: Институт развития образовательных технологий, 2005. – 36 с.
3. Патаракин Е.Д., Быховский Я.С., Ястребцева Е.Н. Создание учебной гипертекстовой энциклопедии в среде ВикиВики: Общероссийский проект Летописи.ру. – М.: Институт развития образовательных технологий, 2006. – 30 с.
4. Патаракин Е.Д. Социальные сервисы Веб 2.0 в помощь учителю. М: Интуит.ру, 2007. – 63 с.