Advanced Wikiediting/Tables

If you want to start with just a few simple examples, go to: Help:Table.

{{center top}}
{| border="5" cellspacing="5" cellpadding="2" width="300" 
| style="text-align: right;" | This is right!
|-
| style="text-align: center;" | This is center.
|-
| style="text-align: left;" | This is left. 
|-
| style="text-align: justify;" | This is justified text and then more text and then more text and then even more text but always text, text, and text. As you can see, it is perfectly justified but are you justified in using justified text.
|}
{{center bottom}}

This is right!

This is center.

This is left.

This is justified text and then more text and then more text and then even more text but always text, text, and text. As you can see, it is perfectly justified but are you justified in using justified text.

.

Simple Example 5

<div align="left"> text </div>
<div align="center"> text </div>
<div align="right"> text </div>

text

.

Simple Example 6

The quick	brown fox jumped
over the
slow lazy dog.

{| border="1" cellpadding="4" cellspacing="0"
| The quick
|rowspan="2"| brown<br>fox<br>jumped
|-
| over the
|-
|colspan="2"| slow lazy dog.
|}

.

Simple Example 7

The quick	brown fox jumped
over
the
slow
and lazy dog.

{| border="1" cellpadding="4" cellspacing="0"
| The quick
|rowspan="4"| brown<br>fox<br>jumped
|-
| over
|-
| the
|-
| slow
|-
|colspan="2"| and lazy dog.
|}

1	2
3
4
5
6

.

Practical Example 1

A useful location finder for all Wikiversity pages.

{{center top}}
{| style="float: center; border: 1px #cccccc solid;"
|-
| colspan="2" align="center" bgcolor="#99ccff" | Your Current Location
|-
| bgcolor="#ccff99" | Page:
| style="border: 1px #cccccc solid;" | '''Introduction'''
|-
| bgcolor="#ccff99" | Lesson:
| style="border: 1px #cccccc solid;" | [[Filmmaking Basics/Thumbnail Storyboard|Lesson #004: Thumbnail Storyboards]]
|-
| bgcolor="#ccff99" | Course:
| style="border: 1px #cccccc solid;" | [[Filmmaking Basics|Course #01 - Basic Filmmaking]]
|-
| bgcolor="#ccff99" | Department:
| style="border: 1px #cccccc solid;" | [[Filmmaking|Narrative Film Production]]  
|-
| bgcolor="#ccff99" | Division:
| style="border: 1px #cccccc solid;" | [[Portal:Film and television|Film and Television]] 
|-
| bgcolor="#ccff99" | Portal:
| style="border: 1px #cccccc solid;" | [[Portal:Arts|Portal:Fine Arts]]
|-
| bgcolor="#ccff99" | School:
| style="border: 1px #cccccc solid;" | [[School:Art and Design|Art and Design]]
|-
| bgcolor="#ccff99" | Faculty:
| style="border: 1px #cccccc solid;" | [[Portal:Humanities|Humanities]]
|-
| bgcolor="#ccff99" | University:
| style="border: 1px #cccccc solid;" | [[Wikiversity:Main Page | Wikiversity (English)]]
|}
{{center bottom}}

Your Current Location
Page:	Introduction
Lesson:	Lesson #004: Thumbnail Storyboards
Course:	Course #01 - Basic Filmmaking
Department:	Narrative Film Production
Division:	Film and Television
Portal:	Portal:Fine Arts
School:	Art and Design
Faculty:	Humanities
University:	Wikiversity (English)

.

Practical Example 2

Table of contents

__NOTOC__
{{center top}}
{| border=1 cellspacing=0 cellpadding=30 bordercolor="yellow" width="94%"
| bgcolor="#ffffe0" |
; [[Music in film|Topic:Music in Film]]:
:[[Film Scoring|Mad Max's Course in Film Scoring for Motion Pictures]]
;Lesson:[[Image:Crystal Clear app knotify.png|right|200px]]
:[[Film Scoring/Melody/Creating the sound of fear|Lesson #01: Creating the sound of "Fear"]]

;Pages of this Lesson: 
:{| cellpadding="4" cellspacing="0" width="350px"
| bgcolor="#eeeeff" style="border: 1px #cccccc solid;" |Page 1: [[Film Scoring/Melody/Creating the sound of fear|Introduction - The Secret of Motion Pictures]]
|}

:{| cellpadding="4" cellspacing="0" width="350px"
| bgcolor="#eeeeff" style="border: 1px #cccccc solid;" |Page 2: [[Film Scoring/Theory of Film Scoring/What is Narrative Music?|What is narrative music?]]
|}

:{| cellpadding="4" cellspacing="0" width="350px" 
| bgcolor="#eeeeff" style="border: 1px #cccccc solid;" |Page 3: [[Mad Max's - Computer Set Up for Film Scoring | What computer software do I need?]]
|}

:{| cellpadding="4" cellspacing="0" width="350px" 
| bgcolor="#eeeeff" style="border: 1px #cccccc solid;" |Page 4: [[GarageBand/Getting Started|Getting started with GarageBand]]
|}

:{| cellpadding="4" cellspacing="0" width="350px" 
| bgcolor="#eeeeff" style="border: 1px #cccccc solid;" |Page 5: [[Mad Max's - Assignments in Film Scoring | List of moods and actions for you to work on]]
|}

:{| cellpadding="4" cellspacing="0" width="350px" 
| bgcolor="#eeeeff" style="border: 1px #cccccc solid;" |Page 6: [[Mad Max's - Student's Narrative Music | Narrative music created by Mad Max's students]] 
|}

:{| cellpadding="4" cellspacing="0" width="350px" 
| bgcolor="#f0ffff" style="border: 1px #cccccc solid;" |Supplemental A: [[Film Scoring/Theory of Film Scoring/Examples of Narrative Music|Examples of Narrative Music]]
|}

:{| cellpadding="4" cellspacing="0" width="350px" 
| bgcolor="#f0ffff" style="border: 1px #cccccc solid;" |Supplemental B: [[Film Scoring/Movie Scoring Projects|A simple movie for scoring]]
|}
|}

{{center bottom}}

Topic:Music in Film:: Mad Max's Course in Film Scoring for Motion Pictures
Lesson:: Lesson #01: Creating the sound of "Fear"

Pages of this Lesson:

Page 1: Introduction - The Secret of Motion Pictures

Page 2: What is narrative music?

Page 3: What computer software do I need?

Page 4: Getting started with GarageBand

Page 5: List of moods and actions for you to work on

Page 6: Narrative music created by Mad Max's students

Supplemental A: Examples of Narrative Music

Supplemental B: A simple movie for scoring

.

Practical Example 3

{{center top}}
{| border=1 cellspacing=0 cellpadding=10
| colspan="2" align="center" bgcolor="#ccfffe" | This lesson should take '''only 15 minutes''' to draw the thumbnail storyboards with pencil and paper.  <!--If you spend more than this, you are trying too hard.-->
|-
| bgcolor="#ffff99" |
{{center top}}<big> Problem </big>{{center bottom}}
| bgcolor="#ffffdd" |
It takes too long to get the thumbnail drawings into the computer.
|- 
| bgcolor="#99ffff" | 
{{center top}}<big> Solution #1</big>{{center bottom}}
| bgcolor="#eeffff" | 
Mail me your pencil and paper storyboard sketches.
|- 
| bgcolor="#99ffff" | 
{{center top}}<big> Solution #2</big>{{center bottom}}
| bgcolor="#eeffff" | 
Tell me the numbers of the [[Filmmaking Basics/Thumbnail Storyboard/Storyboard frames|Thumbnail Examples]] which match your storyboards. 
|}
{{center bottom}}

This lesson should take only 15 minutes to draw the thumbnail storyboards with pencil and paper.
Problem	It takes too long to get the thumbnail drawings into the computer.
Solution #1	Mail me your pencil and paper storyboard sketches.
Solution #2	Tell me the numbers of the Thumbnail Examples which match your storyboards.

.

Practical Example 5

This is a film strip.

{| cellpadding="0" cellspacing="5" style="width: 500px; background-color: #e0e0ff; margin-left: auto; margin-right: auto"
| style="width: 100%; background-color: white; border: 1px solid #777777; vertical-align: top; -moz-border-radius-topleft: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-bottomright: 8px;" |
{| cellpadding="0" cellspacing="0" style="width: 100%; height: 4px; background-color: inherit"
|}
{| cellpadding="0" cellspacing="0" style="width: 600px; height: 10px; background-color: inherit"
{{Film strip holes artwork table}}
|}
{| cellpadding="0" cellspacing="0" style="width: 100%; height: 4px; background-color: inherit"
|}
{| cellpadding="0" cellspacing="1" style="width: 100%; height: 80px; background-color: inherit"
| style="background-color: #ffffe0; border: 1px solid #777777; width: 20%; height: 20px;" |{{center top}}1031{{center bottom}}
| style="background-color: white; border: 1px solid #777777; width: 60%;" |

| style="background-color: #ffffe0; border: 1px solid #777777; width: 20%;" |{{center top}}1075{{center bottom}}
|}
{| cellpadding="0" cellspacing="0" style="width: 600px; height: 4px; background-color: inherit"
|}
{| cellpadding="0" cellspacing="0" style="width: 600px; height: 10px; background-color: inherit"
{{Film strip holes artwork table}}
|}
{| cellpadding="0" cellspacing="0" style="width: 100%; height: 4px; background-color: inherit"
|}
|}

1031

1075

Practical Example 6

This is an empty table.

{{center top}}
{| border=1 cellspacing=0 cellpadding=10 width="90%" style="border: orangered solid 4px; text-align: center;"
| style="width: 40%; background-color: #ffffe0; border: 4px solid blue;"| Text

|}
{{center bottom}}

Text

---

.

---

.

Practical Example 8

This is tables within a table.

{| cellpadding="10" cellspacing="5" style="width: 95%; background-color: inherit; margin-left: auto; margin-right: auto"
| style="width: 60%; background-color: #ffffe0; border: 1px solid #777777; vertical-align: top; -moz-border-radius-topleft: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-bottomright: 8px;" rowspan="2" |
[[File:Crystal128-staroffice.svg|right|128px]]
==Left==
| style="width: 40%; background-color: #e0e0ff; border: 1px solid #777777; vertical-align: top; -moz-border-radius-topleft: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-bottomright: 8px; height: 10px;" |
[[Image:Crystal Clear app windows users.png|right|128px]]
==Right==

|}

Left

Right

.

Practical Example 9

A simple framework

{| cellpadding="10" cellspacing="5" style="width: 95%; background-color: inherit; margin-left: auto; margin-right: auto"
! style="background-color: #ffffaa; border: 1px solid #777777; -moz-border-radius-topleft: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-bottomright: 8px;" colspan="2" | Title

|-
| style="width: 60%; background-color: #ffffe0; border: 1px solid #777777; vertical-align: top; -moz-border-radius-topleft: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-bottomright: 8px;" rowspan="2" |
== Left ==

| style="width: 40%; background-color: #EFFFEF; border: 1px solid #777777; vertical-align: top; -moz-border-radius-topleft: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-bottomright: 8px; height: 10px;" |

== Right ==

|}
{| cellpadding="10" cellspacing="5" style="width: 95%; background-color: inherit; margin-left: auto; margin-right: auto"
| style="background-color: #e0e0ff; border: 1px solid #777777; -moz-border-radius-topleft: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-bottomright: 8px;" colspan="2" | 
==Full==
|}
{| cellpadding="10" cellspacing="5" style="width: 95%; background-color: inherit; margin-left: auto; margin-right: auto"
| style="background-color: white; border: 1px solid #777777; -moz-border-radius-topleft: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-bottomright: 8px;" colspan="2" | 
==Full 2==
|}

Title
Left edit	Right edit

Full

Full 2

.

Practical Example 11


<div style="margin-left: auto; margin-right: auto; width:80%">
<div style="background-color:#f7f8ff; text-align:justify; padding:5px; border:1px solid #8888aa; border-right-width:2px; border-bottom-width:2px; margin-bottom:2em" >

[[Image:Crystal_Clear_app_kaddressbook.png|left|50px|Please help]]
Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.
</div>
</div>

Please help

Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.

Picture is 150px rather than 50px.

Please help

Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.

Practical Example 12

{{center top}}
{| cellpadding="3" cellspacing="0"
| style="background:red; color:blue" | . 
| style="background:red; color:white" | <big>Start Here: </big>
| style="background:red; color:red" | . 
| style="background:#fffff0; color:red" | →  
| style="background:#ffffff; border: 3px solid yellow; vertical-align: top; -moz-border-radius-topleft: 4px; -moz-border-radius-bottomleft: 4px; -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px;" | <big>[[Filmmaking Basics/Formatting the Script|First lesson: Formatting the movie script]].</big>
|}
{{center bottom}}

.

Start Here:

.

→

First lesson: Formatting the movie script.

.

Second page of this help page for tables

TOP LEFT	TOP RIGHT
BOTTOM LEFT	BOTTOM RIGHT

Advanced Wikiediting/Tables

Contents

Table of contents

Simple Example 1

Simple Example 2

Simple Example 3

Simple Example 4

Simple Example 5

Simple Example 6

Simple Example 7

Practical Example 1

Practical Example 2

Practical Example 3

Practical Example 5

Practical Example 6

Practical Example 8

Left

Right

Practical Example 9

Left

Right

Full

Full 2

Practical Example 11

Practical Example 12

See also

This	is
a	table

This	is
a	table