Creating Tables

1

• Creating Tables

For use in the World Wide Web
2
What is a Table?

• A table is a design element that divides the
  screen into a grid consisting of rectangular
  regions called cells.
• Used to present data neatly in rows and columns
  that help the user perceive the order or the
  relationships in the information..
• Creates advanced Web page layouts consisting of
  rectangular sections, into which you can flow
  blocks of text or insert graphics.

3
Tables in HTML

• Define the rows and header row, if necessary, in
  the code box below. (Ex.
  2-row table)

• ltHTMLgt
• ltTABLEgt

ltTR gt ltTHgt Table header (row1)lt/THgt lt/TRgt
ltTRgt ltTDgtTable data (row2)lt/TDgt lt/TRgt
lt/TABLEgt lt/HTMLgt
4
Table Attributes

• ltTABLE BORDER(5 to 1) - border thickness (5 is
  thick 1 or just border is very thin
• CELLSPACING controls space between cells.
  Default is 1 but raise or lower (e.g.0)
• CELLSPADDINGspacing between border and
  contents. If border exists, may want to
  use 5 to avoid touching.
• WIDTHassigned in of pixels or of the width
  of the window
• BGCOLORCan be assigned a built-in color or RGB
  value (e.g. BGCOLORblue). If no
  BGCOLOR, the table will have the same
  background color as the page.

5
Table Attributes

• ROWS and COLS
• A Table is composed of ROWS and COLS.
• The intersection of a row and a column is called
  a cell. Tables may include any number of rows or
  columns.
• Creating Table Rows
• Every row you create must be surrounded by ltTRgt
  lt/TRgt tags.
• For every row there must be a pair of these tags.

6
Table Attributes

• Creating Table Columns
• All text within your table should be surrounded
  by ltTDgt and lt/TDgt tags. (Or header, ltTHgt and
  lt/THgt tags, which provide bold font.)
• For each pair of these tags, a column will be
  created in the row.

7
Loading Images within a Table

• To locate and load HTML graphics within a
  specified cell of a page layout.
• Example
• ltIMG SRCfilename gt - load and display
  the html graphics file

8
Multiple Rows /or Columns!

• 2 Columns
• 2 Rows
• Mixed multiple rows and columns

9
2-Column Table Layout

• ltHTMLgt
• ltTITLEgt 2-column table lt/TITLEgt
• ltCENTERgt

ltTABLE BORDER5 BGCOLOR"lightgreen"
WIDTH"80"gt ltTRgt ltTH HEIGHT"60" FONT
SIZE"2" ALIGN"center" WIDTH"50"gtTable with 2
Columnsltbrgt(Col 1)lt/THgt ltTH FONT SIZE"2"
ALIGN"center"gtCol 2lt/THgt lt/TRgt lt/TABLEgt
lt/CENTER lt/HTMLgt
10
2-Column Table Layout
11
3-Column Table Layout
3-Column Table Layout
ltHTMLgt ltTITLEgt 3-column table lt/TITLEgt
ltCENTERgt
ltTABLE BORDER5 BGCOLOR"lightgreen"
WIDTH"80"gt ltTRgt ltTH HEIGHT"60" FONT SIZE"2"
ALIGN"center" WIDTH"50"gtTable with 2
Columnsltbrgt(Col 1)lt/THgt ltTH FONT SIZE"2"
ALIGN"center"gtCol 2lt/THgt ltTH FONT SIZE"2"
ALIGN"center"gtCol 3lt/THgt lt/TRgt
lt/TABLEgt lt/CENTER lt/HTMLgt
12
3-Column Table Layout
3-Column Table Layout
13
2-Row Table Layout
ltHTMLgt ltTITLEgt 2-row Table lt/TITLEgt ltCENTERgt
ltTABLE BORDER5 BGCOLOR"lightgreen"
WIDTH"80"gt ltTRgt ltTH HEIGHT"60" FONT
SIZE"2" ALIGN"center" WIDTH"50"gt Table
with 2 Rows (Including a header)
lt/THgt lt/TRgt ltTRgt ltTD HEIGHT"50" FONT
SIZE"2" ALIGN"center"gtRow 2 lt/TDgt lt/TRgt
lt/TABLEgt lt/CENTERgt lt/HTMLgt
14
2-Row Table Layout
15
3-Row Table Layout
ltHTMLgt ltTITLEgt 3-row Table lt/TITLEgt ltCENTERgt
ltTABLE BORDER5 BGCOLOR"lightgreen"
WIDTH"80"gt ltTRgt ltTH HEIGHT"60" FONT SIZE"2"
ALIGN"center" WIDTH"50"gt Table with 3
Rowsltbrgt(Including Header)lt/THgt lt/TRgt ltTRgt ltTD
FONT SIZE"2" ALIGN"center"gtRow
2lt/TDgt lt/TRgt ltTRgt ltTD FONT SIZE"2"
ALIGN"center"gtRow 3lt/TDgt lt/TRgt
lt/TABLEgt lt/CENTERgt lt/HTMLgt
16
3-Row Table Layout
17
Multiple Rows and Columns
ltHTMLgt ltTITLEgt 2-rows and 2-cols tablelt/TITLEgt
lt/HEADgt ltCENTERgt
ltTABLE BORDER5 BGCOLOR"lightgreen"
WIDTH"80"gt ltTRgt ltTH HEIGHT"60" FONT
SIZE"2" ALIGN"center" WIDTH"50"gt Table
with 2 Rows 2 Columnsltbrgt(Row 1/Column 1)lt/THgt
ltTHgt(Including a header)ltbrgt(Row 1/Column
2)lt/THgt lt/TRgt ltTRgt ltTD HEIGHT"50" FONT
SIZE"2" ALIGN"center"gtRow 2/Column 1lt/TDgt
ltTD ALIGN"center"gtRow 2/Column 2lt/TDgt lt/TRgt
lt/TABLEgt lt/CENTERgt lt/HTMLgt
18
Multiple Rows and Columns

19
Span a cell over Multiple Columns
20
Creating Hyperlinks within a Cell

• Creating Hyperlinks within a Cell
• The link can be made to local HTML files or or to
  remote Websites ( full URL is needed).
• The text used to trigger the link is
• ltA HREFhttp//www.yourchoice.comgtYour choice
  of textlt/Agt

21
Mailto Links within a Cell

• Creating Mailto Links within a Cell
• ltA HREFmailto your_email_addressgt
• Click here to email me lt/Agt