Positioning Elements and Laying Out your Site

1
Positioning Elements andLaying Out your Site

• HTML Tables

2
Review

• What can we do to have more than one HTML element
  use the same style definition?
  
• What is a style class?
• How do you define styles for a class?
• How can we assign more than one style for a
  single HTML element?
  
• How can we assign styles that can be used for any
  HTML element?
  
• What does the div stand for?
• How can we use the tag?

3
Positioning and Layout

• Up until now, most of us have made pages that
  flow from top to bottom, with elements,
  elements, and images.
  
• What do you do if you want to format your page a
  little bit differently, such as having two or
  more columns?
  
• There are several options available to you. The
  first one we are going to talk about is HTML
  tables.

4
HTML Tables

• Tables can be a useful HTML element for building
  page layouts. In the early years of the WWW,
  tables were really the only way to get elements
  positioned on the screen.
• They are very flexible, and allow you to organize
  information (text, pictures, etc) easily
  
• They can be used to contain and divide
  information, position images and media, display
  color in areas, and define the basic layout of a
  web page

5
BUT...

• Nowadays, it is looked down upon to use tables to
  layout your page
  
• Because of this, although we will mention how
  they COULD be used for layout, we will only have
  assignments using them to present data that
  logically belongs in tabular form charts,
  schedules, multi-column lists, etc
• Repeat DO NOT USE TABLES FOR LAYOUT!!!!! We will
  discuss what you should use soon.
  

6
HTML Tables

• Tables are made up of rows and columns. A column
  refers to the vertical sections of a table and a
  row refers to the number of horizontal sections
  in a table.
• A cell is an enclosed space in a table (the
  intersection of a row and a column)

7
HTML Tables

• The basic tags used in building a table
• The table tags. Every table begins with
  and ends with
  
• The row tags. Before you can begin entering in
  cell data, you need to have at least one row to
  put the data in. A row begins with (for
  table row) and ends with .
• The table data tags. Once you have a row made,
  you can start filling it by putting each table
  element in between and tags (td stands
  for table data).

8
tag attributes

• The tag can contain several different
  attributes.
  
• . The border attribute sets the
  border for the table, and the individual cells
  inside the table. The number after the equal sign
  is the size of the border, in pixels. For no
  border, set border"0". Note that this is
  different than CSS borders, because you don't
  give a unit after the size, or give color, or
  anything else like that.
• . The cellspacing
  attribute sets the amount of space between two
  cells, in pixels.
  
• . Cell padding is the
  amount of space between the border of a cell and
  the content of the cell, in pixels. The default
  cell padding is 1 pixel. It is now preferred that
  you use styles to handle padding, but this way
  still works.
• why this table is here". The summary attribute
  is intended to give the structure or purpose for
  the table for people using non-visual ways to
  access the page. Like the alt attribute for img
  tags, you should always try to include this
  attribute
• Generally, you want to avoid using the border,
  cellspacing, and cellpadding attributes, since
  all of those things can be taken care of in CSS.
  

9

• Example

10
More advanced table tags

• This is a table caption. A
  table caption is an optional caption for the
  table. If included, it must be the first element
  in a table (before the first ).
• This is my table
• Cell 1
• Cell 2

11
More advanced table tags

• . Table headers. Use these instead of
  to enclose a cell that will contain a
  heading.
  
• Technically, should go inside of a
  table element , which defines the
  table head. Although you don't HAVE to use
  in today's HTML, it is a good idea to get
  used to using them now .
• The tags need to come before the
  first table row, and contain and
  elements

12
More advanced table tags

• If you use , you should also use the
  tags (which enclose all of the
  non-header or footer s and s in the
  table)
• There is also a tag called that defines
  the footer for a table (supplemental information
  that goes at the bottom of the table).
  
• Even though it shows up at the end of the table,
  when you write it the tags need
  to go after , but before the
  tags

13
attributes

• All table data cells in the same column will have
  the same width, and each row by default has room
  for the same number of cells.
  
• If you want one of the cells to span the width of
  two columns, you can use a attribute called
  colspan. , for instance, makes
  the cell span 2 columns.
• If you want one of the cells to span the height
  of two rows, you can use a attribute called
  rowspan. makes the cell span 2
  rows.

14

• Example tables2.htm on the website

15
HTML Tables

• Tables can be formatted using styles just like
  every other HTML element. You can change their
  width (using percentages or exact pixel length),
  border colors, background colors, and just about
  anything else.
• Defining separate styles for td, th, thead,
  tbody, and tfoot can result in very different
  looks

16
Styles and tables

• All of the table elements (, , etc)
  can have styles defined for them just like the
  other elements we have looked at so far.
  
• For example, to make your table take up the whole
  page, in its style define the width to be 100.
  
• Another example
• table width 100

17
Styles and tables

• Example tables3.htm on website

18
Using tables for layout

• By making your table have no border and no
  background, you can use tables to layout your
  site.
  
• However, use this sparingly, as we will soon
  learn there are other ways to layout non-tabular
  data using styles.

19
Practice using tables

• For now, today, though, we will have a short
  little lab assignment to make sure you understand
  how to use tables to organize information.
  
• After you get done with the lab, see if you can
  use tables on your personal web site from Lab 1
  (which I'll put in the assignment folder), if you
  can think of any good place to put them.
• As usual, check out www.w3schools.com if you need
  a good reference for building tables

20

• Create table in tableYOURNAME.html to hold the
  following
  
• Make sure to give the table a caption like the
  one above using , and make the
  link to imdb.com in the footer work
  
• Must be demoed by the end of class for a grade
  from the online rubric
  

caption
thead with a tr and th tags
tbody with tr and td tags
tfoot with a tr and a td colspan"3" tag