HTML table code is used on
thousands of websites. Tables make it easy 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 together, 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
bloopers may occur!
With HTML tables, however,
you can create menus in various 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 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
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.
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 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 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 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?
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 feature helps
your web page design come together!
If you're totally new 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!
