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

Материал из Wiki Mininuniver
Перейти к навигацииПерейти к поиску
 
(не показано 5 промежуточных версий 1 участника)
Строка 15: Строка 15:
 
Исходный код таблицы с одной строкой
 
Исходный код таблицы с одной строкой
  
−
{|
+
<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>
  
−
|Ячейка 1
+
<nowiki>|Ячейка 1*2</nowiki>
  
−
|Ячейка 2
+
<nowiki>|Ячейка 2*2</nowiki>
  
−
|Ячейка 3
+
<nowiki>|Ячейка 3*2</nowiki>
  
−
|}
+
<nowiki>|}</nowiki>
  
 
В Вики это будет выглядеть так:
 
В Вики это будет выглядеть так:
−
 
−
Ячейка 1 Ячейка 2 Ячейка 3
 
−
Для введения следующей строки после вертикальной черточки ставится штрих «-». Таким образом можно вводить любое количество строк.
 
  
−
Пример:  
+
{|
 +
|Ячейка 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>
−
|Ячейка 1*1
 
−
|Ячейка 2*1
 
−
|Ячейка 3*1
 
−
|-
 
−
|Ячейка 1*2
 
−
|Ячейка 2*2
 
−
|Ячейка 3*2
 
−
|}
 
  
−
В Вики это будет выглядеть так:
+
<nowiki>|Ячейка 3*2</nowiki>
  
−
Ячейка 1*1 Ячейка 2*1 Ячейка 3*1
+
<nowiki>|-</nowiki>
−
Ячейка 1*2 Ячейка 2*2 Ячейка 3*2
 
  
−
Таблица в три строки пишется так:
+
<nowiki>|Ячейка 1*3</nowiki>
  
−
{|
+
<nowiki>|Ячейка 2*3</nowiki>
−
|Ячейка 1*1
 
−
|Ячейка 2*1
 
−
|Ячейка 3*1
 
−
|-
 
−
|Ячейка 1*2
 
−
|Ячейка 2*2
 
−
|Ячейка 3*2
 
−
|-
 
−
|Ячейка 1*3
 
−
|Ячейка 2*3
 
−
  |Ячейка 3*3
 
−
|}
 
  
−
Соответственно, в Вики это выглядит так:
+
<nowiki>|Ячейка 3*3</nowiki>
  
−
Ячейка 1*1 Ячейка 2*1 Ячейка 3*1
+
<nowiki>|}</nowiki>
−
Ячейка 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=n, где «n» — толщина линии:
Строка 75: Строка 115:
 
Пример:  
 
Пример:  
  
−
Исходный код:                                               Вид в Вики:
+
Исходный код:
 +
 
 +
                                             
 +
<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
 
{| border=1
 
  |Ячейка 1*1
 
  |Ячейка 1*1
Строка 89: Строка 159:
 
  |Ячейка 3*3
 
  |Ячейка 3*3
 
  |}
 
  |}
 +
  
 
Заголовки. Чтобы содержимое ячейки выделялось жирным шрифтом и центрировалось, вместо вертикальных черточек ставятся восклицательные знаки. Обычно это применяется для выделения заголовков.
 
Заголовки. Чтобы содержимое ячейки выделялось жирным шрифтом и центрировалось, вместо вертикальных черточек ставятся восклицательные знаки. Обычно это применяется для выделения заголовков.
Строка 94: Строка 165:
 
Пример:
 
Пример:
  
−
{| border=1                                                   Вид в Вики:        
+
<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                                                           
 
  !Первый столбец  
 
  !Первый столбец  
 
  !Второй столбец
 
  !Второй столбец
Строка 111: Строка 218:
 
  |Ячейка 3*3
 
  |Ячейка 3*3
 
  |}
 
  |}
 +
  
 
Запись в одну строчку. Чтобы сделать записываемую в таблицу информацию более читабельной, можно писать ряды в одну строчку, отделяя их дополнительной вертикальной чертой.
 
Запись в одну строчку. Чтобы сделать записываемую в таблицу информацию более читабельной, можно писать ряды в одну строчку, отделяя их дополнительной вертикальной чертой.
Строка 116: Строка 224:
 
Пример:
 
Пример:
  
 +
<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
 
{| border=1
 
  !Первый столбец||Второй столбец||Третий столбец
 
  !Первый столбец||Второй столбец||Третий столбец
Строка 126: Строка 254:
 
  |}
 
  |}
  
−
В Вики это будет выглядеть так:        
+
Объединение ячеек. В Вики, как и в HTML, имеется возможность объединять несколько ячеек как по вертикали, так и по горизонтали. Для объединения по вертикали применяется атрибут rowspan=n, где «n» — число ячеек, которые должна объединить данная ячейка. Этот атрибут вписывается перед содержанием объединяющей ячейки.
 +
 
 +
Вертикальное объединение двух ячеек пишется так:
 +
 
 +
<nowiki>{| border=1</nowiki>
 +
 
 +
<nowiki>|Ячейка 1</nowiki>
 +
 +
<nowiki>|rowspan=2 |Ячейка 2, объединяет два ряда таблицы</nowiki>
 +
 
 +
<nowiki>|Ячейка 3</nowiki>
 +
 
 +
<nowiki>|-</nowiki>
 
   
 
   
 +
<nowiki>|Ячейка 4</nowiki>
  
−
Объединение ячеек. В Вики, как и в HTML, имеется возможность объединять несколько ячеек как по вертикали, так и по горизонтали. Для объединения по вертикали применяется атрибут rowspan=n, где «n» — число ячеек, которые должна объединить данная ячейка. Этот атрибут вписывается перед содержанием объединяющей ячейки.
+
<nowiki>|Ячейка 5</nowiki>
 +
 
 +
<nowiki>|}</nowiki>
  
−
Вертикальное объединение двух ячеек пишется так:
+
В Вики это будет выглядеть следующим образом:        
  
 
{| border=1
 
{| border=1
Строка 142: Строка 285:
 
  |}
 
  |}
  
−
В Вики это будет выглядеть следующим образом:        
+
Для объединения по горизонтали используется атрибут 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>
  
−
Для объединения по горизонтали используется атрибут colspan=n.
+
<nowiki>|}</nowiki>
  
−
Пример:
+
Вид в Вики:        
  
 
{| border=1
 
{| border=1
Строка 158: Строка 315:
 
  |Ячейка 5
 
  |Ячейка 5
 
  |}
 
  |}
−
 
−
Вид в Вики:         
 
−
 
−
 
  
 
«Раскраска» таблиц. Текст, находящийся в таблице, можно сделать цветным. С этой целью применяются те же тэги, что и в HTML:
 
«Раскраска» таблиц. Текст, находящийся в таблице, можно сделать цветным. С этой целью применяются те же тэги, что и в HTML:
 
   
 
   
−
• для отдельного слова — <font color="#ABCDEF">Teкст</font>;
+
• для отдельного слова — <nowiki><font color="#ABCDEF">Teкст</font></nowiki>;
 
   
 
   
−
• для длинного текста — <div style="color:#ABCDEF">Текст, текст.</div>, где «ABCDEF» — индекс цвета в Таблице цветов (http://www.farb-tabelle.de/ru/table-of-color.htm)
+
• для длинного текста — <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
 
{| border=1
Строка 187: Строка 368:
 
  |}
 
  |}
  
−
В Вики это будет выглядеть так:        
+
Сделать цветную ячейку можно с помощью атрибута «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>
  
−
Сделать цветную ячейку можно с помощью атрибута «bgcolor=#ABCDEF», где «ABCDEF» — индекс цвета в Таблице цветов.
+
<nowiki>|}</nowiki>
  
−
Пример:
 
  
−
Для «раскраски» одной ячейки пишется так:
+
Вид в Вики:        
  
 
{| border=1
 
{| border=1
Строка 210: Строка 416:
 
  |Ячейка 3*3
 
  |Ячейка 3*3
 
  |}
 
  |}
−
 
−
Вид в Вики:         
 
  
  
Строка 219: Строка 423:
 
   
 
   
 
Пример:
 
Пример:
 +
 +
<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%
 
{| border=1 width=75%
Строка 237: Строка 476:
 
  |}
 
  |}
  
−
Выглядеть это будет так:
 
  
  
 +
С помощью этого же атрибута можно регулировать ширину отдельных столбцов:
 +
+
 +
Пример:
 +
 +
<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%
 
{| border=1 width=75%
Строка 259: Строка 515:
 
  |}
 
  |}
  
−
Вид в Вики:         
 
  
 +
Задание 1. Найдите на страницах Летописи.ру примеры интересных таблиц (например, Шаблон:ВикиУниверситет). Разберитесь с Вики-кодом в них.
 +
 +
Задание 2. Добавьте в свою визитную карточку участника какую-либо интересную таблицу (свое портфолио, электронную зачетную книжку, календарь важных дат и др.)
 +
 +
Задание 3. Просмотрите визитные карточки друг друга. Оставьте отзывы на странице обсуждения.
 +
 +
==Литература==
 +
 +
1. Круподерова Е.П. Применение сетевых сервисов Веб 2.0 в проектной деятельности студентов. Материалы Международной научно-практической конференции «Информационные технологии в организации единого образовательного пространства». –  Н.Новгород, ВГИПУ, 2007. – С. 213-218.
 +
 +
2. Патаракин  Е.Д., Быховский Я.С., Ястребцева Е.Н. Геокешинг, Геотаггинг, Фликр, Вики-Вики, Веб-блоги и Живой журнал в образовании: Новое поколение учебных проектов городских улиц и сетевых сообществ. – М.: Институт развития образовательных технологий, 2005. – 36 с.
  
 +
3. Патаракин Е.Д., Быховский Я.С., Ястребцева Е.Н. Создание учебной гипертекстовой энциклопедии в среде ВикиВики: Общероссийский проект Летописи.ру. – М.: Институт развития образовательных технологий, 2006. – 30 с.
 +
 +
4. Патаракин Е.Д. Социальные сервисы Веб 2.0 в помощь учителю. М: Интуит.ру, 2007. – 63 с.
  
  
−
Задание 1. Найдите на страницах Летописи.ру примеры интересных таблиц (например, Шаблон:ВикиУниверситет). Разберитесь с Вики-кодом в них.
 
  
−
Задание 2. Добавьте в свою визитную карточку участника какую-либо интересную таблицу (свое портфолио, электронную зачетную книжку, календарь важных дат и др.)
+
==Интернет источники==
  
−
Задание 3. Просмотрите визитные карточки друг друга. Оставьте отзывы на странице обсуждения.
+
# [http://letopisi.ru/index.php/Cетевые_сервисы_Веб_2.0._Учебный_курс Cетевые сервисы Веб 2.0. Учебный курс]
 +
# [http://letopisi.ru/index.php/Тренинг_Практические_задания_для_учащихся_в_среде_Wiki Практический справочный материал по работе в вики-среде]
  
 
[[Категория: Учебный курс Социальные сервисы Веб 2.0]]
 
[[Категория: Учебный курс Социальные сервисы Веб 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*1 - long - long- long- long- long Ячейка 1*2
Ячейка 1*3 Ячейка 1*4
Таблица 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
Ячейка 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 с.


Интернет источники

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