Be able to wrap text around a table, chart or image including above, below, square and tight

13 Layout: Text Wrapping Around Tables, Charts, and Images

What is Text Wrapping?

Imagine you’re in a classroom and a big poster (the table or image) is hanging on the wall. The students (the text) can walk around it, go over it, or stand in front of it. In web design, text wrapping is how the words move around that poster.

Wrapping Types

• Above – the text sits on top of the element.
• Below – the text starts below the element.
• Square – the text wraps around the sides with a little space.
• Tight – the text hugs the element with no extra space.
• Circle (shape‑outside) – the text follows a round shape.

How to Wrap Text Around a Table

Use the CSS float property to pull the table to the left or right, then let the paragraph flow around it.

1. Insert the <table> tag.
2. Add style="float:left; margin:0 10px 10px 0;" to give a square wrap.
3. Write the paragraph after the table.

Example: Text Above a Table

When the table comes after the paragraph, the text appears above it.

Example: Text Below a Table

Place the table before the paragraph to have the text below.

Here’s a quick fact: The area of a circle is $A = \pi r^2$.

Example: Square Wrap (Float Left with Margin)

Use a small margin to give the text a little breathing room.

Notice how the words flow around the table, keeping a tidy border.

Example: Tight Wrap (No Margin)

Remove the margin to let the text hug the table.

Now the text is right next to the table, like a tight crowd at a concert.

Example: Circular Wrap (shape‑outside)

Use an image and let the text follow a circle.

Here the words dance around the round shape, just like a carousel 🎠.

Exam Tips