Search This Blog

Monday, October 11, 2010

Chapter 4 - Designing a Web Page with Tables (Part1)

Tables on the World Wide Web

  • A table can be displayed on a Web page either in a text or graphical format

  • A text table:
    -contains only text
    -uses only standard word processing characters

  • A graphical table:
    -is displayed using graphical elements
    -allows you to control the size of tables cells, rows, columns and alignment of text within the table

  • A Text Table

    A Graphical Table

    Considerations for Text and Graphical Tables

  • Graphical tables are more flexible and attractive

  • However, working with tags for graphical tables can be complicated and time-consuming
    -you might want to create two versions of a Web page: one that uses only text elements, and another that uses graphical elements

  • Text TablesUsing Fixed-Width Fonts

  • When you create a text table, the font you use is important

  • A text table relies on space and the characters that fill those spaces to create its column boundaries

  • Use a fixed-width, or mono-space, font so that the columns align properly

  • Fixed-width fonts use the same amount of space for each character

  • Using Proportional Fonts

  • Proportional fonts assign a different amount of space for each character depending on the width of that character
    -for example, since the character “m” is wider than the character “1,” a proportional font assigns it more space

  • Proportional fonts are more visually attractive, and typically easier to read, than fixed-width fonts

  • Proportional fonts in a text table can cause errors when the page is rendered in the user’s browser

  • Column Alignment Problemswith Proportional Fonts

    Column Alignmentwith Fixed-Width Fonts

    Using Preformatted Text

  • The <pre> tag creates preformatted text and retains any spaces or line breaks indicated in the HTML file.

  • The <pre> tag displays text using a fixed-width font

  • By using the <pre> 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

  • Text Table Created with the <pre> Tag

    Text Table Created with the <pre> Tag

    Graphical TablesDefining 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

  • Using the <table>, <tr>, and <td> Tags

  • Graphical tables are enclosed within a two-sided <table> tag that identifies the start and ending of the table structure

  • Each row of the table is indicated using a two-sided <tr> (for table row)

  • Within each table row, a two-sided <td> (for table data) tag indicates the presence of individual table cells

  • The Graphical Table Syntax

  • The general syntax of a graphical table is:
    <td> First Cell </td>
    <td> Second Cell </td>
    <td> Third Cell </td>
    <td> Fourth Cell </td>

    -This creates a table with two rows and two columns

  • A Simple Table

    HTML Structure of a Table

    Creating Headings with the <th> Tag

  • HTML provides the <th> tag for table headings

  • Text formatted with the <th> tag is centered within the cell and displayed in a boldface font

  • The <th> tag is most often used for column headings, but you can use it for any cell that you want to contain centered boldfaced text

  • Adding Table Headings to the Table

    Text in cells formatted with the <th> tag is bold and centered above each table column

    Adding Table Headings to the Table

    Identifying the Table Heading,Body, and Footer

  • HTML allows you to identify the different parts of your table using the <thead>, <tbody>, and <tfoot> tags
    -<thead> is used for the table heading
    -<tbody> is used for the table body
    -<tfoot> is used for the table footer

  • These tags do not format the table, but they do contain collections of rows called row groups

  • The Table Heading,Body, and Footer Syntax

  • A single table can contain several <tbody> tags to identify different parts of the table

  • The <thead> and <tfoot> sections must appear before any <tbody> sections in the table structure

  • Row groups are most often used for tables that draws its data from an external data source

  • For tables that span through different pages, the browser will repeat the header and footer on each pages

  • Not all browsers support this capability

  • Creating a Table Caption

  • HTML allows you to specify a caption for a table

  • The syntax for creating a caption is:
    <caption align=“alignment”>
    caption text

    -alignment indicates the caption placement, however this attribute has been deprecated

  • The <caption> tag works only with tables, the tag must be placed within the table structure

  • Captions are shown as normal text without special formatting

  • Captions can be formatted by embedding the caption text within other HTML tags
    -for example, place the caption text within a pair of <b> and <i> tags causes the caption to display as bold and italic

  • Inserting a Table Caption

    Result of a Table Caption

    Modifying the Appearance of a Table

  • You can modify the appearance of a table by adding:
    -background color

  • HTML also provides tags and attributes to control the placement and size of a table

  • Working with the Table Border

  • By default, browsers display tables without table borders

  • The syntax for creating a table border is:
    <table border=“value”> … </table>
    -value is the width of the border in pixels

  • if you don’t specify a size, the browser creates a table border 1 pixel wide

  • The effect on a table’s border when the border size is varied

    Adding a 5-Pixel Border to a Table

    Table Frames and Rules

  • With the frame and rule attributes you can control how borders and gridlines are applied to the table

  • These two attributes was introduced in HTML 4.01- therefore might not be supported in older browsers

  • The frames attribute allows you to determine which sides of the table will have borders

  • The frame attribute syntax is:
    <table frame=“type”> … </table>

  • Values of the Frame Attribute

    Effect of Different Frame Values

    Creating Frames and Rules

  • The rules attribute lets you control how the table gridlines are drawn

  • The syntax of the rules attribute is:
    <table rules=“type”> … </table>
    -type is either “all”, “rows”, “cols”, or “none”

  • Effect of Different Rules Values

    Sizing a TableCell Spacing

  • The cell spacing attribute controls the amount of space inserted between table cells

  • The syntax for specifying the cell space is:
    <table cellspacing=“value”> … </table>
    -value is the width of the interior borders in pixels
    -the default cell spacing is 2 pixels

  • Tables with Different Cell Spacing Values
    Different cell spacing values and a table’s appearance

    back to top