4 Steps to Making a Table in HTML

HeatherHTML0 Comments

HTML makes it very easy for us to create data tables within our webpage. To show you how it’s done, we’re going to create a table that lists different types of ice cream flavors and their prices for a nearby ice cream shop. We’ll work step-by-step, so you can see how the table evolves as we add additional elements. Let’s get started!

1. HTML Table Element

To create our table, we must first start with a table element. Everything that is contained within our  <table> element will create the content of our table.

Ice Cream!

Next we need to create a row for each ice cream flavor we’ll be listing: Rocky Road, German Chocolate, and Vanilla Bean.

2. Table Rows

The  <tr> element represents a table row. Within our table row, we can further define headings and individual cells within the row.

Let’s start by adding a row for each of our ice cream flavors:

Rocky Road
German Chocolate
Vanilla Bean

3. Table Header Row

Column headers for a table can be defined by using the  <th> element, which stands for table header. Let’s use two <th> elements to define the first column as “Flavors” and the second one as “Price”.

Flavors Price
Rocky Road
German Chocolate
Vanilla Bean

4. Table Cells

Last, for our other rows, we want to use the  <td> element to define the data cells of our table. Let’s finish up by filling in the pricing information for our ice cream:

Flavors Price
Rocky Road $1.25
German Chocolate $1.40
Vanilla Bean $1.15

That’s it! We’ve now created a table that lists each of our ice cream flavors and their respective prices. Way to go!

Note – Before Cascading Style Sheets (CSS) became popular, tables were very often used as a way to lay out information on a web page. This method however is now quite outdated and tables should no longer be used for webpage layouts.

Photo Credit: Emyan via Compfight cc

Leave a Comment