Table Basics
What Is It?
A table shows related information in rows and columns.
What the Tags Mean
table: the whole table.caption: its name.tr: a row.th: a header cell.td: a data cell.scope="col": says a header describes a column.
Example 1
Save each example as index.html and open it in your browser. Each code block is a complete page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Basics</title>
</head>
<body>
<table>
<caption>My shopping list</caption>
<tr><th scope="col">Item</th><th scope="col">Price</th></tr>
<tr><td>Pen</td><td>₹10</td></tr>
<tr><td>Book</td><td>₹50</td></tr>
</table>
</body>
</html>Browser preview
What you see: You see two columns, Item and Price, with two items underneath.
Example 2: Another Use
A schedule is another good use for a table.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Basics</title>
</head>
<body>
<table>
<tr><th scope="col">Day</th><th scope="col">Activity</th></tr>
<tr><td>Monday</td><td>Read</td></tr>
</table>
</body>
</html>Browser preview
Simple Tip
Use tables for data, not for arranging an entire page.
Try It Yourself
Add a row for a pencil and its price.