Learn How to Make Tables in HTML

Page content


Tables are currently being deprecated by the W3C in favor of using CSS based layouts. This does not mean the use of tables is not possible, though the use of tables vs. CSS is really a matter of preference to the designer. CSS is recommended in terms of ease of use and usability for the audience because of browser compatibility issue.

Why Use a Table

To make tables in HTML, the coding is actually the easy part. The difficult aspect is the planning. But if you do the planning beforehand to know exactly what it is that you want, you can learn to easily and quickly make tables.

Tables can added structure to your webpages, particularly if you want to display a series of numbers or other such data. Tables make the information easy to read and are aesthetically pleasing to users.

Size of Your Table

The first thing you want to figure out is the size of the table. It is advisable to plan the size in pixels, even though percentages are allowed. Using pixels ensures that the table will look how you want across browser platforms and screen sizes. The width is the dimension you most need, however knowing the height makes it even easier.

The next thing you want to decide on is the layout of the table. In other words, how many rows and how many columns do you want? The possibilities are virtually endless, although any table with more than four or five columns can sometimes become too cluttered.

Thirdly, you want to give each row and each column corresponding dimensions. If you set the width and height of the overall table, you want to make sure that the width of the columns adds up to the overall width of the table and that the overall height of the rows adds up to the overall height of the table.

Table Borders & More

Next, the stylistic look and placement on the page should be considered. Do you want the table to have a border? If so, how thick and what color? You should also think about if you want the table aligned to the left of the page, in the middle of the page or on the right of the page.

Finally, you are ready to put your table into action and the applicable content into each area of the table. You can add virtually anything into the table, with text and pictures being the most common.