JavaScript Tutorial JavaScript Examples JQuery Tutorial CSS Tutorial HTML Tutorial About Us

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>
<h1 align=center>Table</h1> 
<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>

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

The output is as follows:
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;">

❮ Previous Lesson Next Lesson ❯

Copyright©2008 Dr.Liew Voon Kiong. All rights reserved |Contact|Privacy Policy