Creating Simple Tables in HTML
If you’ve ever used a spreadsheet or looked at a schedule online, you’ve already seen something a lot like an HTML table. Tables are a simple way to show information in rows and columns, and they’re perfect for things like price lists, schedules, and comparisons.
In this beginner-friendly guide, you’ll learn exactly how to create simple tables using HTML. We’ll start with the basics, then add more features step by step, with clear examples you can copy, paste, and modify.
What is an HTML table?
An HTML table is a way to display information in a grid using special HTML tags.
A tag is a word inside angle brackets like <table> that tells the browser how to display something.
For tables, the main tags you need are:
<table>– wraps the whole table<tr>– defines a table row (a horizontal line of cells)<td>– defines a table data cell (a single cell in the row)<th>– defines a table header cell (like a title for a column or row)
Don’t worry if that sounds like a lot. You’ll see how they all fit together in the examples.
Example 1: Your first simple table
Let’s start with the smallest useful table: 2 rows and 2 columns. We’ll list a couple of fruits and their colors.
<!-- A very simple HTML table -->
<table border="1">
<!-- First row -->
<tr>
<td>Apple</td> <!-- First cell in row 1 -->
<td>Red</td> <!-- Second cell in row 1 -->
</tr>
<!-- Second row -->
<tr>
<td>Banana</td> <!-- First cell in row 2 -->
<td>Yellow</td> <!-- Second cell in row 2 -->
</tr>
</table>
What each part does
<table border="1">starts the table and adds a simple border so you can see the grid.- Each
<tr>creates a new row. - Each
<td>creates a cell inside that row. </td>,</tr>, and</table>are closing tags that mark the end of each element.
What you’ll see in the browser
You’ll see a 2x2 grid:
| Apple | Red |
|---|---|
| Banana | Yellow |
Each cell has a border around it.
Try it yourself
- Open a text editor (Notepad, TextEdit, VS Code, etc.).
- Paste the code above inside a basic HTML page, like this:
<!DOCTYPE html>
<html>
<head>
<title>My First Table</title>
</head>
<body>
<!-- Paste the table here -->
<table border="1">
<tr>
<td>Apple</td>
<td>Red</td>
</tr>
<tr>
<td>Banana</td>
<td>Yellow</td>
</tr>
</table>
</body>
</html>
- Save the file as
table.html. - Double-click it to open in your browser.
If you see a little table, that’s a win—your first HTML table is working!
Example 2: Adding headers with <th>
Most tables need headings to explain what each column means.
For that, you use <th> (table header) instead of <td> in the header row.
Let’s improve our fruit table by adding headers.
<table border="1">
<!-- Header row -->
<tr>
<th>Fruit</th> <!-- Column title for fruit names -->
<th>Color</th> <!-- Column title for colors -->
</tr>
<!-- Data rows -->
<tr>
<td>Apple</td>
<td>Red</td>
</tr>
<tr>
<td>Banana</td>
<td>Yellow</td>
</tr>
</table>
What changed?
- The first row now uses
<th>instead of<td>. - Browsers usually make
<th>text bold and centered by default. - This helps users see that the first row is a header, not regular data.
What you’ll see
| Fruit | Color |
|---|---|
| Apple | Red |
| Banana | Yellow |
The top row should look like a header.
Try it yourself
Change the header text to match a different type of table. For example, try a table with headers Name and Age, and add a couple of rows of people. This helps you get comfortable editing cells.
Example 3: A simple schedule table with more rows
Now let’s build something a bit more realistic: a weekly study schedule. We’ll keep it simple—just days and topics.
<table border="1">
<!-- Header row: column titles -->
<tr>
<th>Day</th>
<th>Topic</th>
</tr>
<!-- Data rows -->
<tr>
<td>Monday</td>
<td>HTML Basics</td>
</tr>
<tr>
<td>Tuesday</td>
<td>HTML Tables</td>
</tr>
<tr>
<td>Wednesday</td>
<td>CSS Intro</td>
</tr>
<tr>
<td>Thursday</td>
<td>Practice Project</td>
</tr>
<tr>
<td>Friday</td>
<td>Review & Quiz</td>
</tr>
</table>
How this is structured
- There is one header row with
DayandTopic. - Each following
<tr>adds a new day of the week. - Every row has exactly two
<td>cells to match the two headers.
This is important: all rows should have the same number of cells to keep the table aligned.
Try it yourself
Change the schedule to track something in your own life:
- Workout plan
- Meal plan
- Study subjects
Just update the text inside the <td> tags.
You can also add or remove rows by copying or deleting an entire <tr> ... </tr> block.
Example 4: Styling your table with basic CSS
So far, we used the border="1" attribute on the <table> tag.
This is fine for learning, but in real projects, it’s better to style tables using CSS (Cascading Style Sheets).
CSS is a language used to control how things look on a web page.
Let’s create a nicer-looking table with some basic CSS.
<!DOCTYPE html>
<html>
<head>
<title>Styled Table Example</title>
<style>
/* Make the table take up some width and merge borders */
table {
border-collapse: collapse; /* Merge border lines */
width: 60%; /* Table width: 60% of the page */
}
/* Add border and padding to cells */
th, td {
border: 1px solid #333; /* Dark gray border */
padding: 8px; /* Space inside cells */
text-align: left; /* Align text to the left */
}
/* Make the header row stand out */
th {
background-color: #f2f2f2; /* Light gray background */
}
/* Add a light background to every other row */
tr:nth-child(even) {
background-color: #fafafa; /* Very light gray */
}
</style>
</head>
<body>
<h1>Price List</h1>
<table>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
<tr>
<td>Notebook</td>
<td>$3.50</td>
</tr>
<tr>
<td>Pen</td>
<td>$1.20</td>
</tr>
<tr>
<td>Backpack</td>
<td>$25.00</td>
</tr>
</table>
</body>
</html>
What’s happening here
- The
<style>section in the<head>contains CSS rules that style the table. border-collapse: collapse;removes the double borders and makes the grid look cleaner.paddingadds breathing room inside each cell.background-coloronthhighlights the header row.tr:nth-child(even)lightly shades every second row to make the table easier to read.
Try it yourself
Play with these CSS values:
- Change
width: 60%;to80%or100%. - Change border color (
#333) to another color likeblueorgreen. - Change the header background color.
Experimenting is one of the best ways to learn how HTML and CSS work together.
Common mistakes (and how to fix them)
Here are a few issues beginners often run into:
Forgetting closing tags
- Problem: Missing
</tr>or</td>can break the table layout. - Fix: Carefully match each opening tag with a closing tag.
- Problem: Missing
Different numbers of cells per row
- Problem: One row has 2
<td>cells, another has 3. - Result: Columns don’t line up.
- Fix: Make sure every row in your table has the same number of cells.
- Problem: One row has 2
Putting table code outside
<body>- Problem: Placing
<table>tags in the wrong place in the HTML. - Fix: Keep all visible content (including tables) inside the
<body>tag.
- Problem: Placing
Don’t worry if your table looks weird at first. Most of the time, it’s a small typo you can quickly fix.
Quick recap and what’s next
You’ve just learned how to:
- Create a basic table using
<table>,<tr>, and<td> - Add header cells with
<th>to label your columns - Build a practical table like a schedule or price list
- Improve the look of your table using simple CSS
These are powerful skills, even at a beginner level. With just a few tags, you can organize information clearly and neatly on any web page.
Next steps you can try:
- Add a third column (for example:
Notes,Quantity, orStatus). - Create a table that compares 3 different products or options.
- Look up
thead,tbody, andtfootto learn how to structure more complex tables.
Most importantly, keep experimenting. Every table you build—even a tiny one—is progress and practice that makes you more confident with HTML.
