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 · 14 days ago

ICT 0417 – Layout: Formatting Tables

Layout – Formatting Tables

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

1. Horizontal Cell Alignment

The align attribute on a <td> or <th> element controls horizontal alignment.

LeftCentreRightJustify
This text is aligned to the left.This text is centred.This text is aligned to the right.This text is fully justified, meaning it stretches to fill the cell width.

2. Vertical Cell Alignment

The valign attribute controls vertical alignment within a cell.

TopMiddleBottom
Top‑aligned text.Middle‑aligned text.Bottom‑aligned text.

3. Showing and Hiding Gridlines

Use the border attribute on the <table> element.

Table with gridlines (border = 1):

Cell 1Cell 2
Cell 3Cell 4

Table without gridlines (border = 0):

Cell 1Cell 2
Cell 3Cell 4

4. Wrapping Text Within a Cell

Set a column width that forces the text to wrap. The width attribute on <td> (or <col>) can be used.

This is a long piece of text that will automatically wrap onto multiple lines because the column width is limited.

Short text.

5. Shading / Colouring Cells

Use the bgcolor attribute to apply a background colour.

Light red shadingLight green shadingLight blue shading

6. Adjusting Row Height

The height attribute on a <tr> sets the minimum row height.

Row height set to 60 px.Another cell in the same row.
Default height row.Default height row.

7. Adjusting Column Width

Use <colgroup> with <col> elements to define column widths.

Column 1 (150 px)Column 2 (250 px)
Fixed width column.This column is wider, allowing more text before wrapping occurs.

Summary Checklist

  1. Use align for left, centre, right, justify.

  2. Use valign for top, middle, bottom.

  3. Set border="1" to show gridlines; border="0" to hide them.

  4. Define width on cells or columns to force text wrapping.

  5. Apply bgcolor for cell shading.

  6. Set height on <tr> to change row height.

  7. Use <colgroup> and <col> with width to control column width.

Suggested diagram: A labelled table showing each of the formatting options side‑by‑side.