Tables

1
Tables
2
Whats a table?

• Rows of data cells
• Each cell is a compartment, you can put stuff in
  it like images or text. Rows go from left to
  right. Columns go from top to bottom

Cell 1 Row 1 Cell 2 Column 2 Column 4
Cell 1 Row 2
Cell 1 Row 3
3
Why do we use them?

• To display info as a table (like the last slide)
• To position text and images where we want them on
  the page. To organize our stuff.

4
Table Tags

• lttable border1gt starts the table
• lttrgt starts the first row (tr table row)
• lttdgt contents of first cell (td table data)
• lt/tdgt ends first cell
• lt/trgt ends first row
• lttrgt starts another row
• And so on.

5
Putting images into the table

• Use img src the same way you normally do, but put
  it in between the lttdgt tags.
• You can align the images, centered, etc. the same
  way you normally would.
• Same with text, by the way.

6
More on tables

• Adjust size of table lttable width500gt or
  lttable width80gt
• You can size the cells too lttd width250gt or
  lttd width50gt
• Numbers like 500 or 250 are PIXELS
• If you use pixels, make sure that the cell widths
  add up to the table total width.

7
More Tags

• lttable alignleft, right, centergt table on page
• lttd alignleft, right centergt table data
• lttd valigntop, middle, bottomgt aligns the stuff
  at the top, middle or bottom of the cell
• Shortcut lttd alignleft valignbottomgt

8
Cell Span

• You can have a cell span several rows or columns
• lttd rowspan3gt creates a cell that spans 3 ROWS
• lttd colspan4gt creates a cell that spans 4 COLUMNS

9
Tables/fonts/stuff

• lttdgt
• ltfont facearial colorredgttext goes
  herelt/fontgt
• lt/tdgt
• lttdgt
• ltfont facecomic sans ms colorbluegt blue comic
  sans ms fontlt/fontgt