Learning Tables' Basic

HTML or HyperText Markup Language is the language for web pages. It is the language which browsers (Internet Explorer, Mozilla’s Firefox, etc.) used to interpret and enables to display a certain webpage. Generally, a webpage is composed of table and nested tables (tables inside the tables). Though the existence of XML had made the usage of table, still as a beginner, I think that learning the purpose and the essence of using a table is a very important step you need to take.

When I still do not know how to create a web page my initial question is how did they know how to place a certain part on this area on this side? Only to know later on that an html web page is composed of tables with columns and rows like this:



Webmasters (persons who create web page) also modify the table according to their need:











First of all, html are composed of various tags, but for now we will first discuss the tags in creating tables, columns and rows.

<table> This is the tag for creating a table
<tr> This is the tag used in creating a row
<td> This is the tag used in crating a column

What you see above are the start tags, every tags have start and end tag. Though there are some tags that do not require end tags, which we can discuss on the future, but for now we will use html elements or tags that use start and end tags to avoid confusion. What we are trying to do in our initial step is to use the basic principle of html, so lets begin.

If you want to create a table you will need to use the table <table> tag, relatively if you want to create column you will use the column <tr> tag, and of course, the same goes with the row <td> tag.

Now here’s a basic composition or code structure of a table with columns and row with it:

<table border="1"> <tr> <td> This is where you place your web page’s content (images, videos, text, etc.) </td> </tr> </table>

The output for our html code at the top will be:

This is where you place your web page’s content (images, videos, text, etc.)

As you can see, we just created a basic table with one column and with one row. First thing first, the actual output of the code we created will be:

This is where you place your web page’s content (images, videos, text, etc.)

As you can see, the table is not visible. By default the table’s border is set to zero unless specified by the user. So I just placed a border to show a table with one column and one row.

I just added an attribute to our table tag <table> for it to have a border, which is:

<table border="1"> <tr> <td> This is where you place your web page’s content (images, videos, text, etc.) </td> </tr> </table>

Html is composed of different tags, but on how you would want a certain tag to be displayed will be its attribute’s job. Different tags have their own attributes, in common people’s term, attributes is people’s characteristics.

For example, html tag could be represented by people’s hair, so it is easy to know that most people have a hair tag. But on what color, style or length will be the hair tag’s attributes, which would be:

<hair color=”red” length=”500cm” style=”retro”> </hair>

Using real html tag, it could be:

<table border=”0” width=”95%” bgcolor=”green” ….etc, etc.> </table>

As I have said, different tags have its different attributes. We will discuss them in detail in future discussion, but for now it is useful to first understand the relationship of tags and their attributes.

It is of course the same principle applied to the column <td> and the row <tr> tags.

<tr valign=”middle” height=”100”> </tr>

<td align=”center” width=”150” bgcolor=”red”> </td>

It is important to know that you should create a logically defined table, meaning that a basic table must have an equal numbers of columns in each rows, or vice-versa. For example:



This is a basic rule of creating a table, in the figure above all columns have three rows and all rows have four columns.

But this doesn’t give much flexibility to a webmaster doesn’t it? What if you need to create a table like this:



1 – Your website’s banner
2 – Navigation links area
3 – Display window

In this case, webmaster use an attribute colspan=”” for the column tag . So, let’s convert the display above into its corresponding html code:

<table> <tr> <td colspan=”2”> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table>

Oh, by the way, as you had noticed on our examples, some of our codes are indented. This is because a good coder must have a good habit of indenting his codes, in this way a coder can easily identify his tags. Since a complete webpage would consist numbers of tag combinations, indenting a tag would enables a coder to pinpoint a tag’s start and ending point. This is called proper nesting of tags, nesting means putting a tag inside a tag, for example:

<table> </tr> </td> </td> </tr> </table>

As you can see, the row tag <tr> is nested inside the table tag <table> and the column tag <td> is nested inside the row tag <tr> and the table tag <table>. What you can see on the above html code are a very simple example of nested tags.

So we are done on the surface of html, let’s go to a more detail discussion on the next topics.