Help:Wiki University HTML-- Tables - Captions

From FamilySearch Wiki
Jump to: navigation, search
MAIN PAGE
WIKI
WIKITEXT
HTML/CSS
FAMILY HISTORY CENTERS
VISUAL EDITOR

Lessons


Flexbox/CSS Grid

Additional Helps

TABLE CAPTIONS

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

CAPTION TAG

This is a caption tag: <caption>

Let's call our table "Heathy 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
Orange Beans Almonds Buckwheat
  • NOTICE the caption is not centered over the table.

Here's the coding:

<table style="border:1px solid red">
<caption>Health Foods</caption>
<tr>
<td style="border:1px solid red; width:25%">Apples</td>
<td style="border:1px solid red; width:25%">Peas</td>
<td style="border:1px solid red; width:25%">Peanuts</td>
<td style="border:1px solid red; width:25%">Wheat</td>
</tr>
<tr>
<td style="border:1px solid red">Pears</td>
<td style="border:1px solid red">Carrots</td>
<td style="border:1px solid red">Walnuts</td>
<td style="border:1px solid red">Oats</td>
</tr>
<tr>
<td style="border:1px solid red">Cherries</td>
<td style="border:1px solid red">Corn</td>
<td style="border:1px solid red">Cashews</td>
<td style="border:1px solid red">Barley</td>
</tr>
<tr>
<td style="border:1px solid red">Oranges</td>
<td style="border:1px solid red">Beans</td>
<td style="border:1px solid red">Almonds</td>
<td style="border:1px solid red">Buckwheat</td>
</tr>
</table>


  • NOTICE all that was added was the caption tag.
  • NOTICE that the caption tag does not need to be enclosed between row tags.

FONT SIZE

  • First notice that the caption is rather small print.
  • Again, that it is aligned to the left of the page.

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

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

Here's the coding for the caption:

<caption style="font-size:24pt">Healthy Foods</caption>

CENTER CAPTION

  • If you want to center the caption, we use our text-align:center attribute:
Healthy Foods
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Orange Beans Almonds Buckwheat

SPACE BETWEEN CAPTION AND TABLE

  • Notice that the caption is overlapping the top of the table. We need to put a space between the caption and the table.
  • Here we use our margin-bottom attribute. Let's put a 15 pixel space between the two.
Healthy Foods
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Orange Beans Almonds Buckwheat
  • This looks better.

CHANGE FONT OF CAPTION

  • 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
Orange Beans Almonds Buckwheat
  • Here is the complete code for all the changes we have made to the caption:

<table style="border:1px solid red">
<caption style="font-size:24pt;
text-align:center;
margin-bottom:15px;
font-family:new times roman">Healthy Foods</caption>
<tr>
<td style="border:1px solid red; width:25%">Apples</td>
<td style="border:1px solid red; width:25%">Peas</td>
<td style="border:1px solid red; width:25%">Peanuts</td>
<td style="border:1px solid red; width:25%">Wheat</td>
</tr>
<tr>
.
.
.
.
</table> style="border:1px solid red"


  • AGAIN NOTICE the attributes are separated by semi-colons.

Html7.jpg

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

HTML AND WIKITEXT

HTML Wikitext

<caption style="font-size:24pt; text-align:center;
margin-bottom:15px;
font-family:new times roman">Healthy Foods</caption>

|+ style="font-size:24pt;
text-align:center;
margin-bottom:15px;
font-family:new times roman" | Healthy Foods

TRY THESE OUT . . . . .

Tests.gif
Exercises
  • With our above table place a orange border, "outset" style and 25 pixels thick.
  • 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 - Curtz MT
    • Font - 28pt
    • Center caption
    • 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

Navigation menu