Help:Wiki University Wikitext--Tables - Cells
Lessons
- HOME
- Introduction
- Headers
- Lists
- Nesting Lists
- Links
- Broken Links
- Comments
- Categories
- Image Embedding
- Image Tooltips & Borders
- Image Links
- Images & Text; Embedding PDF
- Snipping Tool & Paint
- Paragraphs
- Inline Styling
- Changing Fonts
- Font Colors
- Backgrounds
- Multi-attributes
- Font Bold-Italics
- Div Tag - Intro
- Borders
- Padding
- Margins
- Width and Height
- Alignment - Horizontal
- Tables
- Breadcrumb Trails
- Ref/Footnotes
- SEO
Intermediate
Advanced
Flexbox
Additional Helps
Editing cells[edit | edit source]
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 we did in a paragraph, that is, using "attributes":
- 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, using the apostrophe (') sign.
- We can change the background color of the cells.
- We can add padding around the text in the cells.
- For these attributes to apply, it requires them to be placed into every cell
Here is the example of all of the above possibilities for each cell, with a change of font-size, font-family, background color along with some padding.
Fruit | Vegetables | Nuts | Grains |
---|---|---|---|
Apples | Peas | Peanuts | Wheat |
Pears | Carrots | Walnuts | Oats |
Cherries | Corn | Cashews | Barley |
Oranges | Beans | Almonds | Buckwheat |
Here is the code for all of the changes we made to the cells for Apple, Peas and Peanuts
| style="border:1px solid red; width:25%; font-family:Rockwell; font-size:20px; text-align:center; background-color:lightblue"| Apples
| style="border:1px solid red; width:25%" | ''Peas''
Cell padding[edit | edit source]
- We will use this table for our demonstrations: Example 1---Padding in only one cell
Fruits | Vegetable | Nuts | Grains |
---|---|---|---|
Apples | Peas | Peanuts | Wheat |
Pears | Carrots | Walnuts | Oats |
Cherries | Corn | Cashews | Barley |
Oranges | Beans | Almonds | Buckwheat |
- NOTICE Putting padding in the first cell Apples is the only cell to move over the 10px, the other cells are not affected by the coding. To move the text over in the other cells, padding must be put into each individual cell.
- NOTICE However the padding increased the over all height of the row.
- Let's add 10 pixels of padding to the first row of cells: Example 2
Fruits | Vegetable | Nuts | Grains |
---|---|---|---|
Apples | Peas | Peanuts | Wheat |
Pears | Carrots | Walnuts | Oats |
Cherries | Corn | Cashews | Barley |
Oranges | Beans | Almonds | Buckwheat |
- NOTICE how all the cells in the row have expanded.
Here is the coding:
{| style="border:1px solid red; width:70%"
|-
! style="border:1px solid red; width:25%" | Fruits
! style="border:1px solid red; width:25%" | Vegetable
! style="border:1px solid red; width:25%" | Nuts
! style="border:1px solid red; width:25%" | Grains
|-
| style="border:1px solid red; padding:10px"|Apples
| style="border:1px solid red; padding:10px"|Peas
| style="border:1px solid red; padding:10px"|Peanuts
| style="border:1px solid red; padding:10px"|Wheat
|-
| style="border:1px solid red"|Pears
.
.
.
|}
- 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[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 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:
Fruits | Vegetable | Nuts | Grains |
---|---|---|---|
Apples | Peas | Peanuts | Wheat |
Pears | Carrots | Walnuts | Oats |
Cherries | Corn | Cashews | Barley |
Oranges | Beans | Almonds | Buckwheat |
Here is the coding:
{| style="border:1px solid red; width:70%; border-spacing:3px"
|-
! style="border:1px solid red; width:25%" | Fruits
! style="border:1px solid red; width:25%" | Vegetable
! style="border:1px solid red; width:25%" | Nuts
! style="border:1px solid red; width:25%" | Grains
|-
| style="border:1px solid red"|Apples
| style="border:1px solid red"|Peas
.
.
.
|}
- Note: The next chapter will explain changing text for an entire row.
Eliminate border spacing[edit | edit source]
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.
Here is the coding.
Our table would look like this if we used this attribute:
Fruits | Vegetable | Nuts | Grains |
---|---|---|---|
Apples | Peas | Peanuts | Wheat |
Pears | Carrots | Walnuts | Oats |
Cherries | Corn | Cashews | Barley |
Oranges | Beans | Almonds | Buckwheat |
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