HTML Tutorial – Learn How Table code Works

Mar 24, 2012, by admin

HTML table code is used on thousands of websites. Tables make it simple to structure your web page and keep all the sections in place where you want them. Without some sort of code for structure, your images and text will likely run simultaneously, your link menus will all be moved to either above or below your text instead of in the side areas, and a number of other design blunders may transpire!

With HTML tables, however, you can create menus in different areas of the page and type your main sales content or product descriptions somewhere in the middle (where people tend to read the most). You can create enfold around text for your images, insert headlines, footers, special forms, and more. While tables aren’t the only method of doing this, using HTML table code is perhaps the easiest for a beginner to learn. So let’s take a look at the coding for tables and see how it works.

Major Table Facts

There are quite a few tags used to create a table, and all work together to get the look and feel you want. The main table data or “table properties” comprises the width of the entire table, cell padding, cell spacing, and border. You can make your table as wide as the page or set the parameters to create a more narrow table, depending on the design structure you’re shooting for.

The cell padding specifies the amount of space you’d like to have between the cell/table border and the content within that cell. The cell spacing specifies spacing between the cell or table border and the content outside the table. This helps prevent text or graphics that appear to “run together.” The border is the outline of the table, which can be sized to your wished boldness or kept invisible.

The code for the main table is: <table> </table> with other elements and features inside the opening tag for cell padding, spacing, border, etc. Here’s an example with a couple of elements:

<table border=”1″ cellpadding=”3″>

HTML Table Code for Columns and Rows

If you require multiple sections or wish to make a list of items, you can divide one table into many columns and rows instead of creating more tables. This keeps your HTML code clean and helps prevent slow loading. Use columns to control the layout of menus and content, such as smaller columns on the left and/or right side and a larger column in the middle for your main content. Rows can be used to create a header and footer area, or multiple rows can help format a list on your page (such as a main product category page or a directory).

Column Tag: <td> </td>

Row Tag: <tr> </tr>

You can also make headers for your columns using the <th> </th> table header tags. Keep in mind that you can control the look and feel of each column, row and even each entity cell. Indicate where and how you want content displayed within each cell using cell properties. Do you want the text or image lined up at the top or middle of the cell? Do you want to make the cell wider or more narrow than the others next to it?

With HTML table code, your web page will have a professional look and feel without having to know fancy programming languages. You’ll be amazed at how this simple attribute helps your web page design come together!