Introduction to Tables

1
Introduction to Tables
2
Tables and Placement

• Why are tables important?
• Utilizing tables allows you to organize the
  design of your web page in a coherent manner.
• What can tables do?
• Tables can help you with picture and text
  placement on a web page.
• Tables can help you do things such as create a
  navigation bar, a title banner, and main text
  area on your web page.

3
Table Tags You Should Be Familiar With

• lttablegt lt/tablegt - Table
• lttrgt lt/trgt - Table Row (starts a new row)
• ltthgt lt/thgt - Table Header
• lttdgt lt/tdgt - Table Data (starts a new column).
  The table data is what will hold your
  information.
• These are the only 4 tags that you need to know
  in order to build a basic table.

4
Creating a Table

• When creating a table, you must first decide how
  you want your table to look. A good way to do
  this is to first draw out your table on a piece
  of paper. This will help you determine how many
  cells you want in your table.
• A table cell holds information that will appear
  in your table.

5
Table Tag Order

• There is a prescribed order to lttrgt and lttdgt
  that you must follow when building your table.
• Tables are built horizontally (rows) first
  before they can be built vertically (columns).
• An example of a simple one-celled table HTML
  would be as follows
• lttablegt
• lttrgt
• lttdgt lt/tdgt
• lt/trgt
• lt/tablegt

6
Building a Table

• To begin building a table, you must first open a
  table.
• lttablegt opens a table.
• Remember, tables are built horizontally before
  they can be built vertically. Next, open a row
  with lttrgt.
• You may now start constructing your columns
  (lttdgt). This is where your information (data)
  will go.
• Once you have finished entering your information
  into the first cell, close it with lt/tdgt.
• You may now begin a second lttdgt. Continue
  building your columns until you wish to start a
  new row.

7
Finishing Your Table

• Once you are finished with your first row, end
  it with lt/trgt and start a new row with lttrgt.
• Now you can begin constructing new lttdgt.
• When you have decided that you are finished with
  your table, make sure that you have closed all of
  your lttdgt and lttrgt with lt/tdgt and lt/trgt.
• There should be a corresponding lt/tdgt for every
  lttdgt opened.
• To end your table, simply type in lt/tablegt.

8
Sounds Complicated?

• Building a table may sound complicated at first,
  but you will find that it is really quite simple
  once you get the hang of it.
• After you have mastered simple tables, you will
  be able to learn about table tag attributes which
  will help you modify and enhance the tables that
  you build.

9
Simple Table Example 1 (User end)

• Example
• You would like to build a table with 2 rows and
  3 columns. Each cell should have one letter in
  it a, b, c, d, e, f.
• What your table will look like to the user

10
Simple Table Example 1 (HTML end)

• What your table will look like in HTML
• lttablegtlttrgtlttdgtalt/tdgtlttdgtblt/tdgtlttdgtclt/tdgtlt/t
  rgtlttrgtlttdgtdlt/tdgtlttdgtelt/tdgtlttdgtflt/tdgtlt/trgtlt/t
  ablegt

11

• You are now ready to try building your own
  simple table.
• Have fun!