User:Stais/Tables: Col Span, Row Span, Alignment-Vertical, Templates

Intermediate Lesson 10 Tables-Col Spans

Span Columns


 * This coding is inserted right after either the | or ! tags.
 * When using the pipe "|", you will need to add in the "text-align:center" attribute in order for the name to be centered:
 * If you use the "!" instead of the pipe "|", then the name defaults to the center and is bolded: !colspan="2" style=.......
 * Make sure that the columns you span add up to the total number of cells in the next row.


 * You cannot create sortable tables with colspans.

Exercises:

Use this coding for a table Merge all the cells in the second row. Merge the first three cells in the fourth row.

Intermediate Lesson 11 Tables-Row Spans

rowspan="2"
 * If a cell is to span two rows, as the below example, we use a class called "rowspan":
 * This coding is inserted right after the pipe or exclamation marks:


 * However to merge cells in a column, we erase the number of cells in the column to equal to the number we specified in the rowspan attribute minus one.
 * So if we want to merge two cells in a column we erase only the cell immediately below it.
 * If you were combining three cells, you would delete just the two immediately below, not three cells below.
 * However to merge cells in a column, we erase the number of cells in the column to equal to the number we specified in the rowspan attribute minus one.
 * So if we want to merge two cells in a column we erase only the cell immediately below it.
 * The third row is missing the FIRST cell because it was merged with the cell in the row above.


 * You cannot create sortable tables with rowspans.

Exercises:

Merge the cells with Barley and Buckwheat in them. Merge the cells with Peas, Carrots and Corn in them. Use this coding for a table

Intermediate Lesson 12 Alignment-Vertical

'Create a table with only one row

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.

In order to keep the material in each cell at the top of the cell, lets introduce another attribute called: vertical-align:top

Keep columns even in length

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 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.

Exercises:

Take this list of counties and make a four column list using just one ROW tag |- in a table. Adair Andrew Atchison Audrain Barry Barton Bates Benton Bollinger Boone Buchanan Butler Caldwell Callaway Camden Cape Girardeau Carroll Carter

Make all the columns of equal width Alternate the colors of the columns with lightblue and lightgray. Use padding-right:10px.

Intermediate Lesson 13 Templates