INP 140: Day 8

1
INP 140 Day 8

• Tables

2
Tables for Data and Positioning

• In web design, we use tables for displaying
  data and sometimes for positioning elements on a
  page.

3
What are tables?

• Tables consist of rows and columns that intersect
  to create cells and were originally designed to
  give web creators a way to display and organize
  charts and data.

4
Tables for Data

• One of the primary reasons we put a table into a
  website is for presenting data.
• If you have ever worked in Microsoft excel or
  created a spreadsheet you should be familiar

5
Data Tables

• You can easily create a visual representation of
  data that is easy to comprehend and read.
• Charts
• Spreadsheets
• Grids
• etc

6
What is in a table?

• Tables consist of
• Columns
• Cells
• Headings
• Rows

7
(No Transcript)
8
Example Data Table
9
Other examples
HTTP//WWW.PORTAGELAKECOTTAGE.COM http//www.reco
very.gov/?qcontent/investments-agencyhttp//ica
nt.co.uk/csstablegallery/index.php
10
Creating a Data Table

• Like adding media, we have a menu option to
  INSERT gt MEDIA
• Or we have an icon to insert a table

11
DEMO
12
Doing so gives us the new table box
13
Gives us a table

• We can click into a cell, and type into it

14
And resize the columns
15
The table properties bar
16
LAB 6 - Exercise 1
17
Tables for positioning

• You may have noticed that up until this point
  when we want to alter where an item is positioned
  on the page we either choose it to be aligned all
  the way to the right, all the way to the left, or
  in the dead center.

18
Tables for positioning

• If we want to adjust the vertical positioning we
  have been hitting enter a bunch of times to space
  it out
• This is not optimal, we have very little control
  over where an item fits on the page.

19
Tables for positioning

• At some point someone figured out that you could
  use a table as a grid to adjust where an item
  is place on the page.
• This was done by creating different rows/columns,
  adjusting the width/heights, and turning off the
  border to make the table invisible.

20
Tables

• This because the standard way to create complex
  layouts for web sites.

21
That example becomes
22
This is not ideal

• Any guesses at why this isnt the best way to
  make a website?

23
Are tables bad?

• Tables have no semantic meaning in relation to
  placement. Search engines dont know why an image
  is placed in a data cell.
• It creates a lot of extra code (longer download
  time)

24

• Content order gets mixed up, bad for screen
  readers.
• Now it is recommended that you use CSS (Cascading
  Style Sheets) for layout and positioning.

25
Tables for layout

• PRO
• Easier to control in a WYSIWYG editor
• Better cross browser compatibility
• Browser manufactures are still working on making
  css rendered in a universal manor.

26
Tables for layout

• CON
• Not semantically correct
• Longer page load times
• Accessibility Issues
• Maintenance Issues

27
What will we be using?

• We will be learning a bit of both, and you can
  use what ever you feel most comfortable.

28
Using Tables for Layout

• We Adjust the size of the row / column to alter
  where the content inside of it will sit.

29
Example
WHAT IF WE WANTED TO MOVE THE TEXT SO IT WAS
ALIGNED IN THE CENTER OF THE TWO IMAGES?
30
(No Transcript)
31
(No Transcript)
32
Tables and sizing

• With tables we can adjust the size of the table,
  a row, or a column by
• Clicking and dragging
• Specifying a pixel width
• Remember not to make it wider than the common
  screen resolutions
• Specifying a percentage

33
If we wanted a 3 column layout

• We could create a table with 3 columns, each one
  set at 33 width

34
Setting the Table Width
35
DEMO
36
Selecting Cells vs Selecting the Tables

• Tables consist of several different pieces, and
  each one has its own properties
• To select a sell, you click inside it
• To select the whole table, you click on a border
• To select a row, you click and drag a whole row
• To select a column you click and drag the whole
  column.

37
Row Selected
38
Column Selected
39
Table Selected
40
When selected

• When selected, you get different properties that
  you can work with regarding the different portion
  of the table.
• You can adjust the text alignment of a single
  cell, or select a whole row and adjust the text
  of the row

41
DEMO, SELECTING / TEXT ALIGNMENT
42
Adding Content To Cells

• We can add content to cells
• Simply click inside a cell
• You can then type in content
• Or insert and image like we have before
• Or even insert media

43
DEMO OF ADDING CONTENT
44
Lab 2 - Exercise 2
45
Merging and Splitting Cells

• What if we want on row to cross all columns?
• We can combine / merge cells so they become
  bigger.
• This is done by selecting two or more cells, and
  clicking the MERGE CELLS button on the property
  bar.

46
Example
47
(No Transcript)
48
Splitting a cell

• What if we wanted to divide on cell into two?
• We can click inside that cell, and on the
  property bar click the SPLIT CELL icon

49
THE CELL IS NOW SPLIT IN TWO
50
DEMO MERGING SPLITTING CELLS
51
Adding Tables with in Tables

• We can add tables inside of other tables if we
  want to
• This is called NESTING

52
A table with in a table
53
This is done by

• Clicking in the cell, and simply clicking the
  table icon from the insert bar.

54

• The content with in a table cell can be aligned
  much like other content.

55
This is done by

• Aligning elements with in a cell is done by
  clicking on the cell, and setting the alignment
  in the property bar

56
DEMO WORKING WITH ALIGNMENTS
57
Adding Rows / Cells

• Right click on a table, goto the TABLE menu
  option. Add row / Add column / Add rows columns

58
- Or -

• Modify gt table gt insert row / insert col..etc

59
Deleting a row / column

• Select the row column, and hit delete

60
Deleting a row / column

• Or select the row / column and go to MODIFY gt
  Delete Row / Delete Column

61
Lab 6, exercise 3