Help:Wiki University Wikitext--Tables - Columns Only





<< Previous Chapter Next Chapter >>

Vertical alignment

 * Back in lesson 4 in the beginning lessons 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 vertical 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 column has 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 takes 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:top

 * 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 if you are going to have four columns. The remainder are at the top in the last column as in our example above.

How many in each column?

 * An easy way to determine the number of items in each column is to divide the number of items by the number of columns you intend to create.
 * Lets say you have 23 items and are going to have four columns.
 * Divided the 23 by 4 and you get 5.75.
 * Round up the 5.75 to 6.
 * Put six items in the first the three columns and the remainder, which in this case is 5 in the last column.
 * Don't forget your vertical-align:top in this last column.

Try these out


 Exercises Adair Andrew Atchison Audrain Barry Barton Bates Benton Bollinger Boone Buchanan Butler Caldwell Callaway Camden Cape Girardeau Carroll Carter
 * 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-right:10px.

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


 * What coding do you use to bring items to the top of a cell?
 * A. valign:top
 * B. vertical-align:top
 * C. align:top
 * D. None of the above

Check your answers

<< Previous Chapter Next Chapter >>