Bill Brown

1
Converting a Table Based Site to CSS
Bill Brown MacNimble Web Development, LLC
2
About Me

• TheHolierGrail.com
• NMLEA.org
• Steve McCurry
• VirtualGiving.com
• WebDevelopedia.com
• Cyber-Sandbox.com

3
Why Are We Using Tables?

• Consistency?
• Ease?
• Specs say it's OK.
• Tables have been around longer than CSS?
• We trust 'em?

4
Table Myths

• Consistency? Wrong.
• Ease? Perhaps, but only because we know them.
• Specs say it's OK? Wrong.
• Tables have been around longer? Wrong.

5
Why CSS is Better

• Better control for different media types.
• Easier to maintain.
• Easier to script (PHP and JS).
• Screen readers.
• Not a magic bullet, though.

6
Pinnacle Awards

• -10 Points for using tables
• Using CSS to govern your site's presentation is
  recommended because it improves accessibility and
  is more semantically appropriate.

7
Corresponding Elements

• for tables, use divs
• for thead and th, use h
• for tfoot, use div or p
• for tbody, use div
• for td, use div or p

8
Linearization of Data

• Why?
• Better for handheld media
• Better for print media
• Easier to maintain

9
Content, Presentation, Behavior

• Caching
• Flexibility
• Maintenance
• Greater control

10
Content

• HTML Strict
• Transitional for Legacy Docs
• Semantic Use of Tags
• ltbgted and ltbrgteakfast

11
Presentation

• CSS for element style
• Power of the cascade and specificity
• Media Print, Handheld, Screen
• Faster Page Display

12
Behavior

• Unobtrusive Javascript
• Capitalize on Prototype and jQuery for advanced
  CSS selectors
• Remember to style for javascript disabled users

13
Images

• Are images content or style?
• Product images, biography photos, etc. are
  content.
• Rounded corner images, icons, etc. are style.
• Separation is better for different media types.

14
Global CSS Resets

• Definition a style sheet which resets all styles
  for all elements to achieve cross browser
  consistency
• Advantages
• Disadvantages

15
CSS Frameworks

• Definition a collection of styles, classes and
  HTML source code which allows designers and
  developers to quickly and easily implement
  difficult formats.
• Advantages/Disadvantages

16
Layout

• New, larger monitors
• Designing for the web is different than designing
  for paper
• Fixed, elastic, fluid?
• Left? Centered?

17
Format

• Is your site one, two or three columns?
• CSS allows you to switch the order and number of
  columns.
• Tables does not.
• Grid Pitfalls

18
Theme

• Using a framework, or your own framework allows
  theming
• When your city redefines their looks for whatever
  reason, you need only change the theme style
  sheet.

19
Styling for JavaScript

• Easy with CSS and classes
• Including external style sheets
• Re-classing html or body tag

20
Spacer Gifs

• Require an extra HTTP request
• Better replaced with margins or padding
• Lean, clean source
• More accessible

21
javascriptprint()?

• Requires duplication, reassembly and often,
  redownload of content
• Can be easily replaced with the cross browser
  supported mediaprint on style and link
  elements or _at_media

22
Common Issues

• Internet Explorer
• displayinline for all floats
• positionrelative
• hasLayout
• height
• zoom
• displayinline-block

23
Common Issues

• TRouBLed Borders
• Top, Right, Bottom, Left
• Order is important
• Float Switching
• overflowhidden
• zoom1

24
Common Issues

• K.I.S.S
• Overly and unnecessarily complicated HTML is
  difficult to style
• Format HTML and CSS
• Minify for production

25
My Achy Breaky Site

• Before launch, break your site's layout
• ALL layouts break, even table-based ones
• If you don't know what breaks it, you can't
  decide whether it's within your threshold

26
Stealing Beauty

• No need to reinvent the wheel
• An elegant solution may already exist for your
  problem. Why not use it?
• Make sure you understand what it's doing

27
Avoid

• bodyfont-size12px
• bodyline-height12px
• classbigredleft
• Bad tags ltbgt, ltigt, ltugt, ltmarqueegt, ltblinkgt
• FRAMES??!!

28
Walking Through Anytowne.com

• Content
• Presentation
• Behavior

29
Questions?

• Bill Brown
• macnimble_at_gmail.com
• http//www.macnimble.com