|Home | Web Design Tutorials | Free Graphics | Custom Graphics | Newsletter | Products | Specials | SEO | Sound Effects | Benefits | Login | View Cart|
HTML Tables TutorialThis page will give you an overview of tables and show example table layouts. Tables can be as large or small as you want them. This web page, for example, is laid out using tables.
What Are HTML Tables?You might consider a table as an advanced layout technique, at least compared to basic HTML. A table allows you to arrange your page into a grid of columns and rows for more precise placement control over your content. Some important things to know about tables:
Table Tags and DefinitionsFor the simplest, single cell table, you'd only need these basic tags:
<table> <tr> <td>Your content goes here.
</td> </tr> </table>Of course, using a table that way wouldn't give you any more layout control than you have with basic HTML because it only utilized one row and one column, which is what a basic web page is anyway. There are sample table layouts farther down the page that will give you a better idea of how some web pages are laid out using tables, and other tags and tag attributes that help you control the table.
Immediatly below you'll find a chart of the most commonly used table tags and attributes. For a more complete list of all the tags available refer to my Table Attributes Chart.
Note: If you need help in understanding how this chart works, see the Chart Explanation that follows.
Chart ExplanationThe column labeled Tag lists the most basic table tags. The column labeled Tag Attribute lists the attributes that may be used with the corresponding tag from the Tag column. The column labeled Function lists what the attribute modifies for the corresponding tag or attribute, depending which it is horizontally aligned with, and it also lists the possible values for the attribute.
To use an attribute and value to modify a tag, just put them together. Here's an example from the top of the chart:
<table border="1">I used the table tag, added the border attribute to it, and gave it a value of one pixel. The table tag was in the first column, the border attribute was in the second column, and the value was in the third column. Easy as one, two, three!
Sample Table LayoutsIn the members area I have a couple dozen table samples with copy and paste code. The tables below, while visually smaller than a real page layout, will give you an idea of how some web pages are laid out using tables. There are hundreds of ways to design your table grid, this barely touches the surface.
For many design styles, there are also tables within tables. When laying out complicated tables it's smart to use borders until you have the design you want, even if you're not planning on using borders in the final design. Complicated tables can get messed up very easily, even for an expert. Using the border will help you visualize it and troubleshoot layout problems. Once your table design is perfected, you can go back and remove the borders.
Notice Table 1 below. The first table cell spans two rows. Cells can span multiple rows by using the rowspan="..." attribute and value. Table 2 below shows the first cell spanning two columns. Cells span multiple columns by using the colspan="..." attribute and value. The table tutorials in the members area goes into much more depth and there are many sample tables with the code provided. The members area also has a free software program you can download that will generate basic table code for you, along with better reference charts (over 30 reference charts in all).
Here's the link again for the Table Attributes Chart.
Almost a NewsletterSubscribe today and get a free gift, The Science of Getting Rich. Learn more, or subcribe below:
Did you know...The member's site has about 100 standards compliant HTML and CSS tutorials, 31 handy reference charts, reprintable content, web graphics, exclusive fonts, free software, free ebooks and more? All this for less than 9 cents a day! [ Details ]
Home | Web Design Tutorials | Free Graphics | Newsletter | Products | Specials | SEO | Sound Effects | Press Room