Designing a Web Page with Tables

1
Tutorial 4

• Designing a Web Page with Tables

2
Objectives

• Create a text table
• Create a table using the lttablegt, lttrgt, and lttdgt
  tags
• Create table headers and captions
• Control the appearance of a table and table text
• Create table cells that span several rows or
  columns
• Use nested tables to enhance page design

3
Text Tables Column Alignment Problems with
Proportional Fonts
Proportional fonts assign a different amount of
space for each character depending on the width
of that character
Columns look aligned
Columns lose alignment
Columns lose alignment
4
Text Tables Column Alignment with Fixed-Width
Fonts
Columns align regardless of font size
Fixed-width or mono-space fonts use the same
amount of space for each character. Use a fixed
width font to ensure that the columns in your
text tables remain in alignment.
5
Using the ltpregt Tag

• The ltpregt tag creates preformatted text and
  retains any spaces or line breaks indicated in
  the HTML file.
• The ltpregt tag displays text using a fixed-width
  font.
• By using the ltpregt tag, the columns will retain
  their alignment no matter what font the browser
  is using.

6
Text Table Created with the ltpregt Tag
7
A Graphical Table

• can include background colors and colored borders
  with shading
• can control the size of tables cells, rows,
  columns and alignment of text within the table

8
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.

9
HTML Structure of a Table
beginning of the table structure
table cells
first row of six in the table
end of the table structure
10
Creating Headings with ltthgt

• HTML provides the ltthgt tag for table headings.
• Text formatted with the ltthgt tag is centered
  within the cell and 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.

11
Identifying the Table Heading,Body, and Footer

• HTML allows you to identify the different parts
  of your table using the lttheadgt, lttbodygt, and
  lttfootgt tags.
• lttheadgt is used for the table heading
• lttbodygt is used for the table body
• lttfootgt is used for the table footer
• These tags do not format the table, but they do
  contain collections of rows called row groups.

12
The Table Heading, Body, and Footer Syntax

• lttablegt
• lttheadgt
• lttrgt heading information . . .
• lt/theadgt
• lttfootgt
• lttrgt footer information . . .
• lt/tfootgt
• lttbodygt
• lttrgt first group of table rows . . .
• lt/tbodygt
• lttbodygt
• lttrgt second group of table rows . . .
• lt/tbodygtlt/tablegt

thead must be listed before tfoot
Both thead tfoot must appear before tbody
13
Creating a Table Caption

• A caption is used to provide descriptive
  information. The syntax isltcaptiongtcaption
  textlt/captiongt
• ltcaption style"font-weight bold text-align
  left"gt Race Resultslt/captiongt
• The ltcaptiongt tag must appear directly after the
  opening lttablegt tag.

14
Modifying the Appearance of a Table

• You can modify the appearance of a table by
  adding
• gridlines
• borders
• background color
• HTML also provides tags and attributes to control
  the placement and size of a table.

15
Adding a Table Border

• By default, browsers display tables without table
  borders.
• The syntax for creating a table border is lttable
  bordervaluegt
• value is the width of the border in pixels
• Unless you set the border size to 0 pixels, the
  size of the internal gridlines is not affected by
  the border attribute.

16
Tables with different borders sizes
lttable border"5" bordercolor"brown
bordercolorlight"tangt ltcaption
style"font-weight bold
text-align left"gt Race
Resultslt/captiongt
17
Table Frames

• The frames attribute determines which sides of
  the table will have borders.
• lttable frametypegttype is box (default),
  above, below, hsides, vsides, lhs,
  rhs, void

18
Creating Table Rules

• The rules attribute controls how the table
  gridlines are drawn.
• lttable rulestypegttype is all, rows,
  cols, none, groups

19
Controlling Cell Spacing

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

20
Setting Cell Padding

• To control the space between the table text and
  the cell borders, add the cellpadding attribute
  refers to the space within the cells.
• lttable cellpaddingvaluegt
• value is the distance from the table text to the
  cell border
• the default cell padding value is 1 pixel

21
Setting the Cell Spacing to 0 andCell Padding to
4 Pixels
lttable border"5" bordercolor"brown"
bordercolorlight"tan" cellspacing"0"
cellpadding"4 gt ltcaption style"font-weight
bold text-align left"gtRace Resultslt/captiongt
22
Setting the Table Width

• lttable widthvaluegtvalue is the width of the
  table in pixels or as a percentage of the display
  area
• If you specify an absolute size for a table in
  pixels, its size remains constant, regardless of
  a users monitors size.
• lttable border"5" bordercolor"brown"
  bordercolorlight"tancellspacing"0"
  cellpadding"4" width"70"gt

23
Setting Cell and Column Width

• To set the width of an individual cell, add the
  width attribute to either the lttdgt or ltthgt tags.
• The syntax is 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

24
Spanning Rows and Columns

• A spanning cell is a cell that occupies more than
  one row or column in a table.
• 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

25
Example of Spanning Cells
26
A Table Structure with a Row-Spanning Cell
27
Adding Spanning Cells to a Table

• lttheadgtlttrgtltth colspan"2"gtRunnerlt/thgt
• ltthgtTimelt/thgt
• ltthgtOriginlt/thgtlt/trgtlt/theadgt
• lttbodygtlttrgtlttd rowspan"3"gtMenlt/tdgt
• lttdgt1. Peter Teaganlt/tdgt
• lttdgt21234lt/tdgt
• lttdgtSan Antonio, Texaslt/tdgtlt/trgt
• lttrgtlttdgt2. Kyle Willslt/tdgt
• lttdgt21305lt/tdgt
• lttdgtBillings, Montanalt/tdgtlt/trgt
• lttrgtlttdgt3. Jason Wult/tdgt
• lttdgt21428lt/tdgt
• lttdgtCutler, Coloradolt/tdgtlt/trgt
• lttrgtlttd rowspan"3"gtWomenlt/tdgt
• lttdgt1. Laura Blakelt/tdgt
• lttdgt22821lt/tdgt
• lttdgtPark City, Coloradolt/tdgtlt/trgt
• lttrgtlttdgt2. Kathy Laskerlt/tdgt
• lttdgt23011lt/tdgt

28
Results of a Table with Spanning Cells
29
Formatting Table Contents

• By using the align and valign attributes, you can
  specify the texts horizontal and vertical
  placement.

30
Formatting Table Text

• Apply the same text and font styles to table
  text.
• The style cascade down through the table
  structure.
• lttable border"5" style"font-family Arial,
  Helvetica, sans-serif font-size1em"gt- - -
• lttbody style"font-size .8em"gt

31
Setting the background colors in the table
32
Setting the background image to a table

• A background-image style can be applied to the
  entire table, to a row group, a row, or an
  individual cell using the style
  belowbackground-image url(url)

33
Aligning a Table on a Web Page

• By default, a browser places a table on the left
  margin of a Web page, with surrounding text
  placed above and below the table.
• To float the table, use the style belowfloat
  positionwhere position is none (default), left,
  or right
• lttablestyle"float right margin 5 0 5 5"gt

34
Working with Column Groups

• To define a column group, add the
  followingltcolgroup spanvaluegt columns
  lt/colgroupgtvalue is the number of columns in the
  group, and columns are definitions for individual
  columns within the group
• ltcolgroup span5 stylebackground-color
  whitegt ltcol stylecolor black span2
  /gt ltcol stylecolor red /gt ltcol
  stylecolor blue span2 /gtlt/colgroupgt

35
Using Tables for Layout

• Specify different backgrounds for the page and
  the table.
• Columnar layout
• Sectional layout
• Fixed-width and Fluid Layouts
• Challenges of Table Layouts

36
Table layout of the Gazette home page
lttrgtlttd colspan2 aligncentergtlt/tdgt lt/trgt
lttrgtlttd width120 rowspan2
valigntopgtlt/tdgt
lt! - - Articles - - gt lttd
valigntopgtlt/tdgt lt/trgt
lttrgtlttd valigntop aligncentergtlt/tdgt lt/t
rgt
37
Table layout for the article section
lttrgt lttd width60 valigntopgt lt/tdgt lttd
width40 valightopgt lt/tdgt lt/trgt
Marathon story
60
40
Highway 6 story
Links to stories features