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. Obviously, a single column with a 100 items takes up a lot of space.
 * A better way to display 100 items is to have, say, four columns of 25 each. Four columns will takes up a lot less space and might even eliminate scrolling to see all the items.
 * To create lists in columns, we will use our knowledge of tables.
 * We do this by creating a table with only one row and the number of cells to equal the number of columns we need.

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 you have 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 where the last column has the same number of items as the preceding columns.
 * If the last columns does have fewer items, you will find, when you save your table, these items will be in the middle of the cell and not at the top of the cell as in the preceding columns.
 * Here is an example of the list of counties from the state of Vermont below.
 * The county links in each of the first three columns are at the top.
 * But the counties in the last column is in the middle of the column.
 * 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 the material take up less space than is available.
 * If all your cells do have the material at the top but there is unequal material in each, you will see that the cells are of different widths. Your browser wants to make all the cell the same height.  However, if the cells were coded to be the same width, then the material could be in the middle of one of the cells as in the above example.

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 format we want when displaying long list of items on our pages in the Wiki. Here is an example of what we mean: Missouri.

Keep columns even in length

 * When creating these lists in columns, keep the first, second or third columns of equal length. The remainder are at the top in the last column as in our example above.

Try these out


 Exercises Adair Andrew Atchison Audrain Barry Barton Bates Benton Bollinger Boone Buchanan Butler Caldwell Callaway Camden Cape Girardeau Carroll Carter Cass Cedar
 * Take this list of counties and make a four column list using just one ROW tag |- in a table.
 * Make all the columns of equal width
 * Alternate the colors of the columns with lightblue and lightgray.
 * Use padding of 5px.
 * Place a black line between the columns.
 * Do not use bullets points in this exercise.

Check your answers

 Quick Quiz
 * To have a list of items in six columns you need to create a table with one row and six cells.
 * A. True
 * B. False


 * A one row table looks better if the columns are of equal length.
 * A. True
 * B. False


 * To make the items on separate lines, you use  tags.
 * 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: