User:Ccsmith/sandbox/wiki2


 * Now that you are familiar with borders, padding, margins, colors, etc., you are ready to advance to learning how to create and edit tables like the one above.
 * Once you are familiar with tables, you will have the tools to create and edit Templates, Sidebars and NavBoxes, so pay close attention to how tables are created.

Opening and closing tags
These two tags open and close a table.
 * Just the opposite of the opening table tag.

Rows
Tables consist of rows with cells. However rows have NO CLOSING tag. Rows are created with a |- |-
 * NOTICE that it consists of a pipe and a dash.

Cells
| Rows are made up of cells where the actual information is displayed. Cells have NO CLOSING tag. Cells are created with just a |
 * NOTICE that it consists only of a pipe.

Tables are many rows of cells
This is wikitext coding for a table with one row populated with four cells:  If we were to load this, we would see nothing because the individual cells must have something in them in order to display:  This is how our beginning table looks on the page:
 * NOTICE the opening and closing table tags
 * NOTICE the row tag has no closing tag
 * NOTICE each cell has no closing tag

To add another row of cells, just repeat the row tag and cell tags:  Here is our table with two rows and four cells in each row 
 * Here is our table so far:


 * NOTICE this table does not look much like a table. Tables usually have borders, column titles, etc.

Table Borders
As we have said, our little table looks like two sentences. Tables usually have borders. To add borders, we use our border attribute: style="border:1px solid black" in the opening table tag: Here is the coding:  Here's what our table looks with a border around it:

As you look at the table, you can see that the items are right up against each other and there are no borders around each cell.

Cell Borders and Padding
To add borders to each cell along with padding, we will use our border and padding attributes. These attributes have to be added to each cell.  Here's what our table looks like with borders and padding in each cell:
 * NOTICE: the pipe before the word style and that a pipe separates the style coding from the material in the cell. You must separate the coding of the cell from the material in the cell with a pipe.


 * NOTICE: that the width of the cells is controlled by what is in it; large words will increase the width of the cells.
 * NOTICE: that the width of the cells IN A COLUMN is controlled by the largest cell in the column. This is very important.
 * No limit as to the number of rows you can add to a table.

Vertical alignment
If your columns are uneven, in other words, there more items in the first column, for example, than in the second column, the items in the second column will be in the middle of the column. Here is an example:


 * If we want the items in each column to be at the top of each column, we use an attribute called vertical-align:top in each cell.
 * We will add this attribute to the cell tag:
 * Here is what the table looks like now:


 * This is the look we are looking for on our pages in the Wiki. Check out any United States state page.

How to structure a list using tables
In lesson four you learned about lists. However, if lists are very long, tables are very useful:
 * 1) If there are '''six or less items in a list, place them in one vertical column.
 * 2) If there are seven or more items, list them in two or more columns depending the number of items.
 * 3) Keep the number columns to 4 or less so the lists can be viewed on smaller screens.

Try these out


 Exercises Check your answers
 * Create a table with four rows and four cells in each row.
 * In the first column list four fruits.
 * In the second column, four vegetables.
 * In the third column, four nuts.
 * In the fourth colomn, four grains.
 * This table will be the basis for all future exercises on tables. (Be careful we are talking about columns not rows.  This exercise will teach you how to arrange items in columns.)

 Quick Quiz
 * Tables do not need a closing tag
 * A. True
 * B. False


 * Rows must have a closing tag
 * A. True
 * b. False


 * Cells must have something in them for the table to be visible.
 * A. True
 * B. False

Check your answers

Vertical alignment
When we place some text in a div or paragraph tag that is taller than the text we are placing, the text will appear at the top of the container. What if we want the text in the middle of the container? To do that, we use the combination of text-align and line-height attributes.  This text is in the middle This text is in the middle.
 * Let's make a container or box with a div tag that is 50px in height with a line of text.
 * Next we need to combine the text-align with line-height.
 * If we set the height of the line-height to 50 pixels, the text will be in the middle of the container. Here is the coding: