Advanced Wikiediting/Tables

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

Table of contents

edit
 
Table of Contents
Simple
Example
1
2 3 4 5 6 7
 


Simple Example 1

edit
{{center top}}
{| border=1 cellspacing=5 cellpadding=5
| This
| is
|- 
| a
| '''table'''
|}
{{center bottom}}
This is
a table


.



Simple Example 2

edit
{{center top}}
{| border=1 cellspacing=0 cellpadding=5|| style="width:200px"
| bgcolor="#ccff99" | This
| bgcolor="#ececec" | is
|- 
| bgcolor="#99ccff" | a
| bgcolor="red" | {{font|color=green|{{center top}}'''table'''{{center bottom}}}}
|}
{{center bottom}}
This is
a table


.




Simple Example 3

edit
{{center top}}
{| bgcolor="whitesmoke" style="border: DarkGreen solid 1px; text-align: center;"
|- style="color: black;"
| bgcolor="red"  |TOP LEFT
| bgcolor="yellow" |TOP RIGHT
|- style="color: white;"
| bgcolor="green" |BOTTOM LEFT
| bgcolor="blue" |BOTTOM RIGHT
|}
{{center bottom}}
TOP LEFT TOP RIGHT
BOTTOM LEFT BOTTOM RIGHT


.



Simple Example 4

edit
{{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

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


text
text
text

.




Simple Example 6

edit
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

edit
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

edit

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

edit

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}}


.




Practical Example 3

edit
{{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

edit

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

edit

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

edit

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

edit
 
edit



.




Practical Example 9

edit

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

edit

Full 2

edit


.





Practical Example 11

edit

<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.

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

edit
{{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}}


.


Second page of this help page for tables

See also

edit