Sketching Your Table - HTML 4

Tables can become complex. You need to carefully plan them. Mapping to the nearest pixel can grow tedious and can take several attempts, but it’s an essential step in designing a well laid out page.

Developing layout ideas
Start with a general idea and slowly plan your layout until it becomes more solid and specific. Follow these basic steps:

  1. Grab (believe it or not) a sheet of paper and a pencil so that you can sketch out your ideas.
  2. Start with a general idea of where you want everything to go on your page.
  3. Evaluate what to include in your Web page and decide on the overall layout.
  4. This way, you can begin to determine

    • How many columns and rows you need
    • The width of the table and cells
    • Whether to make any cells span rows or columns

    You need to make the following design choices:

    • Whether the table will be centered, left aligned, or right aligned.
    • Whether you want to include hyperlinks and where you might want to include them.

    For example, many Web sites, such as the one in Figure, include a logo image that provides a hyperlink to the site’s home page, so no matter what page you’re on, you can always get back to the front door.

  5. Figure out the pixel dimensions of images you want to use. Make sure that the table fills a browser window nicely without forcing the user to scroll left and right to see everything.
  6. Decide between using text or images for navigation, as follows:

    • If you want more font control over your navigation, consider using images for your navigational items.
    • The font is embedded in the image; therefore, the user’s browser settings can’t override the font you choose.
    • If you don’t need additional font controls, use textual navigation.
    • Decide where the main logo should go and what size it should be.

    In Figure, the logo is the main focal point. Its dimensions are 276 pixels wide by 110 pixels tall.

    Concentrate on managing the width of the table. Let the contents of your table determine the cell height. Height is less important because users are familiar with scrolling up and down Web pages. However, they may get frustrated by scrolling left and right to read content.

Drafting the table
When you know how big and how numerous your design elements are, you can sketch a rough table on paper. If you opt for a simple approach, each main element (logo, hyperlink image, and navigation) has its own cell. In Figure, that means only three cells.

If you have only a few cells, you’ll probably have to span the cells so the contents fill the width of your page.

  1. A complex design may need several rows.
  2. A simple, clean design may require only two rows.
  3. Figure shows the final sketch for your table:

    • The first row spans both columns.
    • The second row contains two separate columns.

Figure : Start by sketching the table dimensions, even before opening a text editor.

Start by sketching the table dimensions, even before opening a text editor.

The author of our sample Web site uses images in place of text for the navigational elements; however, for usability reasons, try using text in place of images when possible. Even so, if you want complete control of the font(s) in which your text appears, you may have to use images — and create an image of the text written in your chosen font.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

HTML 4 Topics