Help:Wiki University HTML-- Tables - Borders

From FamilySearch Wiki
Jump to: navigation, search
MAIN PAGE
WIKI
WIKITEXT
HTML/CSS
FAMILY HISTORY CENTERS
VISUAL EDITOR

Lessons


Flexbox/CSS Grid

Additional Helps

TABLE BORDERS

Table borders.gif

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

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


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

Navigation menu