User:LeeA/sandbox change5

Tables 10-12

chapter 10

{Wikitext School}}

Table with columns only
An easy way to show a long list of items such as counties in a state is to use a table with a single row. In this row have the number of cells to equal the number of columns you think you need to display the items you want to show. If you have a list of 100 items, you can create a table with one row with four cells in that row. Then you can place 25 items in each cell. This will create four columns with 25 items in each. This is a list of the counties in New Hampshire. The list of counties is in three cells in one row table to create a three column list: Here is the coding: (needs to mention the need for breaks at the end of each item )  ADDITIONAL NOTES:
 * NOTICE that there is only one row (|-).
 * NOTICE there are three cells (|) in this row.
 * If we wanted the width of the columns to be the same, we can insert our width attributes and whatever other attributes using inline style to the cell tag. Be sure to end with a pipe.


 * You can begin each item on the list with or without an asterisk (*). Adding asterisks will result in a bullet before each item.

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

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

chapter 11

Spanning columns in tables
This ability to span columns is especially useful when separating sections of one table into different topics.
 * When we create tables, sometimes we want a cell to cover more than one column like in the following example:
 * NOTICE the first row consists of two cells, each spanning two cells of the following row.

How to span columns

 * If we want to span two columns, for example, we use a class called "colspan."

colspan="2"

 | colspan="2" style=" width: 50% ; ......." | Foods that have a .......  Here is the coding for the first three rows of the above table: take out text-align:center: it is confussing, not needed defaults and isn't listed in table below
 * This coding is inserted right after the | or ! tags:
 * NOTICE the "2" represents the number of columns to span.
 * NOTICE the 50% as the width of the expanded cell. If the cells had NO width mentioned, then no width would be needed in the expanded cell above.  However, since the cells under each of these expanded cells is 25%, you have to place a width of 50% in the expanded cell above.


 * NOTICE again the location of the class "colspan."
 * NOTICE that the new row only has two cells, but each cell has a "colspan" in it. The two colspans cover the four cells in the next row.

Columns have to add up

 * Make sure that the columns you span add up to the total number of cells in the next row.
 * If you span a total of four columns or cells, you must have two colspan="2" in the preceding row, otherwise you will get who knows what!

Restrictions

 * You cannot create sortable tables with colspans.

Try these out


 Exercises
 * Use this coding for a table

Check your answers
 * Merge all the cells in the second row.
 * Merge the first three cells in the fourth row.

 Quick Quiz
 * Colspans must equal the number of cells in the next row.
 * A. True
 * B. False


 * If you have a row with four cells you can have in the preceding row one cell with a colspan="3" plus the remaining cell.
 * A. True
 * B. False


 * If you have a row of seven cells you can have in the preceding row one cell with a colspan="2", the next cell with a colspan="3" and the remaining cell with a colspan="2".
 * A. True
 * B. False

Check your answers

Chapter 12

Spanning rows in tables
Here is an example: This ability to span rows is not quite as useful as spanning columns but it does have its uses.
 * You have learned how to span columns with individual cells; you can also span rows as well.
 * NOTICE in the first column, the first cell of the second row was merged with the first cell of the third row.

How to span rows
rowspan="2"  Here is the coding for the first three rows of the above table: (need to take out text-align: center Not needed default is center
 * If a cell is to span two rows, as in the above example, we use a class called "rowspan":
 * This coding is inserted right after the pipe or exclamation marks:
 * rowspan="2" style="width:25%; border:1px solid red" | Apples
 * NOTICE the "2" represents the number of rows to span.
 * 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.


 * NOTICE again the location of the class "rowspan."
 * NOTICE that the third row is missing the FIRST cell because it was merged with the cell in the row above.

Restrictions

 * You cannot create sortable tables with rowspans.

Try these out
(need to take out text-align: center Not needed default is center

 <div style="font-size:14pt; width:100%; height:30px; vertical-align:middle; background-color:lightgreen; ">Exercises Use this coding for a table <div style="width:160px; height:20px; padding-top:3px; padding-left:10px; background-color:orange; color:white; border:1px solid orange; border-radius:5px; ">Check your answers
 * Merge the cells with Barley and Buckwheat in them.
 * Merge the cells with Peas, Carrots and Corn in them.

<div style="border-top:10px solid lightgray; border-left:10px solid lightgray; border-right:10px solid lightgray; "> Quick Quiz
 * If you are going to merge three cells in a column, you must delete the number of cells in the column under the cell to be merged to equal the number call for in the rowspan code minus one.
 * A. True
 * B. False


 * If you want to merge two cells that are under each other in a column, you delete the cell next to it in the row.
 * A. True
 * B. False

<div style="width:160px; height:20px; padding-top:3px; padding-left:10px; background-color:orange; color:white; border:1px solid orange; border-radius:5px; ">Check your answers