Tables Course
Attributes For The Table Row
These tags shown below will effect the table row <TR> Here are some of the attributes that can be used within the table row.
Adding The Attributes To The Table Row
We will continue with the last table from page three. Lets ALIGN the table row contents. For this lesson, I have removed the alignment attributes in the table data cells of the table row we will be working with. Since this ttable row attribute will effect each table data cells across that table row.
<TABLE BORDER=1 CELLSPACING="10"
CELLPADDING="15" BGCOLOR="lightblue" WIDTH="75%">
<TR>
<TH BGCOLOR="tan">Team</TH>
<TH BGCOLOR="tan">City</TH>
</TR>
<TR ALIGN="CENTER">
<TD BGCOLOR="#98fb98">Red Sox</TD>
<TD BGCOLOR="slategray">Boston</TD>
</TR>
<TR>
<TD ALIGN="CENTER" BGCOLOR="slategray">
Yankees</TD>
<TD ALIGN="CENTER" BGCOLOR="#98fb98">
New York</TD>
</TR>
<TR>
<TD ALIGN="CENTER" BGCOLOR="tan"
COLSPAN="2" HEIGHT="75" VALIGN="BOTTOM">
Great Baseball Rivals</TD>
</TR>
</TABLE>
The Result Is:
| Team | City |
|---|---|
| Red Sox | Boston |
| Yankees | New York |
| Great Baseball Rivals | |
Our table looks the same but we now have centered aligned all the table data cells in the second table row with a single attribute within the table row. Fool around with the table row attributes. I think you get the idea now how to add the attributes to each of the table tags.
Adding Images To Your Tables
We have been using text in our table data cells but images can be used as well. These images will respond to the attributes in the same way our text did. Here are the two images for you to save to use in our lessons . Save: Red Sox Logo -- Yankees Logo Lets add images of the team logos in place of the city names that we had in text form.
<TABLE BORDER=1 CELLSPACING="10"
CELLPADDING="15" BGCOLOR="lightblue" WIDTH="75%">
<TR>
<TH BGCOLOR="tan">Team</TH>
<TH BGCOLOR="tan">Team Logo</TH>
</TR>
<TR ALIGN="CENTER">
<TD BGCOLOR="#98fb98">Red Sox</TD>
<TD BGCOLOR="slategray">
<IMG SRC="redsox.gif"></TD>
</TR>
<TR>
<TD ALIGN="CENTER" BGCOLOR="slategray">
Yankees></TD>
<TD ALIGN="CENTER" BGCOLOR="#98fb98">
<IMG SRC="yankees.gif"></TD>
</TR>
<TR>
<TD ALIGN="CENTER" BGCOLOR="tan"
COLSPAN="2" HEIGHT="75" VALIGN="BOTTOM">
Great Baseball Rivals</TD>
</TR>
</TABLE>
The Result Is:
| Team | Team Logo |
|---|---|
| Red Sox |
 |
| Yankees> |
 |
| Great Baseball Rivals | |
We have just added two images to the table data cells. Any item can be added to a table data cell. Try adding your web page counter or a banner to the cells.
A Finished Look To The Table Example
In this final example of our table. I took the liberty of adding some font attributes, i changed a few colors and added new a image, to give our example it's final look.
<TABLE BORDER=1 CELLSPACING="10"
CELLPADDING="15" BGCOLOR="lightblue"
WIDTH="75%">
<TR>
<TH BGCOLOR="white">
<FONT SIZE="5" COLOR="darkblue">
Team
</FONT>
</TH>
<TH BGCOLOR="white">
<FONT SIZE="5" COLOR="darkred">
Team Logo
</FONT>
</TH>
</TR>
<TR ALIGN="CENTER">
<TD BGCOLOR="darkblue">
<FONT SIZE="4" COLOR="white">
<B>
Boston
<BR>
Red Sox
</B></FONT>
</TD>
<TD BGCOLOR="darkred">
<IMG SRC="redsox.gif" WIDTH="68" HEIGHT="68"
ALT="red sox">
</TD>
</TR>
<TR>
<TD ALIGN="center" BGCOLOR="darkred">
<FONT SIZE="4" COLOR="white">
<B>
New York
<BR>
Yankees
</B></FONT>
</TD>
<TD ALIGN="CENTER" BGCOLOR="darkblue">
<IMG SRC="yankees.gif" WIDTH="68"
HEIGHT="68" ALT="yankees">
</TD>
</TR>
<TR>
<TD ALIGN="CENTER" BGCOLOR="white"
COLSPAN="2" HEIGHT="150">
<IMG SRC="baseball.jpg" WIDTH="208"
HEIGHT="68" ALT="baseball banner">
<P>
<FONT SIZE="3" COLOR="darkblue">
<B><I>Great Baseball Rivals</I></B>
</FONT>
</TD></TR></TABLE>
The Result Is:
| Team | Team Logo |
|---|---|
|
Boston
Red Sox |
|
|
New York
Yankees |
|
Great Baseball Rivals | |
What do you think of the final example ? As you have learned, you can do a lot with tables. It is a great way to organize text and images on your web pages. For more on tables and what they can do, Visit Table Talk here at Draac.Com.