HTML Tables Tutorials
This section of Iron Spider covers all the basics of how to write the HTML code required to create tables on your web pages. Tables are visual containers which display data in a tabular format such as the following:
| HTML | Hypertext Markup Language |
| CSS | Cascading Style Sheets |
There are countless uses for this kind of display and hence HTML coding provides a means to produce it.
HTML tables are also frequently used to create web templates although this is frowned upon in the higher echelons of web design geekery for reasons I explain on this page~> Using Tables vs. Tableless Design.
For now and for starters, let's assume you want to create HTML tables for their intended use (show data in tabular format) and get into the specifics about how to go about doing that.
Below is a list of pages which go into great detail about this (but don't worry, I'll keep things easy to understand).
Click on the headings to read each full tutorial...
HTML Table Fundamentals
Here we get into the fundamentals of HTML tables which is best demonstrated by using tables as tables (instead of for web design). We'll start with the basic <table> tag code into which must be inserted at least one table row and one table cell.
| Cell content... |
As you can see in the above example, a decorative border can be set around the table using the border attribute.
Afterward, we create a more complex table with three rows and two columns and show how table cells create the columns...
| Row 1, Cell 1 | Row 1, Cell 2 |
| Row 2, Cell 1 | Row 2, Cell 2 |
| Row 3, Cell 1 | Row 3, Cell 2 |
Background and Border Color
This page goes into detail about how to style your tables with colorful 3D borders and how to set the table's background color...
| Cell content... | Cell content... |
| Cell content... | Cell content... |
| Cell content... | Cell content... |
Table Frames and Rules
You can display only the borders you like in your tables, for example, if you want to create a table that only shows horizontal borders but no vertical, this can be easily done as in the following example...
| Cell content... | Cell content... |
| Cell content... | Cell content... |
| Cell content... | Cell content... |
Table Width and Alignment
By default, HTML sets the table width just large enough to hold the content but you can explicitly set the width to anything you like. Where the table is aligned on your web page can also be set to your liking, e.g., aligned to either the left, center or right side...
| Cell content... |
Cells 1 -Space and Alignment
Tables can be styled to display a certain amount of space between each box in the table (cellspacing). You can also configure how much space to show between the border of a cell and its contents (cellpadding) and how the content is horizontally and vertically aligned in its respective cell...
Cells 2 -Row and Column Span
It's important to be able to force rows to spread out over multiple columns and likewise force one column to 'span' several table rows. This page shows you how to do this...
And finally, if you want to learn how to use tables to (*ahem*) design web pages, please see my page on HTML Table Layouts.
for webmasters
Free Text Editors
Free Graphics Editors
Website Analysis Tools
Free Website Templates
See also:
If you need a .COM web address, you can get one quick and easy at...
| HOME | TOP | NEXT ~> |