Help:Wiki University HTML-- Tables - Borders
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
TABLE BORDERS[edit | edit source]
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[edit | edit source]
- To add a border to a table, add the border attribute to the opening table tag like so:
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[edit | edit source]
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>
- 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"> |
{| style="border:1px solid red" |
TRY THESE OUT . . . . .[edit | edit source]
- 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.
- 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