Lesson Twenty Four: Entering a Table - the Table Element

The latest version of HTML (HTML5) allows you to use the <table> element to structure and design portions of your pages.

You can use the <table> element to add a table to your webpages.

Enter the skeleton code below into a new file.
Open Notepad and add the following text:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>The Animal Kingdom Table</title>
<link rel="stylesheet" type="text/css" href="aktable.css">
</head>
<body>
<h1>The Animal Kingdom Table</h1>
</body>
</html>
```
When you are confident that your code is correct:
Click

File, Save As
and save your file in the c:\historytree folder as aktable.html.

Double click the aktable.html file to view your table webpage.

Sample

Add the following code below the header to make a table (Note: the <tr> tag stands for table row, the <th> tag stands for table header, and the <td> tag stands for table data.)

<table>
<caption>
Help us build this table by submitting additional African animals
</caption>
<tr>
<th>Animal</th>
<th>Location</th>
<th>Color</th>
<th>Type</th>
<th>Food</th>
<th>Size</th>
</tr>
<tr>
<td>Elephant</td>
<td>Plains</td>
<td>Grey</td>
<td>Herbivore</td>
<td>Peanuts</td>
<td>Large</td>
</tr>
<tr>
<td>Monkey</td>
<td>Jungle</td>
<td>Redish</td>
<td>Omnivore</td>
<td>Bananas</td>
<td>Small</td>
</tr>
<tr>
<td>Lion</td>
<td>Plains</td>
<td>Brown</td>
<td>Carnivore</td>
<td>Animals</td>
<td>Medium</td>
</tr>
<tr>
<td>Rhinoceros</td>
<td>Water</td>
<td>Grey</td>
<td>Herbivore</td>
<td>Grass</td>
<td>Large</td>
</tr>
<tr>
<td>Gorilla</td>
<td>Jungle</td>
<td>Black</td>
<td>Herbivore</td>
<td>Bananas</td>
<td>Large</td>
</tr>
</table>

This CSS will give you a design for your table, but feel free to make adjustments that are to your liking.

table { font-size: 140%;
margin-top: 100px;
margin-right: auto;
margin-left: auto;
color: darkgreen;
font-family: Verdana, Helvetica, Arial, sans-serif;
line-height: 1.8em;
border: solid 2px darkblue;
border-spacing: 5px; }

th { color: darkblue;
background-color: maroon; }

td { color: lightgreen;
background-color: darkgreen;}

td, th { border: 1px solid darkblue;
padding: 5px; }

caption {color: darkblue;
font-style: italic;
padding-top: 8px; }

Your page should look like this:

Coding

Lesson Twenty Four: Entering a Table - the Table Element