Tables Part 2

 

Column Width Control

 

You can control the overall width of tables and that of individual cells.  In fact, unless you specify width, tables rearrange themselves to fit browser windows just like regular text.   This may not present a problem if your table is narrow.  However, when tables are too wide for the window, they appear on-screen in unacceptable ways.  Design and readability may be affected adversely.

 

You control overall table width two ways:

1.      By pixel

2.      By percent.

 

Tables will always have the same proportion of window width when controlled b persent.

 

You control individual cell width two ways as well:

1.      By pixel

2.      By percent.

 

Cells will always have the same width when controlled by pixel.  Cells will always be the same proportion of table width when controlled by percent.

 

One simple way to handle width is to choose an overall pixel width for the table first and then pick percentages for each column.  Percentages, pixel dimensions, and column spanning can affect each other depending on table layout.  If you are not getting what you want, look at al these variables.  Remember that all rows in a cell will have the same total width.  But cells in the same row can have different widths.

 

<TABLE BGCOLOR=FFFFFF BORDER Width=400BORDERCOLOR=808080 BORDERCOLORLIGHT=707070 BORDERCOLORDARK=202020>

<CAPTION Align=top> My Student Marks</CAPTION>

<TR BGCOLOR=”YELLOW”>

<TH Colspan=2>Name and Course</TH><TH Width=25%>Mark</TH>

</TR>

<TR>

<TD BGCOLOR=009000>Andy</TD><TD Rowspan=2>Info Tech</TD><TD>98</TD>

</TR>

<TR>

<TD>Chris</TD><TD>Info Tech</TD><TD>92</TD>

</TR>

<TR>

<TD>Molly</TD><TD>Math</TD><TD>34</TD>

</TABLE>

 

Put the Width argument within the <TABLE> tag.  Put the exact pixels or percent of window width after the  = symbol.  It is usually 400.

 

Put the Width argument after the <TH> or <TD>  that starts the cell. Put the percent of table width or exact pixels after the = symbol.

 

My Student Marks

 

Name    and   Course		Mark
Andy	Info Tech	98
Chris		92
Molly	Math	34

 

 

Alignment

 

You can control alignment of text and graphics in table cells through HTML programming.  Unless you specify alignment, table captions and headings appear centered, and all other cells align left in the middle of the cell.  This looks fine for many tables.  However, you may want to improve design and readability through alignment.

 

You control horizontal and vertical alignment of entire rows by putting the Align argument within the <TR> tag.  You control horizontal and vertical alignment of individual cell by putting the Align argument within the <TH> or <TD> tags.

 

<TABLE BGCOLOR=FFFFFF BORDER Width=400 BORDERCOLOR=808080 BORDERCOLORLIGHT=707070 BORDERCOLORDARK=202020>

<CAPTION Align=top> My Student Marks</CAPTION>

<TR Align=Left BGCOLOR=”YELLOW”>

<TH Colspan=2>Name and Course</TH><THWidth=25%>Mark</TH>

</TR>

<TR>

<TD BGCOLOR=009000>Andy</TD><TD Rowspan=2>Info Tech</TD><TD>98</TD>

</TR>

<TR>

<TD>Chris</TD><TD Align=Center Valign=top>Info Tech</TD><TD>92</TD>

</TR>

<TR>

<TD>Molly</TD><TD>Math</TD><TD>34</TD>

</TABLE>

Try it.  See what happens when you use the Align with the <TD> and <TH> and <TR>.  Play with it awhile.

 

 

 

Non-Wrapping Text

 

You can prevent text in table cells from automatically wrapping to the width of the cell.  Just use the Nowrap argument inside the <TD> tag.

 

Example:

 

<TD Nowrap> Basic Types of student</TD>

 

Use it in your program.  Does it make a difference?  It will later.

 

Borders, Spacing and Padding.

 

You can vary three basic parts of a table that change its look:  the border, spacing, and padding.

 

The border is the frame outside the table. 

 

Cellpadding alters the thickness of the empty space between grid lines and text in the cells.

 

If you don’t want any borders, eliminate the border argument entirely from the <TABLE> tag.  People like using the tables without the borders for organizational purposes.

 

The other two can be used in this format:

 

<TABLE BORDER=10 Cellspacing=6 Cellpadding=10>

 

Try this and see what happens.

 

Put it right in the table tag, before the caption argument.

 

Border Color

 

That’s a simple one.  Try in the table tag with the background color, and after the border size

 

<TABLE BGCOLOR=FFFFFF BORDERCOLOR=808080 BORDERCOLORLIGHT=707070 BORDERCOLORDARK=202020>

 

• Bordercolor changes the entire border.
• Bordercolorlight changes the color of the light side
• Bordercolordark changes the dark side. 

 

Try it.

 

Now for another rubric.