Help:Wiki University HTML-- Tables

From FamilySearch Wiki
Jump to navigation Jump to search

TABLES[edit | edit source]

Beginning years for Wiki University HTML-- Tables government records[1]
Birth Marriage Death Court Land Probate
1914* 1845 1914* 1845 1845 1845
*State birth and death records began in 1914. Limited compliance until 1920's
  • Now that you are familiar with borders, padding, margins, colors, etc, you are ready to advance to learning how to create and edit tables like the one above.
  • Once you are familiar with tables, you will have the tools to create and edit Templates, Sidebars and NavBoxes, so pay close attention to how tables are created.

OPENING AND CLOSING TAGS[edit | edit source]

<table>

Tables have opening and closing tags:

This is the opening table tag: <table>

This is the closing table tag: </table>

These two tags open and close a table.

ROWS[edit | edit source]

<tr>

Tables consist of rows with cells.

  • Rows are created with the row tag <tr>.
  • Rows are closed with </tr>.

Cells[edit | edit source]

<td>

Rows are made up of cells where the actual information is displayed.

  • Cells are created with the cell tag <td>.
  • Cells are closed with </td>.

TABLES ARE MANY ROWS OF CELLS[edit | edit source]

This is HTML coding for a table with one row populated with four cells:

<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>


If we were to load this, we would see nothing because the individual cells must have something in them in order to display:


<table>
<tr>
<td>Apples</td>
<td>Carrots</td>
<td>Peanuts</td>
<td>Wheat</td>
</tr>
</table>


  • NOTICE the opening and closing table tags
  • NOTICE the position of the row tags.
  • NOTICE data is between the opening and closing cell tags.

This is how our beginning table looks on the page:

Apples Carrots Peanuts Wheat

To add another row of cells, just repeat the row tag and cell tags:

<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>


  • NOTICE the position of the <tr> tags.

Here is our table with two rows and four cells in each row

<table>
<tr>
<td>Apples</td>
<td>Carrots</td>
<td>Peanuts</td>
<td>Wheat</td>
</tr>
<tr>
<td>Pears</td>
<td>Peas</td>
<td>Walnuts</td>
<td>Soybeans</td>
</tr>
</table>


  • Here is our table so far:
Apples Carrots Peanuts Wheat
Pears Peas Walnuts Soybeans


  • NOTICE this table does not look much like a table. Tables usually have borders, column titles, etc. These and other topics relating to tables are coming in the next chapters. Meanwhile please do the exercise below so you will have some practice in creating a table.

==ADDING ROWS AND CELLS==> To add rows and cells, add your row tags followed by your cell tags. You can add as many as you like.

COMPARING HTML TO WIKITEXT[edit | edit source]

HTML Wikitext

<table>
<tr>
<td>Apples</td>
<td>Carrots</td>
<td>Peanuts</td>
<td>Wheat</td>
</tr>
<tr>
<td>Pears</td>
<td>Peas</td>
<td>Walnuts</td>
<td>Soybeans</td>
</tr>
</table>

{|
|-
| Apples
| Carrots
| Peanuts
| Wheat

|-
| Pears
| Peas
| Walnuts
| Soybeans

|}

  • As you can see Wikitext is less coding. However, you will see that HTML will be easier to follow and code tables as we add more functionality and character to our tables.

TRY THESE OUT . . . . .[edit | edit source]

Tests.gif
Exercises
  • Create a table with four rows and four cells in each row.
    • In the first column list four fruits.
    • In the second column, four vegetables.
    • In the third column, four nuts.
    • In the fourth colomn, four grains.
    • This table will be the basis for all future exercises on tables. (Be careful we are talking about columns not rows. This exercise will teach you how to arrange items in columns.)


Quick Quiz
  • Tables do not need a closing tag
A. True
B. False
  • Rows must have a closing tag
A. True
b. False
  • Cells must have something in them for the table to be visible.
A. True
B. False
  1. ↑ Alice Eichholz, Red Book: American State, County and Town Sources, 3rd ed. (Salt Lake City: Ancestry Pub., 2004), 65-67. At various libraries (WorldCat); FHL Book 973 D27rb 2004.
Retrieved from "https://paas-loadb-dhtaff8ujtdt-1826058300.us-east-1.elb.amazonaws.com/wiki/en/index.php?title=Help:Wiki_University_HTML--_Tables&oldid=3143902"