CS 561 - Lecture Notes
Tables






Tables are used to present material in more organized way.
They are also very useful to divide a page or a section of page for better layout of material. CHAR is a new value for ALIGN. It can be used with COL, COLGROUP, THEAD, TBODY, TFOOT, TH and TD tags.
To specify CHAROFF we can use a number of different units:
px or none pixels
pt points
pi picas
in inches
cm centimeters
mm millimeters
em em units
% percent

Empty Cells

To affect cells we have two options:
<TD></TD>  does not display the cell
<TD&NBSP</TD>  creates an empty cell
Table Cells can contain text, images, tables, lists, and other HTML component.

COLGROUP, THEAD, TFOOT and TBODY tags

COLGROUP is used to group together contiguous columns
THEAD is used to group together rows to form a header for a table
TFOOT is used to group together rows to form a footer for a table (should precede TBODY tag)
TBODY is used to group together contiguous rows in body of a table
Example:
<COLGROUP WIDTH="40px" ALIGN=RIGHT SPAN=4> specifies that the next 4 columns will be 40 pixels wide and aligned right.

Color In Tables

Netscape and Internet Explorer have added HTML extensions to add colors to tables. For that we can use the following attributes:
BGCOLOR color cells: can be used in TABLE, TR, TH and TD tags
BORDERCOLOR color of table borders: can be used in TABLE, TH and TD tags
BORDERCOLORDARK color of the dark part of table border (Internet Explorer only)
BORDERCOLORLIGHT color of the light part of table border (Internet Explorer only)
Colors can be specified as 3 (RGB) component, e.g. #00FFFF (Aqua) Or as named colors: Black, Silver, Gray, Maroon, Red, Purple, Fuchsia, Green, Lime, Olive, Yellow, Navy, Blues, Teal, Aqua, White.

Examples

<HTML>
<HEAD>
<TITLE>August 1997</TITLE>
</HEAD>
<BODY BGCOLOR="AQUA" TEXT="BLACK" LINK="GREEN" VLINK="BLUE" ALINK="RED">
<H1>Days in August 1997</H1>
<P>
<H2> Table Aligned To Center</H2>
<TABLE BORDER=5 ALIGN=CENTER>
<CAPTION ALIGN=BOTTOM>August 1997</CAPTION>
<TR ALIGN=RIGHT VALIGN=BOTTOM>
<TH>Monday</TH><TH>Tuesday</TH><TH>Wednesday</TH><TH>Thursday</TH>
<TH>Friday</TH><TH>Saturday</TH><TH>Sunday</TH></TR>
<TR>
<TD COLSPAN=2>1</TD><TD COLSPAN=3>2</TD><TD>3</TD></TR>
<TR ALIGN=RIGHT VALIGN=TOP>
<TD>4</TD><TD>5</TD><TD>6</TD><TD>7</TD><TD>8</TD><TD>9</TD><TD>10</TD></TR>
<TR>
<TD>11</TD><TD>12</TD><TD>13</TD><TD>14</TD><TD>15</TD><TD>16</TD><TD>17</TD></TR>
<TR>
<TD>18</TD><TD>19</TD><TD>20</TD><TD>21</TD><TD>22</TD><TD>23</TD><TD>24</TD></TR>
<TR>
<TD>25</TD><TD>26</TD><TD>27</TD><TD>28</TD><TD>29</TD><TD>30</TD><TD>31</TD></TR>
</TABLE>
</BODY>
</HTML>
August 1997

Days in August 1997

Table Aligned To Center

August 1997
MondayTuesdayWednesdayThursday FridaySaturdaySunday
123
45678910
11121314151617
18192021222324
25262728293031

<HTML>
<HEAD>
<TITLE>August 1997</TITLE>
</HEAD>
<BODY BGCOLOR="AQUA" TEXT="BLACK" LINK="GREEN" VLINK="BLUE" ALINK="RED">
<H1>Days in August 1997</H1>
<P>
<H2> Table with Rowspanned Data Item</H2>
<TABLE BORDER=5>
<CAPTION>August 1997</CAPTION>
<TR>
<TH>Monday</TH><TH>Tuesday</TH><TH>Wednesday</TH><TH>Thursday</TH>
<TH>Friday</TH><TH>Saturday</TH><TH>Sunday</TH></TR>
<TR>
<TD></TD><TD></TD><TD></TD><TD></TD><TD>1</TD><TD>2</TD><TD ROWSPAN=5>Fun Day</TD></TR>
<TR>
<TD>4</TD><TD>5</TD><TD>6</TD><TD>7</TD><TD>8</TD><TD>9</TD></TR>
<TR>
<TD>11</TD><TD>12</TD><TD>13</TD><TD>14</TD><TD>15</TD><TD>16</TD></TR>
<TR>
<TD>18</TD><TD>19</TD><TD>20</TD><TD>21</TD><TD>22</TD><TD>23</TD></TR>
<TR>
<TD>25</TD><TD>26</TD><TD>27</TD><TD>28</TD><TD>29</TD><TD>30</TD></TR>
</TABLE>
</BODY>
</HTML>
August 1997

Days in August 1997

Table with Rowspanned Data Item

August 1997
MondayTuesdayWednesdayThursday FridaySaturdaySunday
12Fun Day
456789
111213141516
181920212223
252627282930

<HTML>
<HEAD>
<TITLE>August 1997</TITLE>
</HEAD>
<BODY BGCOLOR="AQUA" TEXT="BLACK" LINK="GREEN" VLINK="BLUE" ALINK="RED">
<H1>Days in August 1997</H1>
<P>
<H2> Table Aligned To Left (Default)</H2>
<TABLE BORDER=5 CELLSPACING=10>
<CAPTION>August 1997</CAPTION>
<TR> <TH WIDTH=10% HEIGHT=80>Monday</TH><TH WIDTH=10%>Tuesday</TH><TH WIDTH=10%>Wednesday</TH><TH WIDTH=10%>Thursday</TH>
<TH WIDTH=10%>Friday</TH><TH WIDTH=10%>Saturday</TH><TH WIDTH=10%>Sunday</TH></TR>
<TR>
<TD HEIGHT=80></TD><TD></TD><TD></TD><TD></TD><TD>1</TD><TD>2</TD><TD>3</TD></TR>
<TR ALIGN=RIGHT VALIGN=TOP>
<TD HEIGHT=80>4</TD><TD>5</TD><TD>6</TD><TD>7</TD><TD>8</TD><TD>9</TD><TD>10</TD></TR>
<TR ALIGN=MIDDLE VALIGN=BOTTOM>
<TD HEIGHT=80>11</TD><TD>12</TD><TD>13</TD><TD>14</TD><TD>15</TD><TD>16</TD><TD>17</TD></TR>
<TR>
<TD HEIGHT=80>18</TD><TD>19</TD><TD>20</TD><TD>21</TD><TD>22</TD><TD>23</TD><TD>24</TD></TR>
<TR>
<TD HEIGHT=80>25</TD><TD>26</TD><TD>27</TD><TD>28</TD><TD>29</TD><TD>30</TD><TD>31</TD></TR>
</TABLE>
</BODY>
</HTML>
August 1997

Days in August 1997

Table Aligned To Left (Default)

August 1997
MondayTuesdayWednesdayThursday FridaySaturdaySunday
123
45678910
11121314151617
18192021222324
25262728293031

<HTML>
<HEAD>
<TITLE>August 1997</TITLE>
</HEAD> <BODY BGCOLOR="AQUA" TEXT="BLACK" LINK="GREEN" VLINK="BLUE" ALINK="RED">
<H1>Days in August 1997</H1>
<P>
<H2>Color in Tables</H2>
<TABLE BORDER=10 CELLSPACING=10 BGCOLOR="Gray" BORDERCOLOR="BLACK">
<CAPTION>August 1997</CAPTION>
<TR>
<TH WIDTH=10% HEIGHT=80>Monday</TH><TH WIDTH=10%>Tuesday</TH><TH WIDTH=10%>Wednesday</TH><TH WIDTH=10%>Thursday</TH>
<TH WIDTH=10%>Friday</TH><TH WIDTH=10%>Saturday</TH><TH WIDTH=10%>Sunday</TH></TR>
<TR>
<TD HEIGHT=80></TD>" "<TD></TD><TD></TD><TD></TD><TD BGCOLOR="RED">1</TD><TD>2</TD><TD>3</TD></TR>
<TR ALIGN=RIGHT VALIGN=TOP>
<TD HEIGHT=80>4</TD><TD>5</TD><TD>6</TD><TD>7</TD><TD>8</TD><TD>9</TD><TD>10</TD></TR>
<TR ALIGN=MIDDLE VALIGN=BOTTOM>
<TD HEIGHT=80>11</TD><TD>12</TD><TD>13</TD><TD>14</TD><TD>15</TD><TD>16</TD><TD>17</TD></TR>
<TR>
<TD HEIGHT=80>18</TD><TD>19</TD><TD>20</TD><TD>21</TD><TD>22</TD><TD>23</TD><TD>24</TD></TR>
<TR>
<TD HEIGHT=80>25</TD><TD>26</TD><TD>27</TD><TD>28</TD><TD>29</TD><TD>30</TD><TD>31</TD></TR>
</TABLE>
</BODY>
</HTML>
August 1997

Days in August 1997

Color in Tables

" "
August 1997
MondayTuesdayWednesdayThursday FridaySaturdaySunday
123
45678910
11121314151617
18192021222324
25262728293031

<HTML>
<HEAD>
<TITLE>August 1997</TITLE>
</HEAD>
<BODY BGCOLOR="AQUA" TEXT="BLACK" LINK="GREEN" VLINK="BLUE" ALINK="RED">
<H1>Days in August 1997</H1>
<P>
<H2>Color in Tables</H2>
<TABLE BORDER=10 CELLSPACING=10 BGCOLOR="Gray" BORDERCOLOR="BLACK">
<CAPTION>August 1997</CAPTION>
<TR>
<TH WIDTH=10% HEIGHT=80>Monday</TH><TH WIDTH=10%>Tuesday</TH><TH WIDTH=10%>Wednesday</TH><TH WIDTH=10%>Thursday</TH>
<TH WIDTH=10%>Friday</TH><TH WIDTH=10%>Saturday</TH><TH WIDTH=10%>Sunday</TH></TR>
<TR>
<TD HEIGHT=80></TD>" "<TD></TD><TD></TD><TD></TD><TD BGCOLOR="RED">1</TD><TD COLSPAN=2 ROWSPAN=5>
Weekend Activities<BR>
<UL>
<LI>Tennis
<LI>Reading
<LI>Bridge
<LI>Class Work
<LI>Singing
<LI>Gardening
<LI>House Cleaning
</UL>
<IMG SRC="SMALL.GIF">
</TD></TR>
<TR ALIGN=RIGHT VALIGN=TOP>
<TD HEIGHT=80>4</TD><TD>5</TD><TD>6</TD><TD>7</TD><TD>8</TD></TR>
<TR ALIGN=MIDDLE VALIGN=BOTTOM>
<TD HEIGHT=80>11</TD><TD>12</TD><TD>13</TD><TD>14</TD><TD>15</TD></TR>
<TR>
<TD HEIGHT=80>18</TD><TD>19</TD><TD>20</TD><TD>21</TD><TD>22</TD></TR>
<TR>
<TD HEIGHT=80>25</TD><TD>26</TD><TD>27</TD><TD>28</TD><TD>29</TD></TR>
</TABLE>
</BODY>

August 1997

Days in August 1997

Color in Tables

" "
August 1997
MondayTuesdayWednesdayThursday FridaySaturdaySunday
1 Weekend Activities
  • Tennis
  • Reading
  • Bridge
  • Class Work
  • Singing
  • Gardening
  • House Cleaning
45678
1112131415
1819202122
2526272829