Help:Wiki University Wikitext--Tables - Cells

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, that is:
 * 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.
 * We can add padding around the text in the cells.

Cell padding

 * We will use this table for our demonstrations:


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

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




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

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: 

Here are other changes we can make to the material inside 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.

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