Help:Wiki University HTML-- Tables - Cells
Lessons
- HOME
- Introduction
- Headers
- Lists
- Nesting Lists
- Comments
- Paragraphs
- Fonts - Changing
- Font Size
- Font Colors
- Font Bold-Italics
- Padding
- Margins
- Borders
- Width and Height
- Alignment
- Tables
- Tables - Borders
- Tables - Widths
- Tables - Captions
- Tables - Col Labels
- Tables - Cells
- Tables - Rows
- Tables - Placement
- Tables - Sorting
- Tables - Scrolling
- Tables - Col Only
- Tables - Col Spans
- Tables - Row Spans
- Infobox - Creating
- Infobox - Placing
- Infobox - If function
- Sidebars
- Navboxes
- Position - Relative
- Position - Absolute
- Misc
Flexbox/CSS Grid
Additional Helps
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]
- 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]
- 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.
- 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