Page layout with tables

1
Page layout with tables

• tables.ppt

2
Table Layout of a Web Page
This figure shows a sample table layout of a Web
page. Tables were a big addition to HTML because
of their usefulness in laying out pages with both
graphics and text.
3
Column Alignment Problemswith Proportional Fonts
4
Column Alignmentwith Fixed-Width Fonts
5
Using the ltpregt Tag

• The ltpregt tag creates preformatted text and
  retains any spaces or line breaks indicated in
  the HTML file.
• preformatted text is text formatted in ways that
  HTML would otherwise not recognize.
• The ltpregt tag displays text using a fixed-width
  font.
• By using the ltpregt tag, a text table can be
  displayed by all browsers, and the columns will
  retain their alignment no matter what font the
  browser is using.
• Most of the time, the lttablegt tag will be used to
  insert tables into a Web page.

6
Defining a Table Structure

• The first step to creating a table is to specify
  the table structure
• the number of rows and columns
• the location of column headings
• the placement of a table caption
• Once the table structure is in place, you can
  start entering data into the table.

7
Using the lttablegt, lttrgt, and lttdgt Tags

• Graphical tables are enclosed within a two-sided
  lttablegt tag that identifies the start and ending
  of the table structure.
• Each row of the table is indicated using a
  two-sided lttrgt (for table row).
• Within each table row, a two-sided lttdgt (for
  table data) tag indicates the presence of
  individual table cells.

8
The Graphical Table Syntax

• The general syntax of a graphical table is
• lttablegt
• lttrgt
• lttdgt First Cell lt/tdgt
• lttdgt Second Cell lt/tdgt
• lt/trgt
• lttrgt
• lttdgt Third Cell lt/tdgt
• lttdgt Fourth Cell lt/tdgt
• lt/trgt
• lt/tablegt
• This creates a table with two rows and two
  columns.

9
Columns within a Table

• HTML does not provide a tag for table columns.
• The number of columns is determined by how many
  cells are inserted within each row.
• four lttdgt tags in a table row produces a table
  with four columns
• Later versions of HTML provide increased support
  for controlling the appearance of table columns.

10
Completed HTML Table Tags
This figure shows the completed text for the body
of the table. With the text for the body of the
table entered, the next step is to add the column
headings. How many columns? How many rows?
11
Creating Headings with the ltthgt Tag

• ltthgt tag for table headings.
• centered within the cell
• displayed in a boldface font.
• The ltthgt tag is most often used for column
  headings, but you can use it for any cell that
  you want to contain centered boldfaced text.

12
Adding Table Headings to the Table
Text in cells formatted with the ltthgt tag is bold
and centered above each table column.
13
Creating a Table Caption

• HTML allows you to specify a caption for a table.
• The syntax for creating a caption is ltcaption
  alignalignmentgtcaption textlt/captiongt
• alignment indicates the caption placement
• a value of bottom centers the caption below the
  table
• a value of top or center centers the caption
  above the table
• a value of left or right place the caption
  above the table to the left or right

14
Inserting a Table Caption
Placing the caption text within a pair of ltbgt
tags causes the caption to display as bold.
15
Modifying the Appearance of a Table

• You can modify the appearance of a table by
  adding
• gridlines
• Borders lttable bordervaluegt
• Value is pixel size of border (default 1 pixel)
• background color
• HTML also provides tags and attributes to control
  the placement and size of a table.

16
Tables with Different Borders Values
This figure shows the effect on a tables border
when the border size is varied.
17
Controlling Cell Spacing

• Cell spacing refers to the space between the
  cells.
• The cellspacing attribute controls amount of
  space inserted between table cells.
• lttable cellspacingvaluegt
• value is the width of the interior borders in
  pixels
• the default cell spacing is 2 pixels

18
Tables with Different Cell Spacing Values
This figure shows how different cell spacing
values affect a tables appearance.
19
Cell Padding

• Cell padding refers to the space within the
  cells.
• Controls the space between the table text and the
  cell bordersThe syntax for this attribute is
  lttable cellpaddingvaluegt
• value is the distance from the table text to the
  cell border, as measured in pixels
• the default cell padding value is 1 pixel

20
Tables with Different Cell Padding Values
This figure shows the effect of changing the cell
padding value for a table.
21
Working with Table and Cell Size

• The size of a table is determined by the text it
  contains in its cells.
• By default, HTML places text on a single line.
• As you add text in a cell, the width of the
  column and table expands to the edge of the page.
• once the page edge is reached, the browser
  reduces the size of the remaining columns to keep
  the text to a single line
• You can insert a line break, paragraph or heading
  tag within a cell.

22
Working with Table and Cell Size Continued

• When the browser can no longer increase or
  decrease the size of the column and table it
  wraps the text to a second line.
• As more text is added, the height of the table
  expands to accommodate the additional text.
• It is important to manually define the size of
  the table cells and the table as a whole.

23
Defining the Table Size

• lttable widthsize heightsizegt
• size is the width and height of the table as
  measured in pixels or as a percentage of the
  display area
• To create a table whose height is equal to the
  entire height of the display area, enter the
  attribute height100.
• If you specify an absolute size for a table in
  pixels, its size remains constant, regardless of
  the browser or monitor settings used.
• EXCEPT the table expands when you insert graphics
  inside the table cells that add up to greater
  than specified pixels
• Remember that some monitors display Web pages at
  a resolution of 640 by 480 pixels.

24
Defining Cell and Column Sizes

• To set the width of an individual cell, add the
  width attribute to either the lttdgt or ltthgt tags.
• Attribute widthvalue
• value can be expressed either in pixels or as a
  percentage of the table width
• a width value of 30 displays a cell that is 30
  of the total width of the table

25
Defining Cell and Column Sizes Continued

• Can be set to
• Fixed pixel size
• Relative size.
• Specifying a width for an individual cell does
  not guarantee that the cell will be that width
  when displayed in the browser.
• the cell is part of a column containing other
  cells.
• Set the width of all the cells in the column to
  the same value to ensure that the cells do not
  change in size.

26
Defining Cell and Column Sizes Continued

• The height attribute can be used in the lttdgt or
  ltthgt tags to set the height of individual cells.
• The height attribute is expressed either in fixed
  pixels or as a percentage of the height of the
  table.
• If you include more text than can be displayed
  within that height value you specify, the cell
  expands to display the additional text.

27
Aligning the Contents of a Table

• By default, cell text is placed in the middle of
  the cell, aligned with the cells left edge.
• By using the align and valign attributes, you can
  specify the texts horizontal and vertical
  placement.
• To align the text for a single column, you must
  apply the align attribute to every cell in that
  column.

28
Values of the Align and Valign Attributes
This figure shows how the combination of the
align and valign attributes can affect the
position of the cell text in relation to the cell
borders.
29
Spanning Rows and Columns

• a spanning cell merges several cells into one,
• Spanning cells are created by inserting the
  rowspan and colspan attribute in a lttdgt or ltthgt
  tag.
• The syntax for these attributes is
  rowspanvalue colspanvalue
• value is the number of rows or columns that the
  cell spans in the table
• When a cell spans several rows or columns, it is
  important to adjust the number of cell tags used
  in the table row or columns.

30
Example of Spanning Cells
31
A Table Structure with a Row-Spanning Cell
This figure shows spanning cells.
32
Adding Spanning Cells to a Table
33
An Example of Spanning Cells
This figure shows an example of spanning cells.
34
An Example of Spanning Cells
This figure shows an example of spanning cells.
35
Applying a Background Color

• Table elements support the bgcolor attribute.
• To specify a background color for the table
  lttablegt, row lttrgt, cell lttdgt, add bgcolor
  attribute
• lttable bgcolorcolorgt
• lttr bgcolorcolorgt
• lttd bgcolorcolorgt
• color is either a color name or hexadecimal color
  value

36
Specifying Table, Row, and Cell Colors
You cannot set a background color for a column
with a single attribute to set the background
color for an entire column, you must define the
background color for each cell in that
column. The color defined for a cell overrides
the color defined for a row, and the color
defined for a row overrides the color defined for
a table.
37
Results of a Table with a Colored Background
This figure shows a table with a colored
background.
38
The bordercolor Attribute

• By default, table borders display in two shades
  of gray that create a three-dimensional effect.
• lttable bordercolorcolorgt
• color is an HTML color name or hexadecimal color
  value
• Internet Explorer and Netscape apply this
  attribute differently.
• The bordercolorlight and bordercolordark
  attributes allow you specify light and dark
  colors of a 3-D border.

39
Using the bordercolorlight Attribute
This figure shows an example of the use of the
bordercolor and bordercolorlight attributes to
create a 3-D colored border in Internet Explorer.
Netscape does not support these attributes.
40
Applying a Table Background

• Add a background image to your tables using the
  background attribute.
• A background can be applied to the entire table,
  to a single row (Netscape 6.2 only), or to an
  individual cell.

41
Applying a Background Imageto a Table, Row, and
Cell
This figure shows examples of the background
attribute applied to three sample tables.
42
Comment Tags

• Comment tags can aid in viewing your HTML file by
  describing the different sections of the code.
• The syntax for creating a comment tag is
• lt! Comment textgt
• comment text is the text that you want to insert
  into the comment
• Any text appearing within the comment tag is
  ignored by the browser and not displayed in the
  page.

43
Using Nested Table

• Tables can be created within another table making
  the Web page easier to manage.

44
A Sketch of a Web Page using Nested Tables
This figure shows a sketch of a web page using
nested tables.