Specifications

  • Column width– spans across the content area of the page
  • Two responsive layouts
  • Stacked – to display simple data
  • Horizontal scroll – to display more complex data that requires more than 2 columns
  • Styling with HTML (optional): add html tags like bold, center etc…

Best practices

Although there are many cases where you can use tables, try to use the following guidelines

  • Provide table captions if possible
  • Use horizontal layout if you have tables where you need to showcase complex data
  • Stacked layout for tables where data is not complex.

Video tutorial

 

Example below, in order to see the different layouts, adjust the size of your browser.

USC Dornsife Phone Directory (html optional)

Member Phone E-mail
Tommy Trojan 233-693-9999 tommy@usc.edu
Lisa Simpson
563-986-3333
 lisas@usc.edu
Bart Simpson 555-555-5555 sbart@usc.edu
Homer Simpson 666-666-6666

hsimpson@usc.edu
Phone Directory

Quarterly Fruit Crops (Horizontal Layout)

Location Mango Apple Oranges
Los Angeles 100 200 300
Las Vegas 200 300 660
New York 50 60 300
Miami 50 66 75
Seattle 25 90 96
Q1 fruit crops

USC Dornsife Phone Directory (Stacked Layout)

Member Phone E-mail
Tommy Trojan 233-693-9999 tommy@usc.edu
Lisa Simpson 563-986-3333 lisas@usc.edu
Bart Simpson 555-555-5555 sbart@usc.edu
Homer Simpson 666-666-6666 hsimpson@usc.edu
Phone Directory