HTML Table Codes for Beginners – How Table Codes Work

How do html table codes workIf you are new to website design this may look a bit intimidating, but it’s not really. In a nutshell, HTML table codes are used on thousands of websites.

How do they work? Tables make it easy to structure your web page and keep all the sections in place where you want them.

With tables, however, you can create menus in various areas of the page.

For instance, you can type your main sales content or product descriptions somewhere in the middle (where people tend to read the most).

You can create wrap 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 probably the easiest for a beginner to learn.

So let’s take a look at the coding for tables and see how it works.

Main Table Code Data

There are several 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” includes 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.


Learn HTML Web Design for Beginners from Home

Setting Up Cell Padding

The cell padding indicates the amount of space you’d like to have between the cell/table border and the content within that cell.

The cell spacing indicates 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 desired boldness or kept invisible.

The HTML code for the main table is:

<table> </table>

with other elements and attributes 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 need 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 table 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>

Create Web Page Headers

You can also create 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 individual cell.

Indicate where and how you want content displayed within each cell using cell properties.

Do you want the text or image aligned 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?

html table codesUsing HTML table codes, 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 feature helps your web page design come together!

If you’re totally a beginner to HTML web design, consider taking a beginner web course such as Web Design Mastery to learn HTML table code and other design features to help you get a site up and running in a jiffy! Go here to get all the details for Web Design Mastery¬† ..

Filed under: Web Design