To request editing rights on the Wiki, click here.

Help:Wiki University Wikitext--Tables - Captions

From FamilySearch Wiki
Jump to navigation Jump to search

Lessons


Intermediate


Advanced


Flexbox


Additional Helps

Table captions[edit | edit source]

So far we have learned how to determine the width of our table and the type of border it will have, but we don't know what the table is about. It needs a title or a wikitext caption.

Caption tag[edit | edit source]

|+

The tag is a pipe and a plus sign: |+

  • It does not need a |- before it.

Let's call our table "Healthy Foods"

  • We will use the table with a width of 100% and the columns set at 25%.
  • Here's how the table will look with a caption:
Healthy Foods
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Oranges Beans Almonds Buckwheat
  • NOTICE the caption is now centered over the table.

Here's the coding:

{| style="border:1px solid red; width:100%"
|+ Healthy Foods
|-
| style="border:1px solid red; width:25%" | Apples
| style="border:1px solid red; width:25%" | Peas
| style="border:1px solid red; width:25%" | Peanuts
| style="border:1px solid red; width:25%" | Wheat
|-
| style="border:1px solid red" | Pears
| style="border:1px solid red" | Carrots
| style="border:1px solid red" | Walnuts
| style="border:1px solid red" | Oats
|-
| style="border:1px solid red" | Cherries
| style="border:1px solid red" | Corn
| style="border:1px solid red" | Cashews
| style="border:1px solid red" | Barley
|-
| style="border:1px solid red" | Oranges
| style="border:1px solid red" | Beans
| style="border:1px solid red" | Almonds
| style="border:1px solid red" | Buckwheat
|}


  • NOTICE all that was added was the caption tag.

Font size[edit | edit source]

<font-size:24px>
  • First notice that the caption is rather small print.

To enlarge the caption, we use our font-size attribute. Let's increase the font to 24 pixels.

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

Here's the coding for the caption:

|+ style="font-size:24px"|Healthy Foods

Change font of caption[edit | edit source]

<font-family:new times roman>
  • The font you see in the table caption is the default font. If you want to change it, we can use our font-family attribute.
  • Let's change the font to "new times roman" font.
Healthy Foods
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Oranges Beans Almonds Buckwheat


  • Here is the complete code for all the changes we have made to the caption:

{| style="border:1px solid red"
|+ style="font-size:24pt; margin-bottom:15px; font-family:new times roman" | Healthy Foods
|-
| style="border:1px solid red; width:25%" | Apples
| style="border:1px solid red; width:25%" | Peas
| style="border:1px solid red; width:25%" | Peanuts
| style="border:1px solid red; width:25%" | Wheat
|-
| style="border:1px solid red" | Pears
| style="border:1px solid red" | Carrots
| style="border:1px solid red" | Walnuts
| style="border:1px solid red" | Oats
|-
| style="border:1px solid red" | Cherries
| style="border:1px solid red" | Corn
| style="border:1px solid red" | Cashews
| style="border:1px solid red" | Barley
|-
| style="border:1px solid red" | Oranges
| style="border:1px solid red" | Beans
| style="border:1px solid red" | Almonds
| style="border:1px solid red" | Buckwheat
|}


  • AGAIN NOTICE the attributes are separated by semi-colons.
  • NOTICE Just as a reminder if you want to add space between the caption and the table use the margin-bottom attribute.

Html7.jpg

If it has not been surmised by you as yet, the order of attributes does not matter. They can be any order.

Try these out[edit | edit source]

Tests.gif
Exercises
  • Copy the table coding displayed directly above to your sandbox, then place an orange border around it in the "outset" style and with a thickness of 25 pixels.
  • Make the table 85% in width.
  • Next place a border around the cells in the first column.
  • Make all the columns the same width.
  • Install our Healthy Foods caption;
    • Font - Curlz MT
    • Font - 28pt
    • 20 pixel space between caption and top of table


Quick Quiz
  • The order of attributes is critical.
A. True
B. False
  • The caption can only be on the left side of the page
A. True
B. False
  • Only margin-bottom of the caption will cause the separation between the caption and the table
A. True
B. False