Help:Wiki University HTML-- Tables - Rows





<< Previous Chapter Next Chapter >>

ROW BACKGROUNDS
If we are making changes to all the 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 beginning row tag like so:  

Our table will now look like this:

CHANGING FONT-FAMILY IN ROWS
 
 * 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
 
 * 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:  

CHANGING HEIGHT OF ROWS
If you want the row to be taller, you can add the height attribute:  

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: vertical-align: border: padding:

CHANGING COLUMNS
TRY THESE OUT. . . ..

 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.

Check your answers

<div style="border-top:10px solid lightgray; border-left:10px solid lightgray; border-right:10px solid lightgray; "> Quick Quiz
 * To make all the cells in column the same you need only put the code in the top cell
 * 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

<< Previous Chapter Next Chapter >>