Now that we have the basics of a table down, let’s take a look at some attributes we can use within our tables. Each of these attributes can be used within different sections of the table, so keep a close eye on each section they are being used in.

Each table has its own set of attributes, all of which will produce different effects if used correctly. Once of the more common set of attributes that many people see often are; width and height, color, background and border size. Most of these can be used in conjunction with each other and used in each tag, so let’s take a look at a few examples so we can see how they’re properly used.

Code Example

<TABLE BORDER=”3” WIDTH=”90%”>
<TR>
<TD>
<P> Any information we’d like to use can be used inside a cell. We can use normal styling codes to change the appearance of the information contained within the cell also. </P>
</TD>
</TR>
</TABLE>

Output Example

In this example we used the border and width attribute. The border text was used to incase the information with a border and we also make the table 90 percent wide, which will also be 90 percent of the total page width. Percentages are easier to use in some cases as they will stretch and move with the page as it’s being resized, they’re not always the best to use though.

We also demonstrated with this example how we can use other HTML code within a table cell to achieve a look and feel that may not be the standard. Most all styling codes can be used within these tables and are a great way to add and customize the look and feel of a table. There are a few styling attributes that can be used also to change the look and feel of a table. Let’s take a look at another example using a few of these attributes.

Code Example

<TABLE BORDER=”3” WIDTH=”90%”>
<TR>
<TD ALIGN=”Center” VALIGN=”Top”>
<P> Any information we’d like to use can be used inside a cell. We can use normal styling codes to change the appearance of the information contained within the cell also. </P>
</TD>
</TR>
</TABLE>

Output Example

We can see from the above that not much changed with our table layout out, but two very important aspects did that are great ways to organize and better display information within a table. We used an align attribute and the vertical align attribute, the align attribute aligns text either; left, right or center, and the vertical align attribute will align text on the; top, bottom or center of the table.

Another useful and in my opinion a cool tag that can be used inside tables, is the captions tag. The captions tag can be used at the top or bottom of a table to add a centered line of text to the table. This is great to use if an image is being placed within the table, or a caption is required for the data. Let’s take a look at this tag in use and how what the output looks like.

Code Example

<TABLE BORDER=”3” WIDTH=”90%”>
<CAPTION>Great Tables Made Easy</CAPTION>
<TR>
<TD ALIGN=”Center” VALIGN=”Top”>
<P> Any information we’d like to use can be used inside a cell. We can use normal styling codes to change the appearance of the information contained within the cell also. </P>
</TD>
</TR>
</TABLE>

Output Example

We can see that the tag isn’t hard to use at all and the effects are just as we suspected. This is a great way to add captions and explanations to tables or images within our HTML. Be sure to close this tag when used within a table as it could break the table altogether if it’s not properly used.