HTML and Wikitext - Lesson Two

From FamilySearch Wiki
Jump to: navigation, search

Lesson One > HTML and Wikitext - Lesson Two > Lesson Three > Lesson Four > Lesson Five > Lesson Six > Lesson Seven

Attributes
Attributes go inside Element tags
Elements

This is the HTML code

FamilySearch Wiki


What you will learn in this lesson

  • How to add a title to a table.
  • How to center text with text-align.
  • How to change the size of text with font-size.
  • How put space between objects with margins.
  • How to install column headings in tables with <th> tags
  • How to make sortable tables.
  • How to give background colors to tables, rows and cells.
  • How to create space between data and the borders of cells and tables.

Table Title - Captions

  • A table should have a title so we know what it is about. Lets give our table a name and a blessing.
  • To place a label on our little table, you install a set of <caption> </caption> tags.
  • These tags follow the <table> element.
  • This is what you type if you want to call our table "Healthy Foods"
  • Let make our table the full width of the page and make the border black again.
HTML Wikitext

<table style=
border:1px solid black;
width:100%”
>

<caption>Healthy Foods</caption>

{| style=
border:1px solid black;
width:100%”


|+ Healthy Foods

Html7.jpg

  • Note: |+ does not require a closing tag.
  • Does not require a |- to come before it either.
  • Here's our table with it's title.
Healthy Foods
Apples Peas Walnuts Oats
Orange Carrots Almonds Barley
Pears Corn Peanuts Wheat
Cherries Beans Cashews Buckwheat

Center Title

  • You will notice that after you save the page, the title is not centered above the table.
  • Use the text-align attribute that was described in lesson one in the beginning caption tag like so:
HTML Wikitext

<table style=
border:1px solid black;
width:100%”
>

<caption style=”text-align:center”>Healthy Foods
</caption>

{| style=
border:1px solid black;
width:100%”


|+ style=”text-align:center”|Healthy Foods


  • Again notice the pipe in the Wikitext between the attribute and the title.
  • So our homework assignment will now have a centered title:
Healthy Foods
Apples Peas Walnuts Oats
Orange Carrots Almonds Barley
Pears Corn Peanuts Wheat
Cherries Beans Cashews Buckwheat

Font-size

  • Our table has a title but it is not very noticeable.
  • To increase the size of a font, we use the font-size attribute with its property and value.
  • Let's say we want the title to be 24 pixels high.
  • We install font-size:36px in the beginning <caption> tag.
  • The caption element now looks like this:
HTML Wikitext

<table style=
border:1px solid black;
width:100%”
>

<caption style="
text-align:center;
font-size:36px"
>Healthy Foods
</caption>

{| style=
border:1px solid black;
width:100%”


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

  • Here's what the table looks like now:
Healthy Foods
Apples Peas Walnuts Oats
Orange Carrots Almonds Barley
Pears Corn Peanuts Wheat
Cherries Beans Cashews Buckwheat

Margins

  • Notice that the title is overlapping the border of the table.
  • How do we put a space between the title and the table itself?
  • We use the margin attribute with its properties and values.
  • Margins have properties and values such as:
  • margin-top
  • margin-right
  • margin-left
  • margin-bottom
  • If you want a 20 pixel space between the bottom of the title and the top of the table, you could type the margin attribute like so: margin-bottom:20px in the caption attribute.
  • Here's what the table looks like now with the 20 pixels space:
Healthy Foods
Apples Peas Walnuts Oats
Orange Carrots Almonds Barley
Pears Corn Peanuts Wheat
Cherries Beans Cashews Buckwheat
  • This is what the caption element looks like now:
HTML Wikitext

<table style=”border:1px solid black; width:100%”>

<caption style="
text-align:center;
font-size:36px;
margin-bottom:20px"
>Healthy Foods
</caption>

{| style=”border:1px solid black; width:100%”

|+ style="
text-align:center;
font-size:36px;
margin-bottom:20px"
|Healthy Foods

  • Notice: Inside this caption element, we have:
  • Centered the text with text-align:center.
  • Called out the size of the title with font-size:36px.
  • Called out how much space between the title and the next element on the page with margin-bottom:20px.

Html12.png

These attributes of text-align, font sizes and margins will be used by you over and over. Get used to them. They are very useful.

Column Headings

Our table needs column headings. We create column headings with the <th> tag. You put the <th>element right after the <caption> element.

  • We obviously want to label the columns Fruits, Vegetables, Nuts and Grains.
  • The <th> element does not center the text but it does make the text bold.
  • To center the text in the <th> element, you use the text-align attribute.

Our Healthy Foods table looks like this now:

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

<table style=”border:1px solid black; width:100%”>

<caption style="text-align:center; font-size:36px; margin-bottom:20px">Healthy Foods
</caption>
<tr>
<th style="text-align:center">Fruits
</th>
<th style="text-align:center">Vegetables
</th>
<th style="text-align:center">Nuts
</th>
<th style="text-align:center">Grains
</th>
</tr>

{| style=”border:1px solid black; width:100%”

|+ style="text-align:center; font-size:36px; margin-bottom:20px"|Healthy Foods


|-
! style="text-align:center"|Fruits


! style="text-align:center"|Vegetables

! style="text-align:center"|Nuts


! style="text-align:center"|Grains


Our little table looks pretty good, but that is not all we can do to it. Let's look at some other things we can do to spice it up.


Sortable tables

  • What if we want to put the columns in alphabetical order?
  • How do we do that?
  • Put this coding in between the word table and style= in the beginning table tag: class=”sortable” The beginning table tag will now look like this:
HTML Wikitext

<table
class=
”sortable”
style=

border:1px solid black;
width:100%”
>

{|
class=
”sortable”
style=

border:1px solid black;
width:100%”

  • Here's what the table will look like:
Healthy Foods
Fruits Vegetables Nuts Grains
Apples Peas Walnuts Oats
Oranges Carrots Almonds Barley
Pears Corn Peanuts Wheat
Cherries Beans Cashews Buckwheat
  • Notice the little sorting symbol next to the column titles.
  • Click on any one of them and it will alphabetize the items in the column you clicked.
  • The items in the other cells in the row stay with the items of the column that was sorted.
  • This is critical if the table has name, address, phone numbers, etc in rows. You don't want the names being alphabetize but the address, etc not stay with the names.
  • This allows you to load items out of order or to add items in the future and then be able to sort them with the new data. Know this element well.

Html7.jpg

Note that the columns do not stay sorted when you exit the article. The order always reverts back to the order you originally entered them.

Background Colors

Table

What if we want to add a little color to our Healthy Foods table.

  • We can give the entire table a background color or we can color rows and even individual cells.
  • We do that with the background-color attribute. For example if we want our table to have a gray background: background-color:gray.
  • For the entire table, we can add this attribute in the table tag like so:
HTML Wikitext

<table
class=
”sortable”
style=

border:1px solid #000000;
width:100%;
background-color:#808080”
>

{|
class=
”sortable”
style=

border:1px solid #000000;
width:100%;
background-color:#808080”

Html7.jpg

The various attributes in the above HTML and Wikitext boxes have been put on separate lines for easier viewing. They can be on one line or on separate lines which makes them a bit easier to find if changes in the attributes are needed.

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

Rows

  • For the rows, we put this background-color attribute in the row <tr> or |-tag:
HTML Wikitext

<tr style=”background-color:#d2b48c”>

|- style=”background-color:#d2b48c”

  • Here is the table with a color on the header row:
Healthy Foods
Fruits Vegetables Nuts Grains
Apples Peas Walnuts Oats
Oranges Carrots Almonds Barley
Pears Corn Peanuts Wheat
Cherries Beans Cashews Buckwheat

Rows - Alternating

  • If your table has a lot of rows you might consider coloring alternating rows with this background-color attribute in the <tr> or |- element.
Healthy Foods
Fruits Vegetables Nuts Grains
Apples Peas Walnuts Oats
Oranges Carrots Almonds Barley
Pears Corn Peanuts Wheat
Cherries Beans Cashews Buckwheat

Cells

  • For individual cells, we can also use the background-color in the cell tag.
HTML Wikitext

<td style=”background-color:#d2b48c”>

| style=”background-color:#d2b48c”

  • Here's our table with a color in various cells:
Healthy Foods
Fruits Vegetables Nuts Grains
Apples Peas Walnuts Oats
Oranges Carrots Almonds Barley
Pears Corn Peanuts Wheat
Cherries Beans Cashews Buckwheat

Column Color

  • For a columns, we use the background-color in the cells of the column. This is particularly useful if there are classifications in the first column, like color, size, etc.
HTML Wikitext

<td style=”background-color:#d2b48c”>

| style=”background-color:#d2b48c”

  • Here's our table with a color in various cells:
Healthy Foods
Fruits Vegetables Nuts Grains
Apples Peas Walnuts Oats
Oranges Carrots Almonds Barley
Pears Corn Peanuts Wheat
Cherries Beans Cashews Buckwheat

Padding

If you look at the words in the cell, they are close to the borders. What if you want more space between the words and the borders?

  • To put some space between the cell border and the data, we use the padding attribute.
  • The coding for each cell will look like this using 10 pixels as the distance from the word to the borders of the cell.
HTML Wikitext

<td style=”padding:10px”>

| style=”padding:10px”

You can restrict the padding to particular sides of the words such as:

  • padding-top
  • padding-right
  • padding-left
  • padding:bottom

Here is our table with the padding attribute which is for all sides of the data:

Healthy Foods
Fruits Vegetables Nuts Grains
Apples Peas Walnuts Oats
Oranges Carrots Almonds Barley
Pears Corn Peanuts Wheat
Cherries Beans Cashews Buckwheat
Please note how the cells expanded around the padded text. Be aware that when you add padding borders expanded and sometimes not the way you want. Sometimes margins work better than padding in some instances. Try out both to see if the affect you want works better with margins than with padding.

Pipes, Brackets and Braces

  • Here are the actual names of three symbols you have seen in the Wikitext code:
  • | - pipe.
  • [ - bracket.
  • { - curly brace.

Html7.jpg

If you should be talking about braces, please do not refer to them as those those little curly, wiggly things. Try to use the above names for the HTML symbols. You'll impress your friends.

For more insights to tables with wikitext check out: Help:Tables

What is coming up in Lesson Three

  • Show you some more things you can do with tables.
  • Show you one of the most useful attributes in the Wiki floating.

What have you learned in this lesson

  • How to add a title to a table.
  • How to center text with text-align.
  • How to change the size of text with font-size.
  • How put space between objects with margins.
  • How to install column headings in tables with tags
  • How to make sortable tables.
  • How to give background colors to tables, rows and cells.
  • How to create space between data and the borders of cells and tables.

Homework

We will practice more about tables.

  • You will be making a table with five rows and three columns.
  • Design the table with the names of five imaginary friends or make up five names.
  • Width 75% of the page.
  • Table Border style: ridge, 15 pixels thick and orange in color using HEX coding.
  • Give table a background color of your choice.
  • Label the table My Five Imaginary Friends
  • Center title of table.
  • Create a 10px space between title and top of table.
  • Make the title 24 pixels high.
  • Make the first column - Last name. (For this problem, don't enter their names in alphabetical order).
  • Second column - First name (not Brother or Sister).
  • Third column - The made up state they live in.
  • Label each column as Last Name, First Name, and Residence.
  • Install 8 pixels of padding in each cell of the table.
  • Make the table sortable.
  • Give a color to the <th> row of "IndianRed" using the HEX code for the color.
  • Give a color to the text of the heading tags to white. See Text Color in Lesson One
  • Give a color of your choice to the column with the last names.

Click Here to see if you got this problem correct.

On to Lesson 3