Вы находитесь на странице: 1из 30

Hong Kong Baptist University

Week 5

Creating Page Template

8/02/2010

Dr. Tony Chun-Kuen WONG


Coordinator, BBA(Hons) Information System Management Major
Coordinator,, BBA(Hons)
( ) Information System
y & e-Business
Management Concentration

p
Department of Finance and Decision Sciences
School of Business

Hong Kong Baptist University

Objectives
 Understand table basics
 Format tables
 F ll
Follow table
t bl pointers
i t tto create
t well-designed
ll d i d ttables
bl
 Create a page template
 E l t examples
Evaluate l off page ttemplates
l t

2
Hong Kong Baptist University

Using Table Elements


 To build effective page templates
templates, you must
be familiar with the HTML table elements
and attributes

 The <table> element contains the table


information, which consists of table row
elements <tr>, and individual table data cells
<td>. These are the three elements you will
use most frequently when you are building
tables.
tables

Hong Kong Baptist University

4
Hong Kong Baptist University

Basic Table Code

<TABLE BORDER> <TR>


<TR> <TD>3478-AB</TD>
/
<TD>Stock Number</TD> <TD>78mm Socket</TD>
<TD>Description</TD> <TD>47.50</TD>
<TD>List Price</TD> </TR>
</TR>
/
<TR>
<TR>
<TD>3480 AB</TD>
<TD>3480-AB</TD>
<TD>3476-AB</TD>
<TD>76mm Socket</TD> <TD>80mm Socket</TD>
<TD>45.00</TD> <TD>50.00</TD>
</TR> </TR>
/

</TABLE>

Hong Kong Baptist University

6
Hong Kong Baptist University

Captions and Table Header


 <caption> lets you add a caption to the top or bottom
of the table.
 By default,
default captions display at the top of the table
table. You can
use the align=“bottom” attribute to align the caption at the
bottom of the table.
 The <th> tag
Th t lets
l t you createt a table
t bl header
h d cellll th
thatt
presents the cell content as bold and centered

Hong Kong Baptist University

8
Hong Kong Baptist University

Defining Table Attributes

 Table attributes let you further define a


number of table characteristics. You can
apply attributes at three levels of table
structure: global, row-level, or cell-level.

Hong Kong Baptist University

10
Hong Kong Baptist University

11

Hong Kong Baptist University

12
Hong Kong Baptist University

Spanning Columns

 The COLSPAN attribute lets you create cells


that span multiple columns of a table.
Column cells always span to the right.

13

Hong Kong Baptist University

14
Hong Kong Baptist University

Spanning Rows

 The ROWSPAN attribute lets you create


cells that span multiple rows of a table. Rows
always span down.

15

Hong Kong Baptist University

16
Hong Kong Baptist University

Relative or Absolute Widths

 Set relative table widths as percentages in


the table width attribute. If you choose
relative table widths, your tables will resize
based on the size of the browser window.

 Set absolute table widths as pixel values in


the table width attribute. Fixed tables remain
constant regardless of the browser window
size.

17

Hong Kong Baptist University

Calculating Table Widths

 The most common width for page template


tables is approximately 975 pixels. This width
supports the 1024 x 768 screen resolution.

18
Hong Kong Baptist University

1024

19

Hong Kong Baptist University

Default Table Spacing


 Default spacing values are included in the
table even when you don’t specify values for
the table
table’s
s border,
border cellpadding,
cellpadding or
cellspacing attributes

 Depending on the browser, approximately


two pixels are reserved for each of these
values

 You can remove the


Y h ddefault
f l spacing
i bby
explicitly stating a zero value for each
attribute
20
Hong Kong Baptist University

21

Hong Kong Baptist University

22
Hong Kong Baptist University

23

Hong Kong Baptist University

24
Hong Kong Baptist University

25

Hong Kong Baptist University

Table Pointers
 Write easy-to-read code - You can simplify your
table creation and maintenance tasks by writing
clean commented code
clean,

 Remove extra spaces - Always remove any leading


or trailing spaces in your table cell content

 Center tables - Centering a fixed table makes the


table independent of resolution changes, because
the table is always centered in the browser window

26
Hong Kong Baptist University

Table Pointers

 Stack tables - Because of the way browsers


display tables
tables, it’s
it s best to build several
smaller tables rather than one large one

 Nest tables - You can nest tables by placing


an entire table within a table cell

27

Hong Kong Baptist University

28
Hong Kong Baptist University

29

Hong Kong Baptist University

30
Hong Kong Baptist University

Creating a Page Template

 In this example you’ll see how to take a


design sketch for a Web page and build a
template for the page layout

 Figure in next slide shows a sketch of the


d i d llayout.
desired t Thi
This llayoutt iis d
designed
i d ffor a
base screen resolution of 1024 x 768, so the
t bl will
table ill b
be fifixed
d att a width
idth off 975 pixels.
i l

31

Hong Kong Baptist University


Principles of Web Design Chapter 5

Sketch
k h off the
h visualized
i li d layout
l
32
Hong Kong Baptist University

Creating a Page Template

 Notice that the basic structure of the table is


3 rows by 4 columns.
 Each column uses 25% of the total width of
the template.
 Row spans and column spans break across
the layout to provide visual interest
interest.

33

Hong Kong Baptist University

Build the Basic Structure

 Start by building the basic table structure,


including all the cells and rows of the table

 As you customize the table you can remove


extraneous cells as necessary

 The basic structure is a 3-row by 4-column


table
bl

34
Hong Kong Baptist University
Principles of Web Design Chapter 5

Setting a Fixed Width

 One of the design characteristics of the


template is a fixed width that is not
dependent on the user’s browser size or
screen resolution

 To accomplish this, use a pixel value in the


global WIDTH attribute

35

Hong Kong Baptist University


Principles of Web Design Chapter 5

36
975
Hong Kong Baptist University

Creating the Page Banner

 The page banner cell is R1C1. This cell


spans the four columns of the table using the
colspan attribute.

37

Hong Kong Baptist University

38
Hong Kong Baptist University

Creating the Feature Cell

 The Feature cell in the layout is R2C2, and


spans two columns. This column span
requires the removal of one cell in row two to
make room for the span.

39

Hong Kong Baptist University

40
Hong Kong Baptist University

Creating the Link Columns

 The New Link and Linked Ads columns in the


layout
ayout reside
es de in ce
cells
s R2C1
C a
and
d R2C3
C3
respectively. These cells span rows 2 and 3
of the table. The row spans
p require
q the
removal of cells R3C1 and R3C4.

41

Hong Kong Baptist University

42
Hong Kong Baptist University

43

Hong Kong Baptist University

Creating the Page Banner

 Column widths must be set in only one cell


per column

 It’s also best to set the column widths in only


one row of the table

 Se g the
Setting e co
column
u width
d eensures
su es that
a the
e
text will wrap properly

44
Hong Kong Baptist University

45

Hong Kong Baptist University

Testing the Template

 To verify that your template works properly,


populate it with test content

 Test the template in multiple browsers

46
Hong Kong Baptist University

47

Hong Kong Baptist University

48
Hong Kong Baptist University

49

Hong Kong Baptist University

50
Hong Kong Baptist University

Template Examples

 The following templates cover a variety of


page layout
l t needs
d

 You may choose to stack different templates


on top
p of each other for more complex
p
layouts

51

Hong Kong Baptist University

52
Hong Kong Baptist University

53

Hong Kong Baptist University

54
Hong Kong Baptist University

55

Hong Kong Baptist University

56
Hong Kong Baptist University

57

Hong Kong Baptist University

Summary

 Plan your tables by sketching them out first

 Use fixed table widths if you want to


determine the size of y
your ppage
g rather than
letting the browser determine the width

 Use relative widths if you want to build tables


that resize with the browser window,
wrapping your content to fit

58
Hong Kong Baptist University

Summary

 Work on your pages with the table borders


turned on, which displays the cell
b
boundaries.
d i Wh
When you are finished
fi i h d with
ith your
layout you can turn the borders off.

 Size your tables based on the page size you


wantt to
t create.
t Use
U 1024 x 768 as your base b
screen resolution. In most cases you’ll set
the width but not the height of your tables
tables,
allowing the content to flow down the page.

59

Hong Kong Baptist University

Summary

 Test your work! Table settings, especially


cell widths and heights, can vary based on
the user’s browser.

 Reference (Read the source code)


J l Sklar
Joel Skl Principles
P i i l off Web
W b Design
D i – Chapter
Ch t 5
 http://oc.course.com/webwarrior/sklar4/index.cfm?action=h
ome&chapter 5
ome&chapter=5

 Homework
 Design the First Template for your personal website
60