User:Wonghk3/sandbox/workarea4





<< Previous Chapter Next Chapter >>

Editing cells
So far we've learned how to create a table, add a table heading (caption) and column labels and customize it using previously-learned in-line styling and attributes.

Likewise, we can do all the same things to individual cells using in-line styling and attributes:
 * We can change the size of the font with the font-size:value attribute.
 * We can change the font color with the color:value attribute.
 * We can change the font type with the font-family:value attribute.
 * We can change the style of font with our bold and italic tags, using the apostrophe (') sign.
 * We can change the background-color of text in each cell.

Here is a sample table showing the possibilities for each cell using these attributes:

Here is the code used for the first two rows of the above table:



Cell padding
While most attributes can be added to individual cells without impacting other cells in a row, the padding attribute must be added to all the cells in a row. We will demonstrate two scenarios in the use of this attribute.


 * Scenario #1: The result of adding the attribute padding: 20px to only one cell in the row.


 * NOTICE Putting padding in the first cell Apples is the only cell to move over the 10px, the other cells are not affected by the coding. To move the text over in the other cells, padding must be put into each individual cell.
 * NOTICE However the padding increased the over all height of the row.


 * Scenario #2: The result of adding the attribute padding: 20px to all the cells in the row.

Here is the coding:
 * NOTICE how all the cells in the row have expanded.



Cell separation
Another way to create space between material in cells is to place a space between the cells themselves.
 * 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:

Here is the coding: 


 * However, 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

Check your answers

<< Previous Chapter Next Chapter >>