HTML Tutorial - Understanding Tables

One of the most basics aspects of making a website is understanding tables. How do HTML tables work? How to make tables in HTML? In this free HTML tutorial, we are going to cover the basics.

First of all, let us define what an HTML table really is, the most basic way to understand it:

An html table is simply a rectangular or square space on your webpage. Your entire webpage is a large space in which content can be placed within the web page. A table is just that, it is an html code to specify a given amount of rectangular square space of your web page.

Within a table there can be cells. What are html table cells? How do html table cells work?

An html table cell is simply the square space inside a table. By default, a table without any specified cells is only one cell. You can use html to put as many cells within a table that you like. You can put two cells in your table. You can put 4 cells in your table. You can put 16 cells in your table and so on.

The next thing to understanding the basics of html tables are its' columns and rows. Since a table is a certain square or rectangular space in your web page the space extends vertically and horizontally.

A group of horizontal cells in your html table is one row. Another row of horizontal cells below that is another row. You can make as many rows as you want for the table.

A group of vertical cells in your html table is one column. Another column of vertical cells to the right can be added. You can make as many columns as you want for the table.

Therefore, as we can see a table in html can contain cells, and a new column can be added each time we add a cell to the right, and a new row can be added each time we add a cell to the bottom.

HTML Tables < table >< /table >

The basic html codes for tables are as follows:

This specifies a rectangular or square space of your web page:

< table >< /table >

Whatever content you place inside the table, it will fill it and make it larger and larger. The more you add, the larger the table will be.

(These codes must be placed into your html editor without the spaces between the angle brackets in order for it to work)

This adds three columns to the right: < td >< /td >

< table >

< td > A < /td >< td > B < /td >< td > C < /td >

< /table >

This is how the html table will appear on your webpage:

A B C

This adds three rows down: < tr >< /tr >

< table >

< tr > A< /tr >

< tr > B < /tr >

< tr > C < /tr >

< /table >

This is how the table will appear on your webpage:

A

B

C

This adds four columns to the right and three rows down:

< table >

< tr >< td > A < /td >< td > B < /td >< td > C < /td >< td > D < /td >< /tr >

< tr >< td > 1 < /td >< td > 2 < /td >< td > 3 < /td >< td > 4 < /td >< /tr >

< tr >< td > I < /td >< td > II < /td >< td > III < /td >< td > IV < /td >< /tr >

< /table>

This is how the table in html will appear on your webpage:

A B C D

1 2 3 4

I II III IV

< tr >< / tr> is the row to the right. Add another one and it'll be another row below it.< td >< / td > is the column downwards. Add another one, and it'll be another column to the right of it.