Web Development
GUIDE

Creating Tables In HTML

Description: Sometimes we want to do things with a web page that require some more involved knowledge of HTML. One of those tasks is to create a table.

People who are new to the world of creating websites might think that there is no real need to know how to create tables in HTML unless they want to use a specific type of table to show some information or results of some kind.

But in actual fact if you know how to create tables you will be able to decide how your web page is laid out. If you want to create four columns of text you will be able to do so without any trouble at all - provided you know how to do it.

HTML relies on a system of tags to work properly, and the first thing you need to learn is which tags are relevant to the creation of tables. Whenever you are going to start making a table, you will need to begin with the tag <table>. When you've finished, you simply end with the tag </table>. The forward slash always indicates the end of that particular command.

You can create tables with and without borders as well - which is useful to know when you are designing an actual web page rather than creating a strict table. A table without borders is the simplest one you could use.

Let's say we wanted to make a table showing four names, and we wanted it to look like this:

David Michael
John Gary

This is what we would need to do. Note the table tags to denote the beginning and end of the table:

<table>

<tr>
<td>David</td>
<td>Michael</td>
</tr>

<tr>
<td>John</td>
<td>Gary</td>
</tr>

</table>

As you might know, most HTML commands are easy to understand and are abbreviations of the actual command. So, <tr> indicates a table row (with </tr> indicating the end of that row), and <td> indicates a single cell (with </td> indicating the end of that cell).

If you want to add borders to that table, you simply indicate this within the table tag itself. You can also specify how thick you want your border to be. Experiment with the number until you get the effect you are looking for.

So instead of using <table> you would use this instead:

<table border="3">

Once you get used to the various tags used for creating tables, you can start to experiment with a little more confidence.