Wikitext - Lesson ThreeEdit This Page

From FamilySearch Wiki

Missionary Training Lessons

Learn Wikitext by small steps with homework to practice what you are learning.

Lesson One > Lesson Two > Wikitext - Lesson Three > Wikitext - Lesson Four

Elements

This is the HTML code

FamilySearch Wiki
Attributes
Attributes go inside Element tags


Contents

What you will learn in Wikitext - Lesson Three

  • Where to find images in FamilySearch Wiki
  • Create a caption for an table
  • How to create tables
  • How to position tables
  • How to size tables
  • How to size columns

<fck:hr>

Table borders

  • Here is the table that was created in Lesson Two
Apples Peas Walnuts Oats
Orange Carrots Almonds Barley
Pears Corn Peanuts Wheat
Cherries Beans Cashews Buckwheat
  • The table needs a border.
  • To create a border around our table, add to the table tag {| the following coding:
style="border:1px solid black; "

The table tag now looks like this:

{| style="border: 1px solid black;"
  • Here is the table with a border:
Apples Peas Walnuts Oats
Orange Carrots Almonds Barley
Pears Corn Peanuts Wheat
Cherries Beans Cashews Buckwheat

<fck:hr>

How to add caption to tables

  • Tables need titles to tell you what it is about.
  • To place a title on a table you use the |+ symbols.
  • It goes right under the table start tag like so:

{|
|+ Healthy Foods

Healthy Foods
Apples Peas Walnuts Oats
Orange Carrots Almonds Barley
Pears Corn Peanuts Wheat
Cherries Beans Cashews Buckwheat

<fck:hr>

How to add headings to table columns

  • Table need column headings to tell what the columns are about.
  • To place a column heading you use the exclamation mark !symbol.
  • Since there are four columns you need four exclamation marks.
  • The exclamation marks follow a row tag |- (row tag) as does the cell tags |.
  • It will look like so:

{|
|+ Healthy Foods
|-
! Fruits
! Vegetables
! Nuts
! Grains

Healthy Foods
Fruits Vegetables Nuts Grains
Apples Peas Walnuts Oats
Orange Carrots Almonds Barley
Pears Corn Peanuts Wheat
Cherries Beans Cashews Buckwheat
  • Notice the columns headings are in bold text.

Inline Style Attributes

To put a border around the above table we installed this coding:

{| style="border: 1px solid black;"
  • Before, we go on, let's break down the coding. You will use this coding many times in editing.
  • The coding is called Inline Style Attributes.
    • Because the coding is on one line it is referred to as inline style.
    • The attribute in these case is: border
    • It is introduced by: style=
    • The attribute is enclosed by quotation marks.
  • The attribute is border, but to give it character it requires property and value.
  • Notice that the value in our border attribute has three parts:
  • 1px this tells the thickness of the line.
  • solid this tells the character of the line. It could be dashed, dotted, doubled, etc.
  • black this tells the color of the border.
  • There are no punctuation between these values, only spaces.
  • To perhaps to make the concept of attributes with their properties and values more clear, let's use more familiar terms. To describe a person we might state their physical attributes in the property:value form like so:
eyecolor:blue or hair:none or height:six feet

If these three attributes were put in our {| tag our element would look like this:

{| style="eyecolor:blue; hair:none; height:six feet"|}
  • Notice: semi-colons separate the individual attributes.

Width Attribute

  • To control the width of items on a page, lets discuss the width attribute.
  • If we want to make the table wider than it is we add the following attribute to the coding already in place:
width:100%
  • The coding now looks like this:
{| style="border: 1px solid black; width:100%"
  • The width is 100% of the width of the page and looks like this:
Healthy Foods
Fruits Vegetables Nuts Grains
Apples Peas Walnuts Oats
Orange Carrots Almonds Barley
Pears Corn Peanuts Wheat
Cherries Beans Cashews Buckwheat
  • Here we used a width of 100% but you can reduce the percentage of state the width in exact pixels if you want.
  • If you want the table to only be 300 pixels wide substitute 300px for 100%.
  • You can also control the width of the columns by inserting the coding in the header cells.

Align Attribute

  • To position text on a page you use the align attribute.
  • The caption for our table is aligned on the left side of the page.
  • If we want to center it over the table, we add the following code to the caption Line |+.

It will look like this:

|+ style="text-align:center"|Healthy Foods
  • Notice the pipe | separating the coding from the caption Healthy Foods.
  • Our table now looks like this:
Healthy Foods
Fruits Vegetables Nuts Grains
Apples Peas Walnuts Oats
Orange Carrots Almonds Barley
Pears Corn Peanuts Wheat
Cherries Beans Cashews Buckwheat
  • If we wanted to center the column headings we could install the text alignment by each of headers like so:

! style="text-align:center"|Fruits
 ! style="text-align:center"|Vegetables
 ! style="text-align:center"|Nuts
 ! style="text-align:center"|Grains

  • Our table would now look like this:
Healthy Foods
Fruits Vegetables Nuts Grains
Apples Peas Walnuts Oats
Orange Carrots Almonds Barley
Pears Corn Peanuts Wheat
Cherries Beans Cashews Buckwheat
  • Notice that the headings are now in the center of the columns.
  • Here is the coding for the caption and column heading in our table so far:

{| style="border: 1px solid black;"
|+ style="text-align:center"|Healthy Foods
|-
 ! style="text-align:center"|Fruits
 ! style="text-align:center"|Vegetables
 ! style="text-align:center"|Nuts
 ! style="text-align:center"|Grains


Font Size

  • Our caption is now centered but it is small font.
  • You might want to make the caption larger.
  • We do that with the font-size attribute.

Lets increase the size of the caption to 24 pixels high.

Healthy Foods
Fruits Vegetables Nuts Grains
Apples Peas Walnuts Oats
Orange Carrots Almonds Barley
Pears Corn Peanuts Wheat
Cherries Beans Cashews Buckwheat
  • Here is the additional coding to put in the caption tag:

|+ style="text-align:center;font-size:24px;"|Healthy Foods


Margins

  • You will notice that the caption is overlapping the top of the table.
  • There should be a little space between the caption and the top of the table.
  • That is done with the margin attribute.
  • To the table tag {| add the following coding.
  • margin-bottom:10px
Healthy Foods
Fruits Vegetables Nuts Grains
Apples Peas Walnuts Oats
Orange Carrots Almonds Barley
Pears Corn Peanuts Wheat
Cherries Beans Cashews Buckwheat

Padding

  • What if we think that the individual cells in the table need to be larger to create more space between the items in the table.
  • Here we will use the padding attribute.

Lets put 10px of padding around all the column headings.

  • Here what the coding will look like:

! style="text-align:center; padding:3px; "|Fruits

Healthy Foods
Fruits Vegetables Nuts Grains
Apples Peas Walnuts Oats
Orange Carrots Almonds Barley
Pears Corn Peanuts Wheat
Cherries Beans Cashews Buckwheat

Colors - Background

  • What if we wanted to alternate the colors of the rows to better separate them from each other
  • To install colors we use the following coding in the rows tags like so:
|- style="background-color:lightblue"
  • If we alternate the colors of the rows of the table it will look like this:
Healthy Foods
Fruits Vegetables Nuts Grains
Apples Peas Walnuts Oats
Orange Carrots Almonds Barley
Pears Corn Peanuts Wheat
Cherries Beans Cashews Buckwheat
  • The names of colors have been standardized.
  • Click here for a complete list of names for colors that the wiki will recognize.
  • Rather than use names you can also use HEX codes as well. You will see HEX codes for color quite often in the wiki. You might want to get use to using them instead of the names.
  • Background color attributes can be used on whole tables, blocks of text, etc. You will often see boxes with text on them with background colors installed. These boxes might be templates.



 

Need wiki, indexing, or website help? Contact our product teams.


Did you find this article helpful?

You're invited to explain your rating on the discussion page (you must be signed in).

  • This page was last modified on 24 April 2015, at 22:58.
  • This page has been accessed 2,092 times.