In past tutorials we’ve looked at ways to present text, images and create links in HTML. In this tutorial we’ll look at how to create a simple table to use in your web projects.
What tables look like
|This is a table.||It has two rows.|
|It has two cells in each row.||We’ll look at how to create this.|
The first thing we need to do to create a table is create a table tag. Tables in HTML are elements that need to have closing tags for each opened tag, so be careful. With the table tag, we’re just telling the browser that we’re going to be starting a table when we open it and ending a table when we close it.
<table> <!--We need to add more tags here to make our table work--!> </table>
This code won’t display anything yet, we’ll need to specify the number of rows and cells (data) and add content to our cells to have a proper table. The text in the middle of our table tags is a comment. We’ll be looking at HTML comments in greater detail in our next HTML Basics tutorial.
Once we have our table tags, we’ll need to nest tags to specify the number of rows we want in our table. Luckily the tags are tr, for table row, and easy to remember.
<table> <tr> <!--We'll add cells here--!> </tr> <tr> <!--We'll add cells here--!> </tr> </table>
Now we just need to add the cells into the rows of our tables and we’ll be ready to go. We’ll be nesting the table data tags inside the row tags in our table to create a working table.
<table> <tr> <td>Here's their first cell in the first row</td> <td>The second cell in the first row</td> </tr> <tr> <td>Here's their first cell in the second row</td> <td>The second cell in the second row</td> </tr> </table>
Once we add the cells in, our table looks like this:
|Here’s their first cell in the first row||The second cell in the first row|
|Here’s their first cell in the second row||The second cell in the second row|
Don’t forget that you’ll need to close each of the tags you use to create your table. The tags also have to be nested within each other in the right order. Data tags sit inside row tags which rest inside the table tags.
Have questions about tables in HTML? Ask in the comments below or find me on Twitter.