Be able to format a table including to set horizontal cell alignment (left, right, centre, fully justified), set vertical cell alignment (top, middle, bottom), show gridlines, hide gridlines, wrap text within a cell, shading/colouring cells, adjust r

Published by Patrick Mutisya · 8 days ago

ICT 0417 – Layout – Teaching Notes

13 Layout

Learning Objective

By the end of this lesson you will be able to:

  • Set horizontal cell alignment (left, centre, right, fully justified)
  • Set vertical cell alignment (top, middle, bottom)
  • Show and hide gridlines
  • Wrap text within a cell
  • Apply shading/colour to cells
  • Adjust row height
  • Adjust column width

Key Concepts

In most word‑processing and spreadsheet programmes a table is a grid of rows and columns. Each intersection is a cell. The appearance of a table can be changed by modifying cell properties and table properties.

Horizontal Cell Alignment

Horizontal alignment determines where the content sits within the width of a cell.

  1. Left – default for most languages.
  2. Centre – content is centred horizontally.
  3. Right – content is pushed to the right edge.
  4. Fully justified – text stretches to fill the cell width (usually only for paragraph text).

Vertical Cell Alignment

Vertical alignment controls the position of the content within the height of a cell.

  1. Top – content starts at the top edge.
  2. Middle – content is centred vertically.
  3. Bottom – content sits on the bottom edge.

Gridlines, Wrapping, Shading and Sizing

  • Show gridlines: set the table border to a visible value (e.g., border="1").
  • Hide gridlines: set border="0" or turn off “Show gridlines” in the programme.
  • Wrap text: define a column width; text that exceeds the width automatically wraps to a new line.
  • Shading/colour: apply a background colour to a cell using the bgcolor attribute.
  • Row height: set the height attribute on a <tr> or on a <td>.
  • Column width: set the width attribute on a <col> element or directly on a <td>.

Example Table – All Features Demonstrated

The table below uses only HTML attributes that are still recognised by browsers. It illustrates each of the required formatting options.

FeatureSettingResult (shown in the cell)
Horizontal – Leftalign="left"This text is left‑aligned.
Horizontal – Centrealign="center"This text is centred.
Horizontal – Rightalign="right"This text is right‑aligned.
Horizontal – Fully justifiedalign="justify"This paragraph demonstrates fully justified alignment. The text stretches to fill the entire width of the cell, creating a clean left‑ and right‑hand edge.
Vertical – Topvalign="top"Top‑aligned content.
Vertical – Middlevalign="middle"Middle‑aligned content.
Vertical – Bottomvalign="bottom"Bottom‑aligned content.
Wrap textwidth set on column (120 px)This long sentence will automatically wrap onto a new line because the column width is limited.
Shading / colourbgcolor="#f2dede"Cell with a light red background colour.
Hide gridlinesborder="0" on a separate tableSee the next table for an example without visible borders.

Table Without \cdot isible Gridlines

This table uses border="0" so the borders are not shown.

First cell – no borderSecond cell – no border
Third cell – no borderFourth cell – no border

Practical Steps in ICT Software (e.g., Microsoft Word / LibreOffice Writer)

  1. Insert a table of the required size.
  2. Select the cell(s) you wish to format.
  3. Use the “Table Properties” dialog:

    • Alignment – choose Left, Centre, Right or Justify.
    • Vertical alignment – choose Top, Middle or Bottom.
    • Cell margins – adjust to control wrapping.
    • Row height – set an exact value or allow automatic.
    • Column width – set an exact value or allow automatic.
    • Background – choose a colour for shading.

  4. To show or hide gridlines:

    • Show gridlines – enable “View → Table Gridlines”.
    • Hide gridlines – disable the same option or set the table border to “None”.

  5. To wrap text, ensure the column width is narrower than the text length; the programme will wrap automatically.

Suggested diagram: A screenshot of the “Table Properties” dialog showing tabs for Alignment, Cell, Row, Column, and Border.

Summary Checklist

  • Horizontal alignment set using the Align button or table‑cell properties.
  • Vertical alignment set using the \cdot ertical Align option.
  • Gridlines shown/hidden via the \cdot iew menu or border settings.
  • Wrap text by adjusting column width.
  • Shading applied via cell background colour.
  • Row height and column width adjusted in Table Properties.