Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Html tut 04

on

  • 532 views

 

Statistics

Views

Total Views
532
Views on SlideShare
532
Embed Views
0

Actions

Likes
0
Downloads
10
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Html tut 04 Html tut 04 Presentation Transcript

    • Creating Table
      Tutorial 4
    • 2 ways to insert table of information on Web page:
    • Using:
      • Text Table – contains only text, evenly spaced out on the page in rows and columns
      • Graphical Table – it appears as graphical element on the Web page and allows you to include design elements such as color, shading, and borders in a table.
    • Kinds of Fonts
      • a. Fixed-Width fonts – also known as typewriter font.
      - font that allots the same amount of space to each character and to the empty spaces between characters.
      • b. Proportional fonts – fonts in which the width of each character differs with the character’s shape.
    • Defining Table Structure with HTML
    • <TABLE> and </TABLE> tags – identify the beginning and end of the table.
    • <TR> and </TR> tags – identify the beginning and end of each table row.
    • <TD> and </TD> - identify the beginning and end of each table cell.
    • <TH> and </TH> - identify text that will acts as table headers.
    • General syntax of Graphical table:
      <TABLE> <TR> <TD> First Cell </TD> <TD> Second Cell </TD> </TR> <TR> <TD> Third Cell </TD> <TD> Fourth Cell </TD> </TR> </TABLE>
    • First cell
      Second Cell
      Third Cell
      Fourth Cell
      Graphical representation
    • Creating Table Caption
    • Syntax:
      <CAPTION ALIGN = value> Caption Text </CAPTION>
    • Modifying the appearance of a table
    • ALIGN - controls how the table is aligned on the page Possible values are LEFT, RIGHT, and CENTER.
    • BORDER – specifies the thickness of the table border in pixels
    • BGCOLOR – set equal to the background color to use in the cells of the table.
    • WIDTH – sets the fixed width of the table. Value of WIDTH can be any number and can be pixels or a percentage.
    • CELLSPACING – use to increase the size of the border around individual table cell.
    • CELLPADDING – use to increase the gap between the cell text and the surrounding cell border.
    • HEIGHT – sets the fixed height of the table.
    • VALIGN – use to control the vertical placement of text within the table cell.
    • COLS – sets the number of columns in a table.
    • FRAME – controls which part of the table’s outer border are rendered. FRAME can take on the values: ABOVE, BELOW, BORDER, BOX, HSIDES.
    • RULES – defines the type of inside table border to show. Values for RULE can be NONE, GROUPS, ROWS, COLS, or ALL.
      Example: <TABLE BORDER = 2 CELLPADDING = 4 FRAME = VOID ALIGN = CENTER>
    • <PRE> tag – used to display preformatted text which is text formatted in ways that you want retained in your web page.
      • Spanning cell – is a cell that occupies more that one row or column in a table.
      Syntax: <TD ROWSPAN = value COLSPAN = value> Cell Text </TD>
    • Fin