1 of 41

1
Using Tables

• Kent State University
• Institute of Applied Linguistics

2
Introduction to tables

• HTML tables are a common way of presenting and
  arranging data -- text, preformatted text,
  images, links, forms, form fields, other tables,
  etc. -- into rows and columns of cells. Table
  information is organized into rows and columns.
  Each row and column can have a heading that
  identifies the type of information contained in
  the row of column.

3
Build a Basic Table

• You create simple tables by using the ,
  , and tags.
• The tag marks the beginning and end of
  the table, the tags mark the beginning of
  each new row and the tags mark each new cell
  within a row.
• These tags can include attributes that let you
  control the alignment, spacing, and even the
  background color of the table cells.

4
Build a Basic Table
5
Build a Basic Table
Notice how the cell contents are ordered in rows
and columns
6
Introduction to tables

• Authors may also group columns to provide
  additional structural information that may be
  exploited by user agents. Furthermore, authors
  may declare column properties at the start of a
  table definition (via the COLGROUP and COL
  elements) in a way that enables user agents to
  render the table incrementally rather than having
  to wait for all the table data to arrive before
  rendering.

7
Add a New Table Row

• You can add new rows at any place within the
  table by adding new tags to an existing
  table.
• These tags need to appear between the
  tags.
• The number of tag sets determines the number
  of rows for the table. The number of tag
  sets determines the number of cells in a single
  row.

8
Add a Table Border

• Although the cell contents within a table are
  positioned in rows and columns, you will not see
  the actual cells unless you specify to display
  borders.
• To display borders, you need to add the border
  attribute to the opening tag.
• The border value is the width of the border in
  pixels and defines the border thickness for the
  entire table.

9
Add a Table Border
10
Add a Table Border
Notice how borders have been added to the table.
11
Add a Table Border

• The default for tables is to not display any
  borders. Setting the border attribute to any
  non-zero value automatically enables borders
  between the cells as well as the border around
  the entire table.
• However, increasing the border value higher than
  1 only affects the table border and not the cell
  borders.

12
Add a Table Border
13
Add a Table Border
Notice how the table border has increased in
thickness, while the cell borders have maintained
their original thickness.
14
Add a Table Border

• You can specify a border color using style
  sheets, but the color for a table that does not
  use style sheets will be the same as the text
  color.

15
Simple Table

• Here's a simple table that illustrates some of
  the features of the HTML table model. The
  following table definition
• statistics about fruit flies average height and
  weight, and percentage with red eyes (for both
  males and females)." A test table
  with merged cells rowspan"2"Average rowspan"2"Red
  eyes heightweight
  Males1.90.00340
  Females1.70.00243

16
Add Cell Borders

• The rules attribute of the tag offers a
  way to control the display of the borders between
  the cells. You can set the rules attributed to
  all, none, groups, rows or cols.
• The default value is none.

17
Add Cell Borders

• The all setting displays all internal borders
• The rows and cols settings display borders to
  separate only the rows or columns
• The group setting displays borders according to
  the specified row or column groups.

18
Add Cell Borders
19
Add Cell Borders
20
Set Table Width

• Unless specified, the content contained within
  the individual cells determines the width of the
  entire table.
• If enough cell content exists, the table is
  automatically sized to fit within the browser
  window, and the cell content will wrap within the
  individual cells.

21
Set Table Width

• You can set the entire table width using the
  width attribute in the tag. This
  attribute can be specified in pixels or as a
  percentage of the browser window.
• For example, if the width value is 400, the table
  will be set to eactly 400 pixels. But if the
  width is set to 50, the table is sized to fit
  exactly half of the browser window.

22
Set Table Width
23
Set Table Width
24
Set Table Alignment and Wrapping Text

• You can wrap text around tables.
• Using the align attribute, you can align the
  table to the left or right edge of the browser.
  The default alignment is to the left.
• If you want the text that comes after the closing
  tag to wrap to the side of the table, you
  must include the align attribute. Even
  left-aligned tables require the align attribute
  if you wish the text to wrap around the table.

25
Setting Table Alignment and Wrapping Text
26
Setting Table Alignment and Wrapping Text
27
Setting Table Alignment and Wrapping Text
28
Setting Table Alignment and Wrapping Text
29
Using Row and Column Headings

• Table headings help you understand what the
  various rows and columns of data mean.
• You can add table headings to a table by
  replacing the tags with tags.
• All attributes and values between the and
  tags are identical. However, text marked
  with is displayed in bold.

30
Use Row and Column Headings

• For column heads, all tags are included in a
  single row.
• Changing the first in each row to a tag
  can create row heads.
• The tags do not need to be placed on the
  cells appearing at the edge of thte table. They
  can actually be placed anywhere within the table,
  but it makes more sense to have the appear at the
  top of the columns or at the start or end of a
  row.

31
Use Row and Column Headings
32
Use Row and Column Headings
33
Set Cell Width and Height

• Adding the width attribute to the tag
  enables you to specify the width for the entire
  table, but the heaigh of the table is determined
  by the content of the various cells.
• However, you can set the width and height of
  individual table cells by adding the width and
  height attributes to the or tags. You
  can use either pixels or a percentage.

34
Set Cell Width and Height

• Keep in mind that the size of an individual cell
  will affect the size of all the cells in the same
  row and columns as the resized cell. For example,
  if a single cell is sized to a width and height
  of 100 pixels, all cells within the same column
  will have widths of 100 pixels and all cells
  within the same row will have a height of 100
  pixels.

35
Set Cell Width and Height
36
Set Cell Width and Height
37
Set Background Colors

• You can also take advantage of the bgcolor
  attribute
• Using the bgcolor attribute, you can set the
  background color for the entire table or for
  individual rows or cells.

38
Set Cell Spacing and Padding

• Although there is no easy way to add space
  between a table and normal text, you can add
  space between a cells content and its edges and
  between adjacent cells.
• The tag can include two attributes that
  you can use to add some space around the content
  of a cell and between cells.

39
Set Cell Spacing and Padding

• The cellpadding attribute adds space between the
  cell text and the edges of the cell
• The cellspacing attribute adds space between each
  cell.
• The values of cellpadding and cellspacing
  attributes are measured in pixels.

40
Set Cell Spacing and Padding
41
Set Cell Spacing and Padding