The Original Web-Wise-Wizard
Web Authors, Web Developers and Webmasters Internet Toolbox
Best viewed at 1024 x 768 using a colour depth greater than 256

HTML Tables Tutorials

 

About HTML Tables ...

Tables are an integral part of HTML and this tutorial stresses how important it is to get a thorough grounding in the principles of creating them. There is a magic formulae that enables you to write successful cross-browser tables right from the start and this page which is simply written and designed for the beginner, leads you through the various stages of learning the principles and techniques behind this magic formulae.

HTML Tables Tutorial

A Necessary Skill

Learning to create tables correctly is a very necessary skill if you want to create successful cross-browser web pages. Yet many people who are learning HTML stumble at this particular hurdle because their tables won't work at all or they will appear to work in one browser but behave differently in another browser.

There are usually two primary reasons for this problem. The first reason is that they haven't grasped the principle of how an HTML table operates, even though they have learnt some of the HTML table tags syntax. The second reason is that they haven't learnt how to write their HTML script in a structured manner and their script is difficult or impossible to understand. You see this all too often on the Web and I am sure that my tables wouldn't work under these circumstances.

So lets move forward and begin the tutorial. We will be working towards creating a simple table of nine cells, arranged in a matrix of three rows down by three cells across. The principles that you learn in this tutorial should be applied to every table you ever write in the future, no matter how complex that table might be. There are no exceptions.

Basic Table Tags

Although there are other tags associated with HTML tables we are going to concentrate on four basic tags. You should consider them as the basic building blocks of a table and they are listed here.

<table></table>  The table start tag and table end tag which creates a table.

<tr></tr>  The table row start tag and table row end tag which creates a table row.

<th></th>  The table header start tag and table header end tag which creates a table header cell.

<td></td>  The table data start tag and table data end tag which creates a table data cell.

We have deliberately listed the start and end tags in this pedestrian fashion to establish the importance we place on using closing tags, if only to enable you to understand each different section of the table in your script, both now and in the future. Closing tags are a part of the HTML 4.01 specification.

A One Row Table

If you studied the graphic at the start of this tutorial you will remember that it states that the Cardinal Rule is that tables are made up of rows not columns. Bearing this in mind we will now create a simple table with one row down and three cells across.

the table ...

Cell 1 Cell 2 Cell 3

the Markup ...

<table border="1" cellpadding="7" cellspacing="0">

<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>

</table>

Don't be frightened to use line feeds (carriage returns) in your scripts. Vertical space separates different sections of your Markup and makes it more readable and understandable. White space costs nothing and is worth a great deal. Also, don't be worried if some of the lines of script appear a little short at the moment. That's fine because it is far better to have short structured lines rather than long lines that are not structured and are difficult to understand.

It is a good general rule with tables that if your script is un-structured and higgledy-piggledy then your tables will almost certainly be the same, whereas if your script is structured, neat and understandable then your tables are likely to 'work' correctly in all cases.

A Four Row Table

If there is a lesson that you should learn from this tutorial it is that rows should be separately sectioned within your table script and to demonstrate this we will now create another simple table, this time with four rows down and each containing three cells apart from the top row which is a TABLE Header and spans the three cells.

the table ...

Row 1,Header
Row 2,Cell 1 Row 2,Cell 2 Row 2,Cell 3
Row 3,Cell 1 Row 3,Cell 2 Row 3,Cell 3
Row 4,Cell 1 Row 4,Cell 2 Row 4,Cell 3

the Markup ...

<table border="1" cellpadding="7" cellspacing="0">

<tr>
<th colspan="3">Row 1,Header</th>
</tr>

<tr>
<td>Row 2,Cell 1</td>
<td>Row 2,Cell 2</td>
<td>Row 2,Cell 3</td>
</tr>

<tr>
<td>Row 3,Cell 1</td>
<td>Row 3,Cell 2</td>
<td>Row 3,Cell 3</td>
</tr>

<tr>
<td>Row 4,Cell 1</td>
<td>Row 4,Cell 2</td>
<td>Row 4,Cell 3</td>
</tr>

</table>

If you study the table script above you will see that it has been created in five distinct sections. These are the table start, the three distinct table rows and the table finish. This is the magic formulae for writing successful cross-browser tables that work correctly under all circumstances and if your table scripts look like the one above then you are well on your way to creating successful cross-browser tables.

Summing Up

The secret of writing successful cross-browser tables is to create them as a series of rows and to section each row in your table script by using line feeds and by including both start and end tags for each row and cell. This ensures that you understand what the script is doing.

There are possibly as many as one thousand tables in Web-Wise-Wizard and some of them are incredibly complex while others are nested several levels deep. They all behave correctly in the variety of browsers we have tested them in and this has been achieved by using the principles explained in this tutorial. Easy Peasy!

Adding CSS Styles To Tables ...

Experienced web developers tend to live in a rarified atmosphere and on occasion, it does them no harm at all to get down on all fours and look up at a problem from a learners perspective. One such opportunity arose for me when a Web-Wise-Wizard user wrote to me asking for help with applying CSS styles to an HTML Table. I have included his initial question and my replies in the belief that studying them will be of help not only the user, but also to other learners who are struggling in their quest to learn web design.

Question from Bill Sheppy of Somerset, England. 16-Aug-2005 ...

I have been looking through all the summaries, references, etc I can find on both HTML and CSS and cannot find the answer to this simple problem : it concerns TABLES, so I will show you by a simple example
 
<TABLE COLS="2" WIDTH="100%"> (What is the new HTML 4.01 equivalent of setting up multiple columns ?)
<TR>
<TD WIDTH=".25" BGCOLOR="Red"> ........ </TD> ( I cannot find a way to set up a colour in a specific data cell - is there a way ?)
<TD WIDTH=".75">..... </TD> (Is this still the way to set up relative widths ? I cannot find details of this )
</TR></TABLE>
 
Do I have to include the <TBODY> tag ?

Correcting The Markup

Before I start answering Bill's primary question which I perceive to be about applying CSS Styles to the TABLE, I feel it would be useful to go through his TABLE Markup in detail so that we are not trying to apply styles to incorrect Markup. Firstly, his Tag structure is perfect and he has created a TABLE with one Row and two Cells. All the Tags open and close correctly but he has started to get himself into some deep water with the TABLE Attributes which I will deal with in some detail below.

  1. I have rewritten your Markup using lower case which is required under the upcoming XML standard.
  2. The Cols Attribute is not required and is now depreciated under the W3C 'HTML 4.01 Strict' standard.
  3. The TABLE Width Attribute is only necessary if you want the table to be displayed across the full width of the available space.
  4. I have included a TABLE Border Attribute so that the result can be better displayed in a browser.
  5. I have included TABLE Cellpadding and Cellspacing Attributes and these should always be included in an opening TABLE Tag.
  6. I have never seen Width Attribute values displayed using decimal notation [ .25 | .75 ] and have replaced them with percentage notation [ 25% | 75% ]. I tested your decimal notation in Internet Explorer 6 and it does not work.
  7. Although not mandatory, I have replaced your Bgcolor Attribute value 'red' with it's HEX color code equivalent '#FF0000'. Try to use HEX color codes if possible, not color names.
  8. No, you do not have to include the TBODY Tag.

HTML Markup from Bill Sheppy rewritten by Web-Wise-Wizard ...

<table cellpadding="5" cellspacing="0" style="width:100%;border:1px;">
<tr>
<td style="width:25%;background-color:#FFFFAA;">Left Cell</td>
<td class="width:75%;">Right Cell</td>
</tr>
</table> 

and these are the results displayed in your browser ...

Left Cell Right Cell

Converting To Styles

The world of web design is undergoing a revolution and previously, HTML could have been described as providing 'structure and formatting' to a text document whereas now, HTML is better described as providing 'structure' to a text document and it is now the job of CSS styles to provide the 'formatting'.

In order to better demonstrate the conversion to Styles, I thought it best to create a 'complete' web page so that you can see how to set your styles up and then see how they are applied to the TABLE and to the individual TABLE Cells. This page will validate to the W3C '4.01 Strict' standard and you should use the page as the basis for all your web pages in the future.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Bill Sheppy's CSS Table</title>

<meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1">

<style type="text/css">
<--

#billsTable {
width:100%;
border-top: dotted 1px #000000;
border-right: dotted 1px #000000;
}

#illsTable td {
border-left: dotted 1px #000000;
border-bottom: dotted 1px #000000;
padding:5px;
}

#billsTable .leftCell {
width:25%;
background-color:#FF0000;
}

#billsTable .rightCell {
width:75%;
}

-->
</style>

</head>

<body>

<table cellspacing="0" id="billsTable">
<tr>
<td class="leftCell">Left Cell</td>
<td class="rightCell">Right Cell</td>
</tr>
</table> 

</body>

</html>
 
Left Cell Right Cell

Link Directly To This Page ...

help support free information on the Internet ...

Many users prefer to link directly to individual content pages on Web-Wise-Wizard. If you would like to do this then we have provided the following HTML/CSS link script which you can copy and paste directly into your HTML editor. Alternatively, you might like to use our New Dynamic Link Generator to create a link that more fully meets your own particular requirements.

the link displayed ...

Web-Wise-Wizard - HTML Tables Tutorials Tables are integral to HTML and this tutorial stresses how important it is to get a thorough grounding in them. There is a magic formulae that enables you to write successful cross-browser tables.

select/copy the link Markup ...

Featured Tutorial
Want More Traffic? Increase your Link Popularity and your PageRank by learning how to use Web Directories
Link To Us Scripts
New Dynamic Link Generator
 
If you find this page interesting or useful then others are likely to view it in exactly the same way. Providing a link to the page will be considered by the search engines as casting a vote for the page. In turn, this will help to improve the search engine ranking of the page resulting in more people being able to see the page. Your link really does count so please don't delay.
 
Post your link NOW!
 
 
Featured HTML Tables Resources
 
 
 
 
 
Copyright © 1998,2014, Gilbert Hadley, Liverpool, England