Html tutorial lesson 9 : Creating Tables

Share

[Lesson 8]<<[Contents]>>[Lesson 10]

Most of the times when you need to present your data in a table form, you can do it easily in other software such as Microsoft Excel. But when it comes to HTML, you need to use the table elements to define your table in order to display it on a webpage.

9.1 Basic Table Elements

A table can be created using  table element,  the row element tr and the column element td. The structure is as follows:

<!DOCTYPE html>
<html>
<head>
<title>Table</title>
</head>
<body>
<h1 align=center>Table</h1> 
<table>
<tr> <th>Thing</th> <th>Category</th></tr>
<tr> <td>Apple</td> <td>Fruit</td></tr>
<tr> <td>Cabbage</td> <td>Vegetable</td> </tr>
<tr> <td>Whale</td> <td>Mammal </td> </tr>
<tr> <td>Horse</td> <td>Mammal</td> </tr>
<tr> <td>Shark</td> <td>Fish</td> </tr>
<tr> <td>Mars</td> <td>Planet</td> </tr>
<tr> <td>Sun</td> <td>Star</td> </tr> </table>
</body></html>

 

Copy the codes above and paste them into your notepad. Save the file as table1.html.

The output is as follows:

Table

Thing Category
Apple Fruit
Cabbage Vegetable
Whale Mammal
Horse Mammal
Shark Fish
Mars Planet
Sun Star

 

[Lesson 8]<<[Contents]>>[Lesson 10]

Share