Now that we've learned how to setup a basic table, we can go on to the advanced portions of tables. The more advanced portions of tables can be a bit tricky at times, but aren't very hard to understand and pick up. Keep in mind that the rest of information we'll learn about tables will simply be attributes that can be used inside different aspects of tables; some can be used within the table row, table data and even the table tag itself.

Writers Note: HTML is a programming language that is best learned in steps, it builds upon itself and every part that was learned before and continually used over and over again.

The first thing we're going to take a look at is going to column spans as these will be an integral part of building and designing tables that can be used in many different applications. Column spans are used to span one column across multiple columns. Don't worry, it's no where near as hard to use as how hard it sounds. So let's take a look at a few examples, so we'll better understand how to utilize and properly use column spans.

Code Example

<TABLE BORDER=”1”>
<TR>
<TD COLSPAN="3">Header</TD>
</TR>
<TR>
<TD>Table Data</TD>
<TD>Table Data</TD>
<TD>Table Data</TD>
</TR>
<TR>
<TD>Table Data</TD>
<TD>Table Data</TD>
<TD>Table Data</TD>
</TR>
</TABLE>

Output Example

Header
Table Data	Table Data	Table Data
Table Data	Table Data	Table Data

We used a small border to display how this table will output in a browser, but as we can see with the column span tag, we’re able to have a header type deal on top and span it across three columns. This is very useful for those not utilizing un-ordered and ordered lists, but still need to keep all the information in a table style display so it’s easier to read and understand.

We can see from the column span number that we spanned the top row across all three of the columns beneath it. We could span the column across two or even just one if we’d like, but if the information contained within the row is too long, the information will break down another line in the table, and could break the look we might be trying to achieve.

Let’s take a look at an example of a column only spanning one column, but using more information in the box so we can see how it’s broken down. In this example we’re going to use a new attribute that we’ll learn more about later. The new attribute will allow use to demonstrate what will happen with a table when the column span attribute isn’t set correctly.

Code Example

<TABLE BORDER=”1” WIDTH=”100”>
<TR>
<TD COLSPAN="1">Header</TD>
</TR>
<TR>
<TD>Table Data</TD>
<TD>Table Data</TD>
<TD>Table Data</TD>
</TR>
<TR>
<TD>Table Data</TD>
<TD>Table Data</TD>
<TD>Table Data</TD>
</TR>
</TABLE>

Output Example

Header Information
Table Data	Table Data	Table Data
Table Data	Table Data	Table Data

We can see from the about output example what will happen if the column span setting isn’t correct. So be sure to check it and make sure it has the proper value, unless this result is desired.