Help:Wiki University Wikitext--Tables - Cells

Changing cells
We can do all the same things to cells that we do to captions and headers. What we have not talked about is spacing between the cells.
 * So far we learned how to make changes to the captions and headers of our table.
 * Let's look at what we can do with cells.
 * We can change the font.
 * We can change the alignment in the cell.
 * We can change the size of the font.
 * We can add background colors to the cells.

Cell padding
We will use this table for our demonstrations: Here's the table we will experiment without the caption: We need to place the padding attribute in each cell for the text in all the cells to have padding all around the text. It should be obvious if we want the same effect on all the cells we must place the padding attribute in all the cells.
 * If we put some padding in each cell, we will see more space between the contents of the cells.
 * Let's add 10px of padding in the first cell so we can see how it effects the other cells:
 * NOTICE how all the cells in the row have expanded, as well as, the cell where the padding was actually placed.
 * NOTICE the padding is all around the Apple but only three sides of the other words in the row.

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

There are other changes we can make to the material inside cells. For these attributes to apply, it requires them to be placed into which ever cell you want the changes to apply.
 * We can change the size of the font with the font-size attribute.
 * We can change the font with the font-family attribute.
 * We can change the style of font with our bold and italic tags.
 * We can change the background color of the cells.
 * 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.

Try these out
 Exercises
 * With our above table place a black border, "dotted" style and 5 pixels thick.
 * Made 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