comp 1850 | introduction to web design and development

lecture four

  • styling navigation links
  • classes vs. ids
  • div & span
  • introduction to tables
  • table elements
  • readings

styling navigation links

  • A navigation system is really just a series of list items
  • It makes semantic sense to structure navigation bars as lists and style them with CSS
  • A sample navigation system <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Partners</a></li>
    <li><a href="#">Stuff</a></li>
    </ul>
  • We can change the list from vertical to horizontal orientation using the list-style: none; declaration
  • We also need to apply float: left; to our various elements and remove extra padding and margins

class or id?

  • Configure a class:
    • If the style may apply to more than one element on a page
    • Use the . (dot) notation in the style sheet.
    • Use the class attribute in the HTML.
  • Configure an id:
    • If the style is specific to only one element on a page
    • Use the # notation in the style sheet.
    • Use the id attribute in the HTML.

div and span

div and span are tag sets which allow you to define your own blocks of code for styling. Both of them require either a class or id to be assigned.

Use div to define a block of code that can be styled and positioned using css. The div tag is a block-element tag.

<div class="contentblock">content</div>

Use span to define a block of code for styling. The span tag is an in-line tag, and thus is not appropriate for positioning.

<span class="tabledata">content</span>

introduction to tables

  • originally intended for displaying tabular data - information in rows and columns
  • was the primary way to do page layout prior to CSS
  • markup behind tables is a bit tricky and not entirely intuitive:
    • constructed in rows, but columns are implied by number of cells in each row
    • a 3x3 table consists of 3 rows, but we must be sure to include 3 separate cells within each row for table to display as intended
  • tables can be nested within tables allowing for complex and dynamic page layouts

table elements

  • three elements required to make a table: <table><tr><td></td></tr></table>
  • <table></table> - signifies that you are creating a table
  • <tr></tr> - delimits a table row
  • <td></td> - delimits the data in a table cell
  • a sample table:
    <table>
    <tr><td>top left</td><td>top right</td></tr>
    <tr><td>bottom left</td><td>bottom right</td></tr>
    </table>
  • Also:: See pages 331-334 for information on table headers and captions
  • old school table attributes:
    • border - draws lines around your table: <table border="1">
    • width - specifies width of table in percentage or pixels:
      <table border="1" width="300">
    • cellpadding - adds space (in pixels) around objects in table cells:
      <table border="1" width="300" cellpadding="10">
    • cellspacing - adds space to borders between cells:
      <table border="1" width="300" cellpadding ="10" cellspacing="10">
  • as with many attributes, there are default values - if you want them set to "zero" you must specify
  • <td> attributes
    • width - width of cell in pixels
    • colspan - cell spans 2 or more columns
    • rowspan - cell spans 2 or more rows
  • <tr> tag can also accept align, valign and bgcolor to apply the same values to an entire table row
  • See page 338 in your textbook for corresponding CSS properties:
  • as with many CSS properties there are corresponding HTMl attributes. when given the choice, the CSS approach is preferred
  • CSS properties applicable to <table> tag:
    • width - width of table in pixels or percentage of available space
    • height - height of table in pixels or percentage of available space
    • border-collapse - use to remove extra space in between table cells (separate (default), collapse (remove spaces))
    • border-width - determines the width of the cell border
    • border-style - determines the format of the cell border
    • border-color - hex value or colorname
  • CSS properties applicable to <td> tag:
    • width - width of cell in pixels or percentage of available space
    • height - height of table in pixels or percentage of available space
    • padding - space inside a table cell between the edge of the cell and the contents of the cell
    • text-align - alignment of contents of a cell (left (default), center, right)
    • vertical-align - vertical alignment of contents of a cell (top, middle (default), bottom)
    • border-width - determines the width of the cell border
    • border-style - determines the format of the cell border
    • border-color - hex value or colorname

using tables for page layout

  • using tables for layout (in addition to being oldefashioned) can be tricky
  • if you use them for layout, we suggest the following development steps:
    1. sketch the table
    2. identify the underlying grid
    3. plan where cells will span columns or rows
    4. create the structure in HTML
    5. add your content to the cell containers
  • if your rowspan and colspan configurations get too complex, try nesting tables within cells or create separate tables for each horizontal element of a page (i.e., navbar, content, footer, etc.)
  • remember that you can use valign, align and bgcolor in your <tr> tags to control settings in all cells in a table row
  • decide on fixed width, relative width or combination layout:
    • fixed width:
      Advantage: greater control over proximity and design elements
      Disadvantage: horizontal scrollbars may be required on lower screen resolutions; can cause printing problems
    • relative width:
      Advantage: scales to suit the user's window
      Disadvantage: harder to control design elements
    • combination:
      Advantage: the best of both worlds: design harmony and usability!
      Disadvantage: can be extremely complex to construct, causing some browsers to choke on bloated table markup
  • design with room for text to expand - don't place much emphasis on height
  • beware of collapsing cells; every cell should contain at least a &nbsp;
  • fill in cell widths and be as specific as possible whenever you can - the less the browser has to guess about the less headaches you'll have!

validate your code

Only valid code can be expected to behave predictably in the various web browsers. Always ensure you are publishing error-free code.

Bookmark (and use) the online validators

  1. HTML validator
  2. CSS validator
home | about the course | readings | resources | 01 | introduction | 02 | html & ftp | 03 | css: fonts & colors | 04 | css: links & tables | 05 | css: page layout | 06 | information architecture | 07 | design principles | 08 | css: layout & graphics | 09 | html forms | 10 | client side scripting | 11 | scripting & analytics | jeff parker | students on bcitcomp.ca | textbook website | my.bcit | bcit | bcit: computing |