Multimedia SDSU

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.

Tables are defined within container tags <TABLE> and </TABLE>
Tables are defined row by row, a row is initiated with <TR>
Information within a row can be a header item or a data item

Header item is contained within <TH>..</TH>. It is presented in bold mode
Data item is contained within <TD>..</TD>

TABLE attributes:
CAPTION This container tag defines caption for the table ALIGN={TOP,BOTTOM}
BORDER specifies the border around the table in pixels; BORDER=0 no border
ALIGN aligns a table on a page {LEFT, CENTER, RIGHT}
WIDTH width of the table in pixels or percentage of the width of the browser window
HEIGHT width of the table in pixels or percentage of the width of the browser window
CELLPADING specifies the white space between a cell content and edges of the cell
CELLSPACING specifies the space between the cells, i.e. width of cell separators

Alignment of table items:

TR attributes:
ALIGN used to align items {LEFT, CENTER, RIGHT}
VALIGN used to vertically align items {TOP, MIDDLE, BASELINE, BOTTOM}
BASELINE applies to an entire row to align all elements to a common baseline
CHAR used to specify that the data in the row should be aligned within a
character, e.g. decimal point or similar.
Example: ALIGN=CHAR CHAR="." We can specify where
to place this character within a cell with CHAROFF
(character offset), e.g. CHAROFF="30%" è 30% from the
start of a cell, or CHAROFF=40 è 40 pixels from the start
of a cell.

TH attributes:
ALIGN used to align items {LEFT, CENTER, RIGHT}
VALIGN used to vertically align items {TOP, MIDDLE, BASELINE, BOTTOM}
COLSPAN used to specify that a header item spans more than one column
ROWSPAN used to specify that a data item spans more than one row

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
Monday Tuesday Wednesday Thursday Friday Saturday Sunday

1 2 3

4 5 6 7 8 9 10

11 12 13 14 15 16 17

18 19 20 21 22 23 24

25 26 27 28 29 30 31

<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
Monday Tuesday Wednesday Thursday Friday Saturday Sunday

1 2 Fun Day

4 5 6 7 8 9

11 12 13 14 15 16

18 19 20 21 22 23

25 26 27 28 29 30

<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
Monday Tuesday Wednesday Thursday Friday Saturday Sunday

1 2 3

4 5 6 7 8 9 10

11 12 13 14 15 16 17

18 19 20 21 22 23 24

25 26 27 28 29 30 31

<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
Monday Tuesday Wednesday Thursday Friday Saturday Sunday

1 2 3

4 5 6 7 8 9 10

11 12 13 14 15 16 17

18 19 20 21 22 23 24

25 26 27 28 29 30 31

<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
Monday Tuesday Wednesday Thursday Friday Saturday Sunday

1 Weekend Activities

Tennis
Reading
Bridge
Class Work
Singing
Gardening
House Cleaning

4 5 6 7 8

11 12 13 14 15

18 19 20 21 22

25 26 27 28 29

CAPTION	This container tag defines caption for the table ALIGN={TOP,BOTTOM}
BORDER	specifies the border around the table in pixels; BORDER=0 no border
ALIGN	aligns a table on a page {LEFT, CENTER, RIGHT}
WIDTH	width of the table in pixels or percentage of the width of the browser window
HEIGHT	width of the table in pixels or percentage of the width of the browser window
CELLPADING	specifies the white space between a cell content and edges of the cell
CELLSPACING	specifies the space between the cells, i.e. width of cell separators

ALIGN	used to align items {LEFT, CENTER, RIGHT}
VALIGN	used to vertically align items {TOP, MIDDLE, BASELINE, BOTTOM}
BASELINE	applies to an entire row to align all elements to a common baseline
CHAR	used to specify that the data in the row should be aligned within a character, e.g. decimal point or similar. Example: ALIGN=CHAR CHAR="." We can specify where to place this character within a cell with CHAROFF (character offset), e.g. CHAROFF="30%" è 30% from the start of a cell, or CHAROFF=40 è 40 pixels from the start of a cell.

px or none	pixels
pt	points
pi	picas
in	inches
cm	centimeters
mm	millimeters
em	em units
%	percent

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

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)

Monday	Tuesday	Wednesday	Thursday	Friday	Saturday
				1	Weekend Activities Tennis Reading Bridge Class Work Singing Gardening House Cleaning
4	5	6	7	8
11	12	13	14	15
18	19	20	21	22
25	26	27	28	29