Help:Wiki University HTML-- Tables - Cells

From FamilySearch Wiki
Jump to navigation Jump to search

EDITING CELLS[edit | edit source]

<td>

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.

CELL PADDING[edit | edit source]

Padding.jpg
  • We will use this table for our demonstrations:
Fruits Vegetable Nuts Grains
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Orange Beans Almonds Buckwheat


  • Let's add 10 pixels of padding to the first row of cells:
Fruits Vegetable Nuts Grains
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Orange Beans Almonds Buckwheat
  • NOTICE how all the cells in the row have expanded.

Here is the coding:

<table style="border:1px solid red; width:100%">
<tr>
<th style="border:1px solid red; width:25%">Fruits</th>
<th style="border:1px solid red; width:25%">Vegetable</th>
<th style="border:1px solid red; width:25%">Nuts</th>
<th style="border:1px solid red; width:25%">Grains</th>
</tr>
<tr>
<td> style="border:1px solid red; padding:10px"|Apples</td>
<td> style="border:1px solid red; padding:10px"|Peas</td>
<td> style="border:1px solid red; padding:10px"|Peanuts</td>
<td> style="border:1px solid red; padding:10px"|Wheat</td>
</tr>

.
.
.
</table>


  • It should be obvious if we want the same effect on all the cells we must place the padding attribute in all the cells.
Fruits Vegetable Nuts Grains
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Orange Beans Almonds Buckwheat

CELL SEPARATION[edit | edit source]

  • Another way to create space between material in cells is to place a space between the cells themselves.
  • This requires the border-spacing attributes: border-spacing:5px attributes.
  • 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:
Fruits Vegetable Nuts Grains
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Orange Beans Almonds Buckwheat

Here is the coding:

<table style="border:1px solid red; width:100%; border-spacing:3px">
<tr>
<th style="border:1px solid red; width:25%">Fruits</th>
<th style="border:1px solid red; width:25%">Vegetable</th>
<th style="border:1px solid red; width:25%">Nuts</th>
<th style="border:1px solid red; width:25%">Grains</th>
</tr>
<tr>
<td> style="border:1px solid red">|Apples</td>
<td> style="border:1px solid red">Peas</td>
<td> style="border:1px solid red">Peanuts</td>
<td> style="border:1px solid red">Wheat</td>
</tr>

.
.
.
</table>


Here are other changes we can make to the material inside cells.

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

  • For these attributes to apply, it requires them to be placed into every cell.
  • 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 . . . . .[edit | edit source]

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


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
Retrieved from "https://paas-loadb-dhtaff8ujtdt-1826058300.us-east-1.elb.amazonaws.com/wiki/en/index.php?title=Help:Wiki_University_HTML--_Tables_-_Cells&oldid=3143916"