html5-img
1 / 12

TABLES & ANCHORS

TABLES & ANCHORS. 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> <TR>

london
Download Presentation

TABLES & ANCHORS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. TABLES & ANCHORS

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

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

  4. 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

  5. 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”>

  6. 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%)

  7. 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”>

  8. 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

  9. 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”>

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

  11. 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)

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

More Related