Html tut 04

689 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
689
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html tut 04

  1. 1. Creating Table Tutorial 4
  2. 2. 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.
  3. 3. 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.
  4. 4. 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.
  5. 5. 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>
  6. 6. First cell Second Cell Third Cell Fourth Cell Graphical representation
  7. 7. Creating Table Caption • Syntax: <CAPTION ALIGN = value> Caption Text </CAPTION>
  8. 8. 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.
  9. 9. • 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.
  10. 10. • 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>
  11. 11. <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>
  12. 12. Fin

×