HTML Table Codes for Beginners – How Table Codes Work
If 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.
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:
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?
Using 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!
Filed under: Web Design