Basics of HTML Table Structure

Tables play an important role when it comes to presenting data in an organized format. In this tutorial, you will learn how to create basic HTML tables and use the essential tags for layout and structure.

Step-by-Step Guide

Let’s start by creating your first table! First, you need to know that the basic tag for a table is. This tag encloses the entire table.

Now we will add a row. Each row is defined by the tag, which stands for "table row". In this row, there is no data yet, so it remains empty for now. You can imagine that each row can provide space for multiple columns.

Now it’s time to add some data to the table. For this, we use the -tag and add the corresponding values. Let’s assume the first name is "Jan", the email is "support@programmierenlern.info", and the birthdate is June 23, 1982. Your row should then look like this:

Make sure the table looks better now. You can add as many rows as you want by simply using more - and -tags. Let’s add another employee. We’ll call him "Joe Average", and his email might be "joe@average.com".

Now when we reload the table, we’ll see that it is growing and all the entered data is visible. The structure is important as it provides a clear overview of the information.

What if you want to add a footer at the end of the table, for example, for a copyright? This is where colspan comes into play. With colspan, you can specify how many columns a cell should span. To place a copyright over all three columns, you would write: Copyright 2015 coding-geeks.de.

After adding this footer, you should check the display. The idea is that the footer is positioned beneath the columns and presents the data clearly. In this case, the footer does not have its own column and should therefore span over the other three columns.

If you now reduce the colspan to a value of two, you could also add a second note. Let’s assume you want to display "Coding Geeks" in a new column. Use the -tag again, applying colspan correctly.

If you have followed all these steps, you have learned how to create basic HTML tables. However, the visual design should always be done through CSS to improve layout and usability. This involves separating content from layout, allowing you more flexibility in the design of your websites later on.

Summary - Creating Basic HTML Tables

You have learned the structure and use of HTML tables, starting with the setup to placing data and a footer. You can now present simple tabular data on your website.