User:Ccsmith/sandbox/wiki2

Vertical alignment

 * Back in lesson 4, you were introduced to lists. If the number of items in the list is short, listing them in a single column is ok.
 * But what if you have, say 100 items. Do you have a single column with a 100 items listed?  That takes up a lot of space as you can readily visualize.
 * A better way to display 100 items is to have, say, four columns of 25 each. Takes up a lot less space and might even eliminate scrolling to see all the items.
 * Here is where tables come into play.

Create a table with only one row

 * Create a table with only one row and with the number of cells to equal the number of columns you want to create.
 * If 16 items, you might have four column with 4 items in each.


 * Here is an example of the counties in Naveda.

How many columns?

 * Because many of our patrons are viewing the Wiki with pads or smart phones, try to limit the number of columns to no more than four.
 * You can, of course, have two or three columns if that works better.

Uneven column lengths

 * When creating these lists in columns, you will rarely have columns with the same number in each.
 * You might find the last column, with the lessor number if items, in the middle and not at the top as in the preceding columns.
 * Again the reason for this, is that the default for entering material in a cell is to place it in the middle and not at the top.
 * If all your cells all have the material at the top, it is because the material is equal in each cell or the cell are of different widths. However, if the cells are of the same width, them the material could be in the middle of one of the cells if the material less.

Vertical align

 * In order to keep the material in each cell at the top of the cell, lets introduce another attribute called: vertical-align:top
 * We will add this attribute to the cell tag:
 * Here is what the table looks like now:
 * Note, we have added padding on the right to give additional space between columns.
 * This is the look we are looking for on our pages in the Wiki. Check out any United States state page.

Keep columns even in length

 * When creating these lists in columns, keep the first, one, two or three columns of equal length. The remainder are at the top in the last column.

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: