Tables

1
Tables

• What is a table?

2
Tables

• A grid that breaks space or time into regular
  units.
• Tables establish a system for arranging content
  within the space of a page or a screen.
• They are designed to hold content, text, image
  and data.

3
Where are Tables used?
4
Where are Tables used?

• Tables / Grids belong to the technological
  framework of typography.
• Employed in the letterpress, and the rulers,
  guides and coordinate systems of graphic and
  layout applications.
• Digital images are constructed from a grid of
  neatly bounded blocks.

5
How have Tables been used?

• In the background of all design production grids
  have become explicit theoretical tools.
• 1910s and 1920s avant-garde designers exposed
  the mechanical restraints of the letterpress.
• After World War 2 Swiss designers built a design
  methodology around the grid. Hoping to construct
  with it a new rational and social order.

6
Tables Writing

• Alphabetic writing is organised into columns and
  rows of characters.
• Handwriting flows into connected lines
• Mechanical type maintains a stricter order. Each
  letter occupies its own block, and the letters
  congregate in orderly rectangles.

7
Tables an introduction

• Until the 20th Century, grids served as frames
  for fields of text.
• The margins around a book page created a barrier
  around a solid block of text.
• Various alternatives to the single column page
  existed during the first centuries of printing
• EG. The two column grid of Gutenbergs Bible.

8
The two column grid of Gutenbergs Bible 1452.
9
Biblia Polyglotta 1568 zoned for five different
translations. (Hebrew, Greek, Aramaic, Syriac and
Latin)The page is a dense rectangle cut into
parts, the piece fit together in a unified whole.
Each zone is uniquely proportioned to fit the
verbal and typographic texture of a particular
script.
10
Tables an introduction

• Typography is in many ways the art of framing
• Designers spend much of their time focusing on
  margins, edges and empty spaces.
• With the assent of print, margins became the user
  interface of the book, providing space for page
  numbers, running heads, commentary, notes and
  decoration.

11
Dividing Space

• In the 19 century modernist artists and designers
  began to question the function of the frame that
  had been used in printing, and started using the
  grid as a flexible, critical and systematic
  design tool.
• FT Marinetti led the revolution against prints
  traditional syntax. He devised poems that
  combined fonts of different sizes and weights,
  and allowed lines of text to span numerous rows.
• Marinettis creations work against yet inside the
  constraints of the mechanical letter press.

12
Les Mots en Liberte Futuristes 1912
13
Les Mots en Liberte Futuristes 1912
14
Les Mots en Liberte Futuristes 1912
15
Les Mots en Liberte Futuristes 1912
16
Dividing Space

• While Marinetti attacked the convention of the
  grid, Jan Tschicholds book The New Typography
  published in 1928 in Germany advocated design as
  a means of order and discipline.
• He began to theorize the grid as a modular system
  based on standard measures.

17
The New Typography Diagram 1928 Jan Tschichold
18
Dividing Space
Tschicholds diagram of good and bad magazine
design advocate staggering images in relation to
the content Instead of making the text wrap
around the images, centered in the middle of the
text. He writes that the redesign would be even
more effective if all the photographs were
produced in fixed sizes.
19
Grid as a program

• Post WW II, designers in Switzerland honed ideas
  from the New Typography into a total design
  methodology.
• It was at the time the term grid became commonly
  applied to page layout.

20
Grid as a program

• Karl Gerstners book Designing Programmes 1964
  is a manifesto for system orientated design.
• Gerstner defined a design program as a set of
  rules for constructing a range of visual
  solutions.
• He connected his methodology with the new field
  of computer programming and presented examples of
  computer generated patterns that were made by
  mathematically describing visual elements and
  combining them according to simple rules.

21
Boite a MusiqueKarl Gerstner 1959
22
Boite a MusiqueKarl Gerstner 1959
23
Grid as a program

• The Swiss rationalists rejected the centuries old
  model of the page as a frame
• Where a traditional book would have placed
  captions, commentary and folios within a margin
• The new Swiss rationalist grid cut the page into
  multiple columns, each bearing equal weight
  within the whole.
• Images were cropped to fit the modules of the
  grid. Swiss designers used the confines of a
  repeated structure to generate variation and
  surprise.

24
Tables and the web

• Tables are a variant on the typographic grid.
• A table consists of vertical columns and
  horizontal rows, each cell occupied by data.
• Tables are a central aspect of web design.
• The table feature was incorporated into HTML code
  in 1995 so that authors could present tabular
  data.
• Graphic designers, eager to give shape to the
  webs wide bodies of text, implemented
  unauthorized uses of the HTML Table

25
Tables and the web

• They transformed the table, a tool meant for
  representing tabular data, into a typographic
  grid.
• Designers used the table feature to control the
  placement of images and captions and to build
  margins and gutters and multicolumn screens.
• Designers also used tables to combine multiple
  styles of alignment such as flush right, and
  flush left within a document.

26
Tables and the web

• By creating cells that span numerous columns and
  rows, designers sometimes build layout structures
  that bear little resemblance to the logically
  ordered structure of a data chart.
• A table normally defines areas for navigation,
  content and site identity, each section can
  contain grids or tables within tables.
• What problems do you think this layout structure
  can cause?

27
Tables and the web

• Visually driven illogical layout structures can
  cause problems for users who use screen reading
  software to translate the digital pages into
  audio.
• Assistive screen readers linearize digital text
  into spoken word.
• Accessibility experts urge web designers to think
  in linear terms where ever possible and to make
  sure that their tables make sense when read in a
  continuous sequence.

28
Tables and the web

• William Gibsons 1984 Novel Neuromancer
  envisions cyberspace as a vast etheral grid.
• In the early twentieth century designers exposed
  the grid structure in order to dramatize the
  mechanical conditions of print. (the printing
  press)
• After World War 2 Swiss designers built a total
  design methodology around the grid. They saw the
  use of the grid as the key to creating a
  universal visual language based on structure and
  order.

29
Tables an introduction

• The Web was invented by Tim Berners-Lee in the
  early 1990s in Switzerland to allow researchers
  to share documents that were created with
  different software applications.
• It was never taught that the Web would be
  considered a design driven medium.
• The rise of the Web has rekindled the interest in
  universal design thinking.

30
Joshua Davis http//www.joshuadavis.com
31
Tables an introduction

• Joshuadavis.com
• Use of consistent grid systems
• All text is flush left
• As seen in Swiss Rationalism

32
More XHTML

• Introduction to tables
• Cascading Style Sheets (CSS)

33
Creating Tables

• Table
• An arrangement of horizontal rows and vertical
  columns.
• The intersection of a row and a column is called
  a cell.
• Used for
• displaying tabular data in rows and columns
• controlling the layout and appearance of a Web
  page

34
Creating Tables

• Creating tables requires organisation
• All tables begin with the lttablegt tag and end
  with a lt/tablegt tag.
• In between those tags are three other tags to be
  aware of
• lttrgt defines a horizontal row
• lttdgt defines a data cell within that row
• ltthgt specifies a data cell as a table heading
• (in newer browsers, a table heading cell is
  formatted as centered and bold).

35
Creating Tables
36
Create the Table pictured here
1. Use the lttablegt tag to create Your
table 2. Use the lttrgt tag to define each
Row 3. Use the lttdgt tag to define each Cell
in a row 4. Use the ltthgt tag instead of the
td tag to define the cells in the 1st row
Questions How do I add a border? How do I
align the content?
37
Creating Tables

• Formatting Tables - Attributes
• border (default 0)
• Width of the border (in pixels - lttablegt tag)
• cellpadding (default 0)
• Space between border and content (in pixels -
  lttdgt tag)

38
Creating Tables

• Formatting Tables Attributes
• cellspacing (default 2)
• Space between cells
• (in pixels - lttablegt tag)
• - cellpadding (default 1)
• sets the amount of space between the contents
  of the cell and the cell wall.
• (in pixels - lttablegt tag)
• valign (default center)
• Vertical alignment of cell contents
• (top, bottom, or baseline lttdgt, ltthgt)
• width (default to fit)
• Width of table or cells
• (in pixels or as a of the page lttablegt ,
  lttdgt, ltthgt )

39
Continued..
1. add a border to the table that You just
made 2.Align the content to the centre of The
cell 3. Try changing the cellpadding and the
cellspacing (add these attributes to the
lttablegt tag)
40

lthtmlgt ltheadgt lttitlegt My first formatted table
lt/titlegt lt/headgt ltbodygt lttable
border"1"gt lttrgtltthgtColumn 1lt/thgtltthgtColumn
2lt/thgtlt/trgt lttrgtlttd align"center"gtRow
2lt/tdgt lttd align"center"gtRow
2lt/tdgtlt/trgt lttrgtlttd align"center"gtRow 3
lt/tdgt lttd align"center"gtRow 3lt/tdgtlt/trgt
lt/tablegt lt/bodygt lt/htmlgt
41
Creating Tables

• Formatting Tables Attributes
• rowspan
• Sets the number of rows a cell should span.
• (in the lttdgt or the ltthgt tag)
• colspan
• Sets the number of columns that a cell should
  span
• (in the lttdgt or the ltthgt tag)

42
Create the table on this slide

• Create the table pictured on this slide
• In the first data cell ltthgt in row one use the
  colspan attribute to make the cell span two
  colums
• In the second data cell lttdgt in row two use the
  rowspan attribute to make the cell span two rows
• Remember if your data cell is spreading two rows
  or two columns you dont add that cell that it is
  replacing

43
Advanced Tables

• lthtmlgt
• ltheadgt
• lttitlegt Combining Rows and Columnslt/titlegt
• lt/headgt
• ltbodygt
• lttable border"1"gt
• lttrgtltth colspan"2"gtColumn 1 Column 2
  are
• combined lt/thgtlt/trgt
• lttrgtlttdgt Row 2 lt/tdgtlttd rowspan"2"gt Row 2
  and
• Row 3 are combinedlt/tdgtlt/trgt
• lttrgtlttdgt Row 3 lt/tdgtlt/trgt
• lt/tablegt
• lt/bodygt
• lt/htmlgt

44
Creating Tables

• Using Tables for Layout
• www.yahoo.com
• The columns of search categories are created
  with tables
• www.microsoft.com
• Microsoft too uses tables to design the layout
  of its site.

45
Adding Your Own Style

• Style Sheets
• set of rules that determine how the styles will
  be applied to the HTML tags in your document.
• HTML designed as a markup language for defining
  the structure of a document
• 1996 W3C first recommended the idea of Cascading
  Style Sheets (CSS) to format HTML documents
• Enables Web designers to separate the structure
  and format of their documents
• Three types of CSS?

46
Adding Your Own Style

• 1. Embedded Style Sheets
• Style properties are included
• (within the ltstylegt tags) at the top of the
  HTML document.
• Style assigned to a particular tag will apply to
  all those tags in this document

47
Adding Your Own Style

• Inline Style Sheets
• Style properties are included throughout the HTML
  page.
• Each HTML tags receives its own style attributes
  as they occur in the page.

48
Adding Your Own Style

• Linked Style Sheets
• Style properties are stored in a separate file.
• That file can be linked to any HTML. document
  with a ltlinkgt tag placed within the ltheadgt tag.

49
Adding Your Own Style

• Defining the Rules
• Selectors the HTML tags that will receive the
  style.
• Declarations the style sheet properties and
  their values.
• body backgroundblack

50
Adding Your Own Style

• Defining the Rules
• The HTML tag is not surrounded by brackets
• The declaration is surrounded by curly brackets
  
• Declarations can contain more than one property
• body backgroundblackcolorwhite
• Properties are separated by a semicolon

51
Adding Your Own Style

• Defining the Rules
• You can format this style rule in a number of
  ways to make it easier to read. The results will
  be the same
• body backgroundblack
• colorwhite
• body
• backgroundblack
• colorwhite

52
Adding Your Own Style

• Defining the Rules
• If you want to apply the same rules to several
  HTML tags you could group those rules together
• body, td, h1
• backgroundblack colorwhite

53
Adding Your Own Style

• Add a little class
• What if you dont want every single h1 heading in
  your document to be white on a black background?
• Use the class attribute almost like creating
  your own tags.

54
Adding Your Own Style

• Add a little class
• The HTML tag name table is followed by a full
  stop (.) and the class name (nav and rest).
• table.nav backgroundaqua
• table.rest backgroundyellow
  text-aligncenter colorblack

55
Adding Your Own Style

• Add a little class
• When the table is referenced in the body of the
  document, you must apply the class attribute to
  tell the browser which style properties should be
  applied
• lttable classnavgt
• lttable classrestgt

56

• lthtmlgt
• ltheadgtlttitlegtClassy tableslt/titlegt
• ltstyle typetext/cssgt
• table.nav backgroundaqua width100
• table.rest backgroundyellow
  text-aligncenter colorblack width50
• lt/stylegt
• lt/headgt
• ltbodygt
• lttable classnavgt
• lttrgtlttdgtlink 1lt/tdgtlttdgtlink 2lt/tdgtlttdgtlink
  3lt/tdgtlt/trgt
• lttrgtlttdgtlink 4lt/tdgtlttdgtlink 5lt/tdgtlttdgtlink
  6lt/tdgtlt/trgt
• lt/tablegt
• lttable classrestgt
• lttrgtlttdgtrow 1, col 1lt/tdgtlttdgt row 1, col 2
  lt/tdgtlt/trgt
• lttrgtlttdgtrow 2, col 1lt/tdgtlttdgt row 2, col 2
  lt/tdgtlt/trgt
• lt/tablegt

57
Attached Classes

• P.first color green
• P.second color purple
• P.third color gray
• ltP CLASS"first"gtThe first paragraph, with a
  class name of "first."lt/Pgt
• ltP CLASS"second"gtThe second paragraph, with a
  class name of "second."lt/Pgt
• ltP CLASS"third"gtThe third paragraph, with a
  class name of "third."lt/Pgt

58
Unattached Classes

• .first color green
• This can be now used with any HTML tag in the
  ltbodygt of the page.

59
Adding Your Own Style

• Applying Styles
• Embedded Styles
• All the styles are defined at the top of the HTML
  document within the ltheadgt tags.
• The styles defined here will apply to only the
  document in which they appear.
• If you plan to re-use these styles in another
  document, you will need to add them there as well.

60
Adding Your Own Style

• Applying Styles
• Embedded Styles
• ltheadgt
• ltstyle typetext/cssgt
• table.nav backgroundaqua
• table.rest backgroundyellow
  text- aligncenter colorblack
• alink colorred text-decorationnone
• lt/stylegt
• lt/headgt

61
Adding Your Own Style

• Applying Styles
• Linked Styles
• Hold all the style properties in a separate file.
  
• Link the file into each HTML document in which
  you want those style properties to appear.

62
Adding Your Own Style

• Applying Styles
• Linked Styles
• ltheadgt
  lttitlegtMy First Stylesheetlt/titlegt
• ltlink relstylesheet href"mystyles.css
• type"text/cssgt
• lt/headgt
• mystyle.css is a separate file containing all my
  style proerties
• h1colorgreen font-familyimpact
• p backgroundyellow font-familycourier

63
Adding Your Own Style

• Applying Styles
• Inline Styles
• Style properties are added to the HTML tags as
  the tag is entered
• lth1 style"colororange font-familyimpact"gt
  Stylesheets The Tool of the Web Design Godslt/h1gt
• ltp style "background yellow font-family
  courier"gt Amaze your friends! Squash your
  enemies!lt/pgt
• The ltstylegt tag becomes the style attribute.
• Multiple style properties are still separated by
  semicolons, but the entire group of properties
  for each tag are grouped within each HTML tag.

64
Adding Your Own Style

• Applying Styles
• Cascading Preference
• The different ways of applying style sheets are
  not treated equally by the browsers
• Inline styles have precedence
• Embedded styles will be applied next
• Linked styles will be applied last.

65
Adding Your Own Style

• Applying Styles
• Cascading Preference
• Example You have created an embedded style for
  the lth1gt tag, but want to change that style for
  one occurrence of the lth1gt tag in that document.
  You would create an inline style for that new
  lth1gt tag. The browsers recognise that fact and
  change the style for that tag to reflect the
  inline style.
• In practice the browsers get a bit confused
  between embedded and linked style sheets so best
  use one or the other of these and not both.

66
Adding Your Own Style

• Style Sheet Properties
• Link Styles
• alink Sets the style for unvisited links
• avisited Sets the styles for visited links
• aactive Sets the styles for the
  hyperlink while it is linking.
• ahover Sets the style for the link while
  mouse is hovering.

67
Adding Your Own Style

• Style Sheet Properties
• Link Styles
• Some of the style properties you can assign to
  your links
• background sets the background colour for the
  link
• color sets the text color for the link
• font-family sets the font for the text of the
  link
• text-decoration underline, overline,
  strikethrough, and none.

68
Adding Your Own Style

• Style Sheet Properties
• Font Styles
• Text on a HTML page is represented by the
  ltbodygt,ltpgt,lttdgt,lttrgt,ltthgt,lth1gtthroughlth6gt, and
  ltligt tags as well as others.
• You can add your own style preferences to each of
  these tags using the style properties.

69
Adding Your Own Style

• Style Sheet Properties
• Font Styles
• background sets the background colour
• color sets the text color
• font-family sets the font for the text
• font-size can be a point size, pixels etc.
• font-style normal (default) or italic
• font-weight extra-light to extra-bold
• text-align left, right, center, or justify.
• text-indent can be a fixed length or a
  percentage.
• text-decoration underline, overline,
  strikethrough, and none

70
Adding Your Own Style

• Check out Microsofts CSS Gallery
• http//www.microsoft.com/typography/css/gallery/en
  trance.htm
• Especially
• http//www.microsoft.com/truetype/css/gallery/slid
  e3.htm

71
Background Images

• body background-image url(thumb.jpg") sets
  the background image
•  
• Alows you to use an image file for the background
  of your Web page.
•  
• A large image may only appear once (depending on
  the size of the browser window), but smaller
  images will be redrawn as many times as necessary
  to fill a page - a process known as tiling.

72
Background Images

• If you write in your HTML doc
• body background-image url(thumb.jpg")
•   Then the jpg will appear in your background as
  many times as the browser window and the size of
  your image will allow. E.g. if it's a small image
  - say, 20 by 20 pixels - and the page is being
  viewed in a 480 by 640 browser window, then kitty
  would appear 768 times.
•  
• However try
• body background-imageurl(thumb.jpg")
  background-repeat no-repeat background-position
  center center

73
Background Color

• body backgroundblack
• Sets the background colour to your HTML file.
• Only a limited number of colours can be specified
  by name and different browsers recognize
  different sets of colors.
•  

74
Background Color

• So if you want to be precise about your
  background you'll want to replace the name of the
  colour, with a hexadecimal code.
•  
• So your HTML would look something like this
• ltbody bgcolorffffffgt
• The "ffffff" represents the RGB value of white,
  translated into hexadecimal.

75
Background Color

• Any colour that can be displayed on a monitor can
  be described by its RGB value - its relative
  amounts of red, green, and blue (each of which is
  expressed as a two-digit number, such as 51 or 14
  or 00).
•  
• In order for a Web browser to understand the RGB
  values, they must each be translated into a
  hexadecimal (or base-16) number.

76
Background Color

• Then the resulting two-digit hexadecimal ("hex"
  for short) numbers are strung together into a
  single six-digit code. So in the example above,
  the first two "f"s stand for the red value, the
  next two stand for green, and the last two for
  blue.
•  
• If you don't want to bother with calculating
  those numbers, there are plenty of colour charts
  out there.

77
Colours Summary

• To see a list of colours and their numerical
  equivalents
• http//the-light.com/colclick.html

78
Create a Portfolio Webpage Using Tables and CSS -
embedded

• Your table needs have 3 columns
• The 1st column should be used as your navigation
  panel you need to use the list tags ltulgt or
  ltolgt to list your elements
• The 2nd column should contain a list of
  thumbnails images based on the selection that
  the user made in colum one (this is a sub
  navigation panel)
• The 3rd column is you content panel and it should
  contain a large image with information text,
  this is displayed based on the users selection in
  column two

79
Create a Portfolio Webpage Using Tables and CSS -
embedded

• Use CSS to control the color of the data cells
  and the text, along with the width and the
  alignment of the content make each cell a
  different color and make the text inside each
  cell a different color
• To treat the contents of each cell differently,
  you will need to define each lttdgt tag using the
  class atributes
• e.g. lttd class"thumbs"gt and then use it in
  your css
• e.g. td.thumbs background666666
• Experiment with the table border properties, cell
  padding and cell spacing

80
Create a Portfolio Webpage Using Tables and CSS -
embedded