ECA 228 Internet/Intranet Design I

Page Layout with Tables

ECA 228 Internet/Intranet Design I

Layout with tables

relative or fixed width– factors in deciding

content limit line length to enhance readability multi-columns precision designer preference

ECA 228 Internet/Intranet Design I

Layout with tables

relative table width– set width as percentage using “width” attribute– table resizes itself based upon size of browser

window– more compatible across different browser window

sizes

< table width=“90%” >

ECA 228 Internet/Intranet Design I

Layout with tables

fixed table width– set width as pixel value using “width” attribute– table width remains constant despite size of browser

window– if table is wider than window user must horizontal

scroll

< table width=“750px” >

ECA 228 Internet/Intranet Design I

Layout with tables

fixed table width– determine width in pixels based upon common

screen resolutions 640 X 480 800 X 600 1024 X 768

ECA 228 Internet/Intranet Design I

Layout with tables

fixed table width– Rule Of Thumb: when designing for specific

resolution, account for margins and scrollbars Left margin: 10px Right margin: 20px Scrollbar: 20px

width of table = resolution width - 50

ECA 228 Internet/Intranet Design I

Effective tables

indent - write code that is easy to read

<table><tr>

<td> 1st quarter </td> <td> 2nd quarter </td> <td> 3rd quarter </td> <td> 4th quarter </td>

</tr></table>

ECA 228 Internet/Intranet Design I

Effective tables

remove extra white space

<table><tr>

<td><img src=‘halle.jpg’ alt=‘Halle’> </td> <td><img src=‘boo.jpg’ alt=‘Boo’></td>

</tr></table>

ECA 228 Internet/Intranet Design I

Effective tables

center table to adapt to different resolutions

<table align=‘center’><tr>

<td>January</td> <td>February</td> <td>March</td> <td>April</td>

</tr></table>

ECA 228 Internet/Intranet Design I

Effective tables

stack tables for quicker downloading– browsers must read all table code before

displaying table– long tables may increase download time– use several small tables instead of one large table

ECA 228 Internet/Intranet Design I

Effective tables

stacked table 1

stacked table 2

ECA 228 Internet/Intranet Design I

Effective tables

nest table for complex designs– a smaller table may be nested within the <td>

tags of a larger table– browsers must read all table code before

displaying tables– nested tables may increase download time

ECA 228 Internet/Intranet Design I

Effective tables

table 1

nested table

ECA 228 Internet/Intranet Design I

Creating templates

page banner

nav adsfeatured article

news 1 news 2

ECA 228 Internet/Intranet Design I

Creating templates

how many columns?

how many rows?

which are colspan?

which are rowspan?

ECA 228 Internet/Intranet Design I

Basic templates

2 column

ECA 228 Internet/Intranet Design I

Basic templates

2 column with banner

ECA 228 Internet/Intranet Design I

Basic templates

3 column

ECA 228 Internet/Intranet Design I

Basic templates

3 column with banner

ECA 228 Internet/Intranet Design I

Basic templates

3 column sectioned

ECA 228 Internet/Intranet Design I

Basic templates

3 column main sectioned