User:LeeA/sandbox change3

tables 3

Table column headings

 * We have a title for our table, but what do the columns represent?
 * To label the columns we use exclamation marks: !
 * Unlike the caption, we have to have a row tag before the exclamation marks:

 |- !  !  !  !

 |- ! Fruits ! Vegetables ! Nuts ! Grains
 * Here are the column headings for our healthy foods table:


 * NOTICE there are no borders on column headings.
 * NOTICE the headings centered by default in the heading cell.
 * NOTICE the font is bold as well.
 * NOTICE the table border will expand as you add rows and/or column headers.

Changing column headings
Here is what the table will look like with borders, centered text and background color: Here is the coding: 
 * To put a border on the heading cells, we will use our border attribute
 * To make the headings really stand out let's add a background color as well.
 * NOTICE the width attribute was moved into the heading tags so we know where they are. They could have stayed where they were or with any other cells in the columns.

Try these out


 Exercises
 * With our above table place a yellow border, "dashed" style and 10 pixels thick.
 * Make the table 500 pixels wide.
 * Next place a blue border around the headings.
 * Change our Healthy Foods caption with any font;
 * Change the background color for the headings.

Check your answers

 Quick Quiz
 * The headers are always centered on the column.
 * A. True
 * B. False

*You can put borders in the headers column
 * A. True
 * B. False


 * Headers are always in bold type.
 * A. True
 * B. False

Check your answers

Editing cells
So far we learned how to make changes to the captions and headings of our table. In addition, we can do all the same things to cells, but for these attributes to work it requires them to be placed into every cell.
 * We can change the size of the font with the font-size attribute.
 * We can change the alignment in the cell.
 * We can change the font with the font-family attribute.
 * We can change the background color of the cells. background-color attribute.
 * We can change the style of font with our bold and italic tags. (this is done by using the ' mark a certain number of times to accomplished the desired effect.)

Here is the example of all of the above possibilities for each cell, with a change of font-size, font-family, background color along with some padding.

Here is the code for all of the changes we made to one cell.

 | style=" border:  1px solid red ; width:25%; font-family:Rockwell; font-size:20px; text-align:center; backgroung-color:lightblue" | Apples"


 * NOTICE The padding in the other cells do not move the text to the right. To move the text over the padding must be put into each individual cell.'''

Cell padding

 * We will use this table for our demonstrations:


 * Let's add 10 pixels of padding to the first row of cells:


 * NOTICE how all the cells in the row have expanded all the way around the text.

Here is the coding:




 * When applying padding to column labels, you only have to put the padding attribute in the first cell of the row to affect all the cells in the row. Because the column labels are "default center" the padding added is equal on all sides.'''

Cell separation
Another way to create space between material in cells is to place a space between the cells themselves. Here is the coding: 
 * This requires the border-spacing attribute: border-spacing: 3px.
 * This attribute can only be added to the opening table tag . Here is what our table will look like with a cell separation of 3 pixels:


 * If you are changing text for the entire row, there is another way.
 * See the next chapter after you have completed the exercises and quick quiz below.

Eliminate border spacing
If we want to have the individual cells with their borders up against each other, we use the border-collapse:collapse attribute. This coding goes only in the table tag.

Here is the coding.  {| style=" border:  1px solid red ; width:70%; border-collapse:collapse"

Our table would look like this if we used this attribute:

Try these out


 Exercises
 * With our above table place a black border, "dotted" style and 5 pixels thick.
 * Make the table 600 pixels wide.
 * Next place a blue border around all the cells.
 * Place 5 pixels of padding in the header row of cells
 * Separate all the cells with 5 pixels.
 * Place a lightblue background on the column headers.

Check your answers

 Quick Quiz
 * Only the border-collaspe attribute is required to separate cell borders.
 * A. True
 * B. False


 * Padding attribute only pads on the left side of the text
 * A. True
 * B. False


 * The header font cannot be changed
 * 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

Row backgrounds
If we are making changes to cells in a row, rather than putting code into each cell, we can put the coding in our row tags. Let's use our demonstration table again, this time without borders on the cells: Let's say we want to place a background color in the heading row, we simply add the background-color attribute to the row tag like so: <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:100%; font-size:10pt; font-family:Courier New"> |- style=" background-color: lightgreen " Our table will now look like this:

Changing font-family in rows
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:100%; font-size:10pt; font-family:Courier New"> |- style=" background-color:lightblue; font-family: Rockwell "
 * If you are going to change the font-family in all the cells in a row, install the code in the row tag. Here we will add it to the background attribute like so:

Changing font-size in rows
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:100%; font-size:10pt; font-family:Courier New"> |- style=" background-color:lightgreen; font-family:Rockwell; font-size: 18pt "
 * To change the font-size in a row, install the code in the row tag. Here we will add it to the above changes like so:

Changing text color in rows
Let change text color to white with color attribute: <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:100%; font-size:10pt; font-family:Courier New"> |- style=" background-color:lightblue; font-family:Rockwell; font-size:14pt; color: darkblue "

Changing height of rows
If you want the row to be taller, you can add the height attribute: <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:100%; font-size:10pt; font-family:Courier New"> |- style=" background-color:lightgreen; font-family:new times roman; font-size:14pt; color:darkblue; height: 50px "

Attributes that DO NOT work in rows
These attributes DO NOT work in row tags and must be placed in each cell to function: width: text-align: border: padding:

Try these out


<div style="border-top:10px solid lightgreen; border-left:10px solid lightgreen; border-right:10px solid lightgreen; "> <div style="font-size:14pt; width:100%; height:30px; vertical-align:middle; background-color:lightgreen; ">Exercises
 * With our above table place a yellow border, "groove" style and 10 pixels thick.
 * Make the table 700 pixels wide.
 * Next place a blue border around the headers.
 * Give the header cells a light blue background.
 * Change the color of the font to white.

<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

<div style="border-top:10px solid lightgray; border-left:10px solid lightgray; border-right:10px solid lightgray; "> Quick Quiz *You cannot change the font color in a row
 * A. True
 * B. False


 * Background color cannot be placed in cells through coding in row
 * A. True
 * B. False


 * You can change the font-family in the rows
 * 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