Help:Wiki University Wikitext--Tables - Borders

From FamilySearch Wiki
Jump to navigation Jump to search

Lessons

Intermediate

Advanced

Flexbox

Additional Helps

Table borders.gif

Previously, we learned to create a simple table using table, row, and cell tags, then added a class named "wikitable" in the opening table tag to add lines to the table. We will now demonstrate how to "customize" a table to your specifications using the various "attributes" we learned to change "text". Let's start with the "border" attribute.

Table Border[edit | edit source]

  • To add a border around a table, add the border attribute to the opening table tag like so:
{| style="border:1px solid red"
  • NOTICE the space between the pipe and the word "style".

Here is the table with the border added:

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

Cell borders[edit | edit source]

You can also put borders around cells:

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

Each cell now has its own border.

  • NOTICE the width of the table is determined by the text in the cells.
  • 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.


Here is the coding:

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

|}

  • NOTICE the |- row tag acts like a separator between the attribute in the opening table tag and the next cell.
  • NOTICE that a pipe separates the attribute from the text in the cell. The pipe must be there.

Try these out[edit | edit source]

Tests.gif
Exercises
  • Copy the table coding displayed directly above into your sandbox, then place a 15 pixel "ridge" border around it 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
  • Attributes must be separated with a pipe from the contents of the cell
A. True
B. False
  • You can put borders around rows
A. True
B. False
  • You can put borders on columns
A. True
B. False
  • Individual cells can have a border around it
A. True
B. False
Retrieved from "https://paas-loadb-dhtaff8ujtdt-1826058300.us-east-1.elb.amazonaws.com/wiki/en/index.php?title=Help:Wiki_University_Wikitext--Tables_-_Borders&oldid=4188147"