TABLES ANCHOR S Table Tags TABLE Identifies the

TABLES & ANCHOR S

Table Tags • • • <TABLE> Identifies the Structure <TR> Table Row <TH> Column 1 </TH> Table Heading <TH> Column 2 </TH> </TR>

Table Tags Continued • • • <TR> <TD> First Cell </TD> Define the table cell <TD> Second Cell </TD> and enter the cell data </TR> <TD> Third Cell </TD> <TD> Fourth Cell </TD> </TR> </TABLE>

Table Borders • Default = browsers will display tables without borders • <TABLE BORDER = “ 5”> • Has to be inside the TABLE TAG • BORDER tag will only effect the outside border

TABLE CELL SPACING/PADDING • CELL SPACING • Property that controls the amount of space between cells • <TABLE CELLSPACING = “ 2”> • CELL PADDING • Property that controls the amount of space between text and cell borders • <TABLE CELLPADDING = “ 3”>

DEFINE TABLE SIZE • When no width or height is specified, the table will only be as wide and high as it needs to be • <TABLE WIDTH = “SIZE” HEIGHT = “SIZE”> • Can be pixels or percentages (70%)

ALIGNMENT • You can specify how the data in the table cell will appear by aligning the text horizontally, vertically, or both. • Horizontal Alignment – Use the Align property inside the <TD> tag • The default is left • <TD ALIGN = “LEFT, RIGHT, or CENTER”>

ALIGNMENT • Vertical Alignment- use the VALIGN property inside the <TD> tag • <TD VALIGN=“TOP, MIDDLE, or BOTTOM”> • The ALIGN and VALIGN must be inside the <TD> tag

COLSPAN AND ROWSPAN • To give a cell a different width than the cell above it you need to use the COLSPAN attribute in the <TD> or <TH> tags • <TD COLSPAN = “VALUE”> • To give a cell a different height than the cell beside it, you need to use the ROWSPAN attribute in the <TD> or the <TH> tags • <TD ROWSPAN = “VALUE”>

TABLE BACKGROUNDS • • • Set BGCOLOR for <TABLE> tag <TABLE BGCOLOR =“color”> <TR BGCOLOR =“color”> <TH BGCOLOR = “color”> <TD BGCOLOR = “color”>

Links (Anchors) • The <a> tag creates an anchor • What is an anchor? • Text that is specifically marked so you can link it from other parts of the document • Text that is anchored will become the destination of the link; it is not the text you click(pointer) • <a name=“top”>Home</a>(destination) • <a href=“#top”> Home </a> (pointer)

Link to URL • You can also link text or an image to an outside site • <a href = “URL”>