Google+ logo Twitter logo Youtube logo

Tags - Tables


Introduction

In HTML we can create tables. This can be useful for e.g. a calendar view. We can announce a table with a <table> tag. As you probably know tables exists out of rows and columns, in HTML: this is exactly the same. To indicate rows and columns there are some different tags. A row is indicated by a <tr> tag and a cell with a <td> tag. TR stands for table-row and TD stands for table-data.

Seperating information from columns

It is necessary for a table to "know" what's the heading of the table and to know what is the actual table data. So: we can put a row of columns i.e. a <thead> tag. (thead stands for table-head) The table-columns are marked with a tag: &th;th>. (th stands for table-head) The actual table information has to be in a <tbody> tag. With these tags we can seperate the table-heading from the actual table-data.

Example

Say; we want to create an calender with some activities, it could look like this;

What? When? Costs?
learn HTML now free
take a walk tomorrow free
  • In this example there is 1 table (the <table> tag)
  • In this example the table has 1 attribute (border="1")
  • In this example there are 3 rows (the <tr> tags)
  • Each row exists out of 3 cells (<td> tags)
So; we announce the table with the <table> tag. Then we announce a row (with the <tr> tag), the cells in the row are created with the <td> tags. After all cells have been created we close the table-row tag with the closing </tr> tag. If all the rows are closed, we can finally close the table itself.

Beside all this; we indicate the table-head with the <thead> tag, and we announce the actual table-data with the <tbody> tag.

Case study

The example above looks like this:

What? When? Costs?
learn HTML now free
take a walk tomorrow free

Notes

This is a lot of information; the fact that tables exists out of multiple tags can be quite confusting, don't worry about it! That you not fully understand tables is understandeble, but; it will come naturally. I hope to give you a bit more overview with the list down-under.

In every image, we see the same table; but the tag in the image-heading has one or more background-images:












Final words

As indicated above, this part is a lot of information with many (sometimes confusing) tags. If you feel that you do not understand tables, don't worry!

It would be nice if you understand it but it's not a must. If you like you can play further with tables.

Fully understanding tables will come naturally, in time.


Leave a comment ...

Name (will be visible)
E-mailaddress (will not be shown)
Comment
Type the code illustrated below

Back to top