Tables can be a bit confusing if they aren’t explained correctly, as there are many options and arguments that can be used with them. We’ll start with basic table structures and move on to more complicated additions to customize the look and feel of our tables. We first must understand how tables are setup and structured before we can learn any of the extra options for tables.
So let’s first take a look at how tables are setup and structured, this will better help us understand tables and how to properly use them. Tables are setup with three different parts that let the browser know exactly how to structure it correctly. Let’s take a look at a simple table layout so we can better understand how they are setup, we’ll use an option that is available for tables so we can actually see the output example for the table.
Code Example
<TABLE BORDER=”1”>
<TR>
<TD>Anything Here</TD>
<TD>Anything Here</TD>
</TR>
<TR>
<TD>Anything Here</TD>
<TD>Anything Here</TD>
</TR>
</TABLE>
Output Example
| Anything Here | Anything Here |
| Anything Here | Anything Here |
As we can see with this example we created four tables within one small table. Let’s break down this example to better understand how each section of the table works and performs.
<TABLE BORDER=”1”> - This is the opening of our table and most options will go inside this tag. Notice how we used the border option here. We did this to give the table a border so we could actually see it. We could have used a zero here so there wasn’t any border, but we wouldn’t have been able to see the table structure at all.
<TR> - This is the start of our first section of the table, this is used to open a new row within a table.
<TD> - This is the table data tag and is used to display data within the table, each time this is opened and closed it denotes a column. Notice how we have two on each and then take a look at the output example.
</TD> - This is the closing tag for the table data.
</TR> - This would be our closing tag for each row.
</TABLE> - Finally we have our closing tag for the table itself.
Writers Note: Tables can be nested as deep as liked to achieve a better look and feel for designs or structures of a table. Note that most new browsers support this, but older browsers have a large problem displaying nested tables correctly.
Let’s take a look at another table, but this time we’ll use a borderless design. This is great for making tables of data or other information. In this example we’ll only use one column but we’ll have four rows.
Code Example
<TABLE BORDER=”0”>
<TR>
<TD>Table Header</TD>
</TR>
<TR>
<TD>Table Data</TD>
</TR>
<TR>
<TD>Table Data</TD>
</TR>
<TR>
<TD>Table Data</TD>
</TR>
<TR>
<TD>Table Data</TD>
</TR>
</TABLE>
Output Example
| Table Header |
| Table Data |
| Table Data |
| Table Data |
| Table Data |
As we can see from the above example, the table looks totally different. We also used a “0” attribute for the border tag, this will display no border at all with the table and in most cases will look cleaner. Most browsers will not display a border if a border tag isn’t defined, but it’s always good to have one to make sure a border isn’t used if it isn’t needed.
