Help:Wiki University HTML-- Tables - Borders

WIKI

WIKITEXT

HTML/CSS

CONTRIBUTORS

FAMILY HISTORY CENTERS

VISUAL EDITOR

Lessons

1. HOME
2. Introduction
3. Headers
4. Lists
5. Nesting Lists
6. Comments
7. Paragraphs
8. Fonts - Changing
9. Font Size
10. Font Colors
11. Font Bold-Italics
12. Padding
13. Margins
14. Borders
15. Width and Height
16. Alignment
17. Tables
18. Tables - Borders
19. Tables - Widths
20. Tables - Captions
21. Tables - Col Labels
22. Tables - Cells
23. Tables - Rows
24. Tables - Placement
25. Tables - Sorting
26. Tables - Scrolling
27. Tables - Col Only
28. Tables - Col Spans
29. Tables - Row Spans
30. Infobox - Creating
31. Infobox - Placing
32. Infobox - If function
33. Sidebars
34. Navboxes
35. Position - Relative
36. Position - Absolute
37. Misc

---

Flexbox/CSS Grid

1. Flexbox Training

Additional Helps

• Common Wiki Fixes
• Wiki Tips
• Wiki Support Reading List

<< Previous Chapter

Next Chapter >>

TABLE BORDERS

Now that we have a table created, we need to add some borders so it will look more like a table.

ADD BORDER ATTRIBUTE IN OPENING TABLE TAG

• To add a border to a table, add the border attribute to the opening table tag like so:

<table style="border:1px solid red"

Here is the table with the border added:

Apples	Peas	Peanuts	Wheat
Pears	Carrots	Walnuts	Oats
Cherries	Corn	Cashews	Barley
Oranges	Beans	Almonds	Buckwheat

• NOTICE the width of the table is determined by the text in the cells. It does not necessarily go across the page and it might even be wider than the page.

CELL BORDERS

You can also put borders around cells:

Apples	Peas	Peanuts	Wheat
Pears	Carrots	Walnuts	Oats
Cherries	Corn	Cashews	Barley
Orange	Beans	Alminds	Buckwheat

Each cell now has its own border.

• NOTICE there is NO space between the borders of the cells. We'll let you how to fix that later.

Here is the coding:

<table style="border:1px solid red">
<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>
<tr>
<td style="border:1px solid red">Pears</td>
<td style="border:1px solid red">Carrots</td>
<td style="border:1px solid red">Walnuts</td>
<td style="border:1px solid red">Oats</td>
</tr>
<tr>
<td style="border:1px solid red">Cherries</td>
<td style="border:1px solid red">Corn</td>
<td style="border:1px solid red">Cashews</td>
<td style="border:1px solid red">Barley</td>
</tr>
<tr>
<td style="border:1px solid red">Oranges</td>
<td style="border:1px solid red">Beans</td>
<td style="border:1px solid red">Almonds</td>
<td style="border:1px solid red">Buckwheat</td>
</tr>

</table>

• NOTICE each cell has the border attribute placed in it. It is a lot of work, but this is the only way it works in the Wiki.
• NOTICE this coding is not required in row tags.

HTML

Wikitext

<table style="border:1px solid red"> <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> <tr> <td style="border:1px solid red">Pears</td> <td style="border:1px solid red">Carrots</td> <td style="border:1px solid red">Walnuts</td> <td style="border:1px solid red">Oats</td> </tr> <tr> <td style="border:1px solid red">Cherries</td> <td style="border:1px solid red">Corn</td> <td style="border:1px solid red">Cashews</td> <td style="border:1px solid red">Barley</td> </tr> <tr> <td style="border:1px solid red">Oranges</td> <td style="border:1px solid red">Beans</td> <td style="border:1px solid red">Almonds</td> <td style="border:1px solid red">Buckwheat</td> </tr> </table>

{| style="border:1px solid red" |- | style="border:1px solid red" | Apples | style="border:1px solid red" | Peas | style="border:1px solid red" | Peanuts | style="border:1px solid red" | Wheat |- | style="border:1px solid red" | Pears | style="border:1px solid red" | Carrots | style="border:1px solid red" | Walnuts | style="border:1px solid red" | Oats |- | style="border:1px solid red" | Cherries | style="border:1px solid red" | Corn | style="border:1px solid red" | Cashews | style="border:1px solid red" | Barley |- | style="border:1px solid red" | Oranges | style="border:1px solid red" | Beans | style="border:1px solid red" | Almonds | style="border:1px solid red" | Buckwheat |}

TRY THESE OUT . . . . .

Exercises

• With your table from the previous exercise, put a 15 pixel "ridge" border with a border color of "cornsilk."
• Put a border for the whole table that is 15 pixels wide, "double" border with a border color of brown.
• Put a blue border around the cells in the first column 1 pixel thick.

Check your answers

Quick Quiz

• Borders can only be on the outside of a table.

A. True

B. False

• You can put borders around rows

A. True

B. False

• You can put borders on columns

A. True

B. False

Check your answers

<< Previous Chapter

Next Chapter >>