home -- outline -- lectures -- assignments -- discussion -- tips -- links --




Intro to the Web: Monday, Jan 26

Chapter 11 in O'Reilly

Tables are good for lots of things.
  • organize data
  • layout pictures and text within a page
  • create seamless tiles for large images to reduce download time
  • making tables work takes time and practice
  • getting them right (de-bugging them) can be tedious and frustrating.


Tables: Basic Building Blocks
  • <TABLE> </TABLE> - table tag
  • <TR> </TR>- table row
  • <TH> </TH>- table header
  • <TD></TD> - table data


Tables: How they work

Here are some of the basic rules:
  • <TABLE> tags are wrappers: between them you can put:
    • <TR> tags
  • <TR > tags are also wrappers: between them you can put:
    • <TH > tags
    • <TD> tags
  • <TD> tags mark the content of the table. Between them you can put:
    • Text and numbers
    • <IMG> tags
    • <A HREF= > links
    • more <TABLE> tags (a nested table)


Table Code Sample 
    <TABLE  BORDER=3 CELLSPACING=5 CELLPADDING=5 WIDTH="80%"> 

   <TR> -- begin first ROW
    
     <TD>  
         first cell   
     </TD>
   
     <TD> 
       second cell 
     </TD> 
   
   </TR> -- end first ROW 
  
   <TR> --begin second ROW
   ...
     
   ... 
    
</TABLE>  -- End TABLE


Some Basic Examples

Tables: General Controls

  • Unless you state otherwise, tables align with what surrounds them
  • Don't have all the features of a standard Word table
  • Many ways to manipulate the apperance of the table and its contents

    • [ALIGN= LEFT|CENTER|RIGHT]
    • [VALIGN= TOP|CENTER|BOTTOM]
    • [COLSPAN=#]
    • [ROWSPAN=#]
    • [CELLPADDING=#]
    • [CELLSPACING=#]
    • [WIDTH=#] and [HSPACE=#]
    • [HEIGHT=#] and [VSPACE=#]
    • [NOWRAP]


Some More Examples

<TABLE> as a Formatting Tool

Rows and Columns

  • Controlling alignment with ROWSPAN and COLSPAN can be tricky.
  • Draw out the table first: decide on the cols and rows before you start.
  • Include the COLS attribute with the <TABLE> tag...it will help you keep track.


Row and Column Examples

Fine-Tuning your Tables

  • Use CELLPADDING and CELLSPACEING to manipulate buffer between table cells.
  • Use BORDER width, HEIGHT, WIDTH, VSPACE and HSPACE to adjust appearance
  • If you don't want uniform results (samp padding on all sides), use single-pixel gif to push things around.


An example with borders, and without