Lesson 9: Creating Tables

Using HTML, you can use the table elements to create a table and displays the data on a web page.

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>
<caption>Table </caption>
<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

To create a responsive table for mobile devices, you need to add some css, as folows:

<div style="overflow-x:auto;">
<table>
...
</table>
</div>

❮ Previous Lesson Next Lesson ❯