HTML Basics:
Data Table

Title: Jan's Illustrated Computer Literacy 101
españolIcon: Change web
Did you want IE9+, Chrome, Firefox; Notepad? Icon: Change web

Table tags were designed to display  information that can be logically arranged in rows and columns. 

Example of a data table:

First Quarter Sales

  January February March
widgets 1090 2450 2018
wangles 450 392 874
whatsits 2045 500 3920
Total: 3585 3342 6812

Where you are:
JegsWorks > Lessons > Web

Before you start...

Project 1: Browser BasicsTo subtopics

Project 2: HTML Basics
    HTML CodeTo subtopics
    About HTML
    What You Need
    Code by HandTo subtopics
    FrontPage/FPX To subtopics
    Images in HTMLTo subtopics
    FormattingTo subtopics
    Tables Arrow - Subtopic open Table: Attributes for Table tags
    icon-footprintData Table
    icon-footprintPosition Table
    ConvertTo subtopics
    ExercisesTo subtopics


Icon Step-by-Step

Step-by-Step:Data Table

 Icon Step-by-Step

What you will learn:

to create a data table
to add data to cells
to format the table 
to format cell contents

 Start with Class disk, hector 19.htm (FrontPage or FPX)

You will add to Hector's page a data table listing the countries he has visited.

Insert Table 

  1. Cursor on blank line below TravelCreate, if necessary, a blank line below the paragraph Travel.

  2. Table palette - select 4 x 2With the cursor in the new line, click on Button: Table the Table button on the Standard toolbar and drag in the palette to select two cells wide and 4 rows tall. 

    hector19.htm with blank 4 x 2 table
    FrontPage default table -
    width 100%, each column same width

    Tiny blank table is inserted.
    FPX default table -
     minimum size for cells

    A blank table is inserted at the cursor. The default sizes for FrontPage and FPX are different.

  3. Type data in the cells, as shown below in the illustration from FPX.

    Table of Hector's countries - centered data

    Use line breaks (SHIFT+ENTER) to create new lines in the Country column. Using ENTER alone creates a new paragraph with extra white space.

    You now need to format the table and the cells. 

Format: Table

First you will make choices for the way the table itself displays. After that you can format what is in the cells.

  1. Insert a Clear Left line break at the end of the Travel paragraph. This will keep  your table from wrapping around the Travel image at certain window sizes.
  2. Right click Menu- Table PropertiesRight click on the table and from the popup menu select  Table Properties .
    The dialog appears with the default settings

    Alignment = Left
    Border Size = 0
    Border Color = Default
    Minimum Width is not checked.

    Your table needs some borders and needs to be easy to read against the page background. You will need change the default table settings.

  3. Dialog: Table Properties - settings for data tableChange the default settings to:

    Alignment = Center
    Border Size = 1
    Cell Padding = 3
    Cell Spacing = 0
    Background Color = White
    Border = Navy

    Data table formatedThe table now has a navy border and is centered on the page. The table background is white, a subtle difference in this case, but still helpful.

Format: Cells

Now you can work on the look of the data. First you will change the alignment in the cells.

  1. All cells selected in data table.Select all the cells in the table by dragging across all the rows.
  2. Right click on the selected cells and from the popup menu select  Cell Properties .
    The Cell Properties dialog appears with the default choices. The FrontPage and FPX versions of this dialog are arranged differently, but they have the same choices.
  3. Look at all of the formatting choices. 
    You can set alignment, minimum width, background, and color for the border. You can "merge" cells by setting how many rows or columns to span.


    Dialog: Cell Properties

    Dialog: Cell Properties - data table

  4. Change the Vertical Alignment to Top.
    This sends the names of the continents up to the top of their cells.
  5. Cell properties set.Set the width to 100 in Pixels. (Be careful not to set 100 percent!) 

    TipSetting the width in pixels is a good idea only for narrow tables. Bigger tables should have widths set as a percentage of the available space.


Format: Text

Now you can format the text itself.

Design tips:

  • Column headings should look different from the table body text.
  • Table text should usually be different from the regular page text.
  • Sans-serif fonts are best if the text is small.

TipUnlike Word and Excel, FrontPage and FrontPage Express do not have a Sort function to alphabetize your table entries. You could sort them yourself, of course, or copy and paste each cell's contents to Word, sort, and then copy and paste back into the cell. However, Word may add some formatting tags for you.


  1. Select the top two cells, the column headings.
  2. Column headings formattedIncrease the font size once.
  3. Make Bold.
  4. Change the font to Trebuchet MS.

Cell Contents

  1. Data text formattedSelect all the data cells (not including the column headings).
  2. Apply the font Arial.
  3. Decrease the font size once.
  4. Class disk Save as hector20.htm in the same folder of your Class disk.