Use Tables for Layout Control

1
Use Tables for Layout Control

• Day 7

2
You will learn to

• Understand Tables
• Create a Simple Table
• Modify Your Tables Appearance
• Create Page Layouts with Tables
• Design a Table of Links for Site Navigation

3
Create a Simple Table

• Tables are not difficult to understand or build.
• Can become complex, but concept is easy
• Picture a spreadsheet and you visualize a table.
• Each segment is called a cell

4
Open template.htm

• Save as TABLES.HTM
• Copy the following code to create a simple three
  cell by three cell table.

5

• ltbodygt
• lttablegt
• lttrgt lttdgtXlt/tdgt lttdgtXlt/tdgt lttdgtXlt/tdgtlt/trgt
• lttrgt lttdgtXlt/tdgt lttdgtXlt/tdgt lttdgtXlt/tdgtlt/trgt
• lttrgt lttdgtXlt/tdgt lttdgtXlt/tdgt lttdgtXlt/tdgtlt/trgt
• lt/tablegt
• lt/bodygt

6
Youve created a simple table.

• You create a table with only three elements
• lttablegtlt/tablegt Use this element for each table
  you wish to create
• lttrgtlt/trgt (table row) establishes a row. Use
  every time you want a row
• lttdgtlt/tdgt (table data) element creates individual
  cells in a row. Whatever content you want to
  place in the table goes between these tags

7
Modify your tables appearance

• Add Headings and Captions
• Display a Border
• Position your Content
• Add Background Colors
• Adjust Space In and Between Cells
• Make Cells Span Multiple Columns and Rows
• Adjust Height and Width
• Position Tables on Your Page
• Modify Borders and Cell Divisions
• Add Images and Links

8
Add Headings and Captions

• Use the ltthgt lt/thgt Element to Add Headings to
  Your Table
• To add a heading, you use ltthgtlt/thgt instead of
  the lttdgt element
• It will display the text inside the cells as
  centered and boldface.
• Add this code to the table right after the
  opening table tag.

9

• lttrgt ltthgtCol 1lt/thgt
• ltthgtCol 2lt/thgt
• ltthgtCol 3lt/thgt
• lt/trgt

10
Add Captions with the ltcaptiongt lt/captiongtelement

• A caption can be used to display a title for you
  table.
• Add the following code right after the opening
  table tag
• ltcaptiongtHow to Use Tableslt/captiongt

11
Display a Border

• Simply add the border attribute to the
  opening lttablegt tag.
• To add a border that is three pixels wide go back
  to your code and modify the table tag to read
  like this
• lttable border3gt

12
Position Your Content

• You should have noticed that your Xs in your
  table are aligned to the left sides of their
  cells.
• If you want the content to be centered or
  right-justified, there are a couple of options.

13
Position content Horizontally with the align
Attribute

• You must include the align attribute in each cell
  where you want to specify the position.
• For example, to center text you would modify a
  lttdgt tag to read lttd aligncentergt
• There are several options for alignment

14

• Left Aligns cell contents to the left. This is
  the default alignment
• Right Aligns cell contents to the right.
• Center Aligns cell contents to the center.
• Justify Also aligns the cells content to the
  left.

15
Control Vertical Alignment with the valign
Attribute

• You can determine whether your content aligns at
  the top, middle, or bottom of a cell by using the
  valign attribute.
• Enables you to specify the vertical positioning
  for individual cells
• lttd valigntopgt, Entire rows lttr
  valignmiddlegt or a complete table lttbody
  valignbottomgt

16

• lttable border3 height200 width200gt
• lttrgt lttd alignleftgtLeftlt/tdgt
• lttd aligncentergtCenterlt/tdgt
• lttd alignrightgtRightlt/tdgt
• lt/trgt
• lttrgtlttd valigntopgtToplt/tdgt
• lttd valignmiddlegtMiddlelt/tdgt
• lttd valignbottomgtBottomlt/tdgt
• lt/trgt

17

• lttrgt
• lttd valignbaselinegtBaselinelt/tdgt
• lttd alignjustifygtJustifylt/tdgt
• lttdgtDefaultlt/tdgt
• lt/trgt
• lt/tablegt

18
Add Background Colors

• Setting you background colors is easy using the
  bgcolor attribute
• You can set the color for individual cells, for
  individual rows, or for the whole table.

19
Set table color with bgcolor

• This attribute, used with a table, is great for
  creating navigation bars in you Web pages.
• Place bgcolor in the lttablegt element to
  control the color of the entire table
• Place bgcolor in the lttrgt element to control
  the color of a row
• Place bgcolor in the lttdgt element to control
  the color of individual cells

20
Use cellspacing to Adjust the Space Between Cells

• The cellspacing attribute allows you to add space
  between the cells in your table as measured in
  pixels.
• This attribute must go inside the lttablegt tag
• Add this to your first table
• Cellspacing10

21
Use cellpadding to Add Space Inside Cells

• Cellpadding adds space inside the cells
• It also adds a layer of padding around the
  contents of the cell.
• Add this to your first table
• Cellpadding10

22
Make cells Span Multiple Columns and Rows

• You can make one cell span two or more rows or
  columns
• To make a cell span multiple rows, insert the
  rowspan attribute in the cells opening lttdgt
  tag
• Make the top left cell in your table span two
  rows by adding
• Rowspan2

23
Caution

• When you add the rowspan attribute to the code
  for your table, be sure to remove one of the
  cells (lttdgtXlt/tdgt) in the second row

24
Make a cell span columns

• To do this you add the colspanattribute
• Remove one of the cells from the bottom row of
  your first table and modify the last cells
  opening lttdgt tag to read
• lttd colspan2gt

25
Set Height and Width with Fixed or Dynamic Design

• Fixed Design involves specifying a tables
  dimensions in concrete terms. For example if you
  want to stretch the sample table horizontally,
  you could specify that the sample table youve
  been constructing should be 200 pixels high by
  500 pixels wide by changing the opening table tag
  to read
• lttable height200 width500gt

26
Dynamic Design

• You describe a tables dimensions using
  percentages.
• lttable height75 width75gt
• Add this to your first open table tag.

27
Position Tables on a Page

• Element such as ltdivgt, ltspangt, and ltcentergt
  provide a quick and easy solution for alignment.
• You also can position tables with the align
  attribute and CSS provides an option for table
  placement with its float property.

28
Position tables w/elements

• If you enclose your table inside the ltdivgt or
  ltspangt elements along with the align
  attribute, you can position the table to the
  left, center, or right.
• Any text or page content coming after the table
  will start immediately below it.

29

• To right-align a table using ltdivgt, you would
  right the code as follows
• ltdiv alignrightgt
• lttablegt
• lt/tablegt
• lt/divgt
• The ltspangt element will produce similar results

30
Position Tables w/attributes

• By using the align attribute inside the
  lttablegt tag, you can also position a table in the
  center or on the right side of the page.
• An advantage of using the align attribute is that
  any outside text will wrap around the table.
• ltalignrightgt text will wrap to left
• ltalignleftgt text will wrap to right

31
Modify Borders and Cell Divisions

• Sometimes, you might want only a partial border
  or just rule lines drawn between the cells.
• There are ways to accomplish this using both HTML
  and CSS

32
Use the HTML frame attribute to Adjust Table
Borders

• If you want to make changes to how the outer
  border of a table displays, the HTML frame
  attribute gives you quite a few options.
• By inserting the following attributes, you can
  select portions of the table border to display,
  while others remain visible

33

• To display only the top frameabove
• To display only the bottom framebelow
• To display only the left side framelhs
• To display only the right side framerhs
• To display both the left and right sides
  framevsides
• To display both the top and bottom sides
  framehsides
• To display no outside border at all framevoid

34
Use the rules attribute to Adjust Interior Borders

• Just as frame enables you to control the outer
  borders of a table, rule gives you control over
  the interior borders, or rules, between the
  cells.
• With the rules attribute you can remove all the
  interior borders, just the horizontal ones, or
  just the vertical ones.

35

• To display vertical rules rulescols
• To display horizontal rules rulesrows
• To display no rules rulesnone
• To display rules between table groups
  rulesgroups