Goodbye to Tables: Moving Web Sites From a Table Based Layout to CSS

1
Goodbye to Tables Moving Web Sites From a Table
Based Layout to CSS

• Mike Takahashi
• Office of Instructional Development

2
Tables for Layouts?

• HTML is a structural language, which means it
  is - or should be - used to add structure into a
  text through tags. The table tag should then only
  be used to format data into a table to relate
  columns with rows.
• W3C - http//www.w3.org/2
  002/03/csslayout-howto
• The problem with using tables
• Mixes presentational data in with your content.
• This makes the file sizes of your pages
  unnecessarily large, as users must download this
  presentational data for each page they visit.
• This makes redesigns of existing sites and
  content extremely labor intensive.
• Table-based pages are also much less accessible
  to users with disabilities and viewers using cell
  phones and PDAs to access the Web.
• Taken from Why tables for layout is stupid
  problems defined, solutions offered
  http//www.hotdesign.com/seybold/everything.html

3
Using CSS

• Separates content from presentation. An external
  style sheet can contain all the styles for your
  web site, then if you want to change the content
  you only have to edit one style sheet. This is
  great for a web site that contains hundreds or
  thousands of pages.
• Fast loading pages. Tables create more code. If
  your tables are nested inside each other your
  page will load even more slowly. Designing
  CSS-based web pages will speed up the loading of
  your pages considerably because the styles are
  all contained in one style sheet.
• Small file size. CSS will reduce the file size of
  your html document.
• http//www.drostdesigns.com/top-12-ben
  efits-of-using-css-for-web-pages

4
Using CSS Quick Overview

• To change the layout, all you need to do is
  update the style sheet.
• What happens if we want to change the bgcolor for
  this table? We need to update it in every single
  file this code resides in. This could be
  hundreds, even thousands!
• lttable align"center" bgcolor"ffffff"
  border"0" cellpadding"0" cellspacing"0"
  width"770"gt
• lt/tablegt
• By using CSS, one change to an ID or class will
  change every single document that references it.
• ltdiv idmyidgt
• lt/divgt
• myid
• background-color ffffff
• padding 0
• margin 0
• width 770px
• text-align center

5
(No Transcript)
6
Using Proper Headings

• Use proper headings. If you must use images for
  design layouts, incorporate an image within your
  h1 tag.
• Original code only uses an image for the heading
• ltimg src"humanities_files/head_humanities.gif"
  alt"Humanities" border"0" height"33"
  width"380"gt
• Use either proper lth1gt tags, or if you must use
  images, use the ltspangt tag to hide the text. This
  way text readers can still read proper headings
  and if Style Sheets are disabled you will still
  be able to read the text.
• lth1gtltspangtHumanitieslt/spangtlt/h1gt
• CSS
• h1 background url(humanities_files/head_humanit
  ies.gif)
• h1 span display none

7
Using lists to style navigation items

• Original Code uses tables and redundant images.
  
• This can be done more efficiently with the use of
  lists and CSS.
• lttd align"left" width"330"gt
• lttable border"0" cellpadding"0"
  cellspacing"0"gt
• lttbodygtlttrgt
• lttd class"toolbar"gtltstronggtUCLAnbsplt/stronggtlt
  /tdgt
• lttdgtlta href"http//www.ucla.edu/"
  class"toolbar"gtHomelt/agtlt/tdgt
• lttdgtltimg src"humanities_files/bulletblue.gi
  f" alt" " height"12" width"10"gtlt/tdgt
• lttdgtlta href"http//www.directory.ucla.edu/"
  class"toolbar"gtDirectorylt/agtlt/tdgt
• lttdgtltimg src"humanities_files/bulletblue.gif"
  alt" " height"12" width"10"gtlt/tdgt
• lttdgtlta href"http//www.ucla.edu/map/"
  class"toolbar"gtMaplt/agtlt/tdgt
• lttdgtltimg src"humanities_files/bulletblue.gif"
  alt" " height"12" width"10"gtlt/tdgt
• lttdgtlta href"http//www.calendar.ucla.edu/"
  class"toolbar"gtCalendarlt/agtlt/tdgt
• lt/trgtlt/tbodygt
• lt/tablegt
• lt/tdgt

8
Using lists to style navigation items

• Optimized code with CSS
• ltdiv id"ucla-nav"gt
• ltulgt
• ltli class"first"gtltstronggtUCLAlt/stronggtlt/ligt
  
• ltligtlta href"http//www.ucla.edu/"gtHomelt/agtlt/li
  gt
• ltligtlta href"http//www.directory.ucla.edu/"gtDi
  rectorylt/agtlt/ligt
• ltligtlta href"http//www.ucla.edu/map/"gtMaplt/agtlt
  /ligt
• ltligtlta href"http//www.calendar.ucla.edu/"gtCal
  endarlt/agtlt/ligt
• lt/ulgt
• lt/divgt
• Cleaner and less redundant code.
• Easier to update and change layout.
• Some nice examples Listamatic
  http//css.maxdesign.com.au/listamatic

9
Using lists to style navigation items
ucla-nav li background-image
url(original/humanities_files/bulletblue.gif)
background-repeat no-repeat
background-position 0 4px padding-left
10px display inline ucla-nav li a
color 536895 text-decoration
none ucla-nav li ahover color
000000

• CSS
• ucla-nav
• float left
• margin-top 4px
• font-size 11px
• ucla-nav ul
• margin 0
• padding 0
• display inline
• ucla-nav li.first
• background-image none

10
Multi Column Layouts using CSS

• There are many ways to achieve multi column
  layouts without the use of tables.
• You can use float elements (can be tricky).
• You can use a combination of float and margin
  properties.
• The list goes on
• CSS Layout Techniques - http//www.glish.com/css

11
Multi Column Layouts using CSS

• The Table Way
• lttable width"770" align"center" cellpadding"0
  cellspacing"0" border"0" bgcolor"FFFFFF"gt
• lttrgt
• lttd width"330" valign"top"gt
• lttable width"330" border"0" cellspacing"0"
  cellpadding"0" bgcolor"536895"gt
• lttrgt
• lttd colspan"6"gtltimg src"http//www.ucla.edu/g
  raphics/spacer.gif alt"" width"1 height"10"gt
  lt/tdgt
• lt/trgt
• lttrgt
• lttd width"20" align"center"
  valign"top"gtltbrgtlt/tdgt
• lttd width"300" valign"top"
  class"subhead4white"gt
• ltIMG SRC"images/titleb_majorsprograms.gif"
  ALT"Majors and Programs" HEIGHT"25" WIDTH"300"
  BORDER0gtlt/tdgt
• lttd width"10" align"center"
  valign"top"gtltbrgtlt/tdgt
• lt/trgt
• lt/tablegt
• lttable width"330" border"0" cellspacing"0"
  cellpadding"0" bgcolor"536895"gt
• lttrgt
• lttd width"155" valigntopgt

12
Multi Column Layouts using CSS

• The CSS Way
• ltdiv id"majors-programs"gt
• lth1gtMajors and Programslt/h1gt
• ltdiv id"majors-programs-left-column"gt
• ltulgt
• ltligtlta href"http//www.humnet.ucla.edu/humnet/a
  l/frames/alhome.htm"gt
• Applied Linguisticslt/agtlt/ligt
• ltligtlta href"http//www.humnet.ucla.edu/humnet/a
  rthist/ArtHistoryHome.html"gt
• Art Historylt/agtlt/ligt
• ...
• lt/ulgt
• lt/divgt
• ltdiv id"majors-programs-right-column"gt
• ltulgt
• ltligtlta href"http//www.humnet.ucla.edu/mellon"gt
  
• Mellon Postdoctoral Program in the
  Humanitieslt/agtlt/ligt
• ltligtlta href"http//www.humnet.ucla.edu/humnet/m
  usicology/index.html"gtMusicologylt/agtlt/ligt
• ...

13
Multi Column Layouts using CSS

• majors-programs
• height 400px
• font-size 11px
• majors-programs-left-column
• float left
• width 150px
• padding 0 0 0 15px
• majors-programs-right-column
• float right
• width 145px
• padding 0 10px 0 10px

majors-programs-left-column ul, majors-programs-
right-column ul margin 0 padding 0
list-style none majors-programs-left-colum
n li, majors-programs-right-column li
padding 4px 0 majors-programs-left-column li
a, majors-programs-right-column li a
color cccccc text-decoration
none majors-programs-left-column li
ahover, majors-programs-right-column li ahover
color ffffff text-decoration
none
14
Whats wrong with this picture?

• lttrgt
• lttd width"20" align"center"
  valign"top"gtltbrgtlt/tdgt
• lttd width"135" valign"top"gt
• lta href"http//www.humnet.ucla.edu/humnet/al/fr
  ames/alhome.htm" class"navsm"gt
• Applied Linguisticslt/agtltbrgt
• ltimg src"http//www.ucla.edu/gr
  aphics/spacer.gif"
• alt"" width"135" height"7"gtltbrgt
• lt/tdgt
• lt/trgt
• lttrgt
• lttd width"20" align"center"
  valign"top"gtltbrgtlt/tdgt
• lttd width"135" valign"top"gt
• lta href"http//www.humnet.ucla.edu/humnet/arth
  ist/ArtHistoryHome.html" class"navsm"gt
• Art Historylt/agtltbrgt
• ltimg src"http//www.ucla.edu/gr
  aphics/spacer.gif"
• alt"" width"135" height"7"gtltbrgt
• lt/tdgt
• lt/trgt
• lttrgt

15
Whats wrong with this picture?

• What happens if we need to change the width of
  the layout?
• What happens if we need to change the spacing
  between elements?
• Unnecessary code
• lttd width"20" align"center" valign"top"gtltbrgtlt/
  tdgt
• We can achieve the same thing using CSS with far
  less syntax.
• Spacer GIFs are EVIL
• ltimg src"http//www.ucla.edu/graphics/spacer.gif
  "
• alt"" width"135" height"7"gt
• Transparent gifs used to create blank spaces
  between elements on a web page.
• More unnecessary code
• Page takes longer to load
• Use CSS to control elements using padding and
  margin.

16
Conclusion

• You can still use tables! However, they should be
  used for tabular data and not to control layout.
• Learn the power of CSS!
• Use style sheets to control layout. It will make
  your life a lot easier.
• Links
• CSS Layout Techniqueshttp//glish.com/css/home.as
  p
• Nice Resource for CSS based siteshttp//www.cssbe
  auty.com
• ESPNhttp//www.espn.com (if you are ever
  frustrated that a site cant be done completely
  in CSS)