Editing HTML Tables Using Table Properties

This guide explains how to edit an HTML table using the Table Properties window (like the one shown in your screenshot), along with the most common day-to-day table edits such as adding rows or columns, adjusting spacing, captions, and accessibility settings.

❓ What Is an HTML Table?

An HTML table is a structured layout used to display information in rows and columns. Tables are designed to present related data clearly and logically, making it easier for users to scan, compare, and understand information.

HTML tables focus on data structure, not visual layout.

✅ What HTML Tables Are Good For

HTML tables are best used when content needs to be organised or compared, such as:

• Pricing tables

  Composer 2 note:
  For pricing or feature comparisons, ASP also provides a purpose-built Pricing / Comparison Widget for Composer 2 sites. This widget is specifically designed for comparison-style content and offers improved styling and flexibility compared to standard HTML tables.

  Full details can be found here:
  https://support.asp.events/hc/en-us/articles/31719461361693-New-Premium-Widget-Comparison-Widget

• Event schedules or timetables

• Feature comparisons

• Lists of dates, times, or locations

• Any data that naturally fits into rows and columns

HTML tables should be used for data presentation, not for general page layout or page design.

✅ Before You Start

In most editors, tables are edited in a similar way:

1. Click inside the table so the editor knows which table you’re working on.

2. Open Table Properties (usually via:

   • Right-clicking inside the table, or

   • Selecting a table icon in the editor toolbar).

3. Make your changes and select OK to apply them.

⚙️ Using the Table Properties Window

The Table Properties window allows you to control the structure, layout, and accessibility of a table.

Below is an explanation of each option and when you’d typically use it.

📐 Rows

Controls how many horizontal rows the table has.

• Increasing the number adds new rows

• Decreasing the number removes rows (and their content)

Use when:
You need to quickly expand or reduce the table size.

📊 Columns

Controls how many vertical columns the table has.

• Increasing adds new columns

• Decreasing removes columns (and their content)

Use when:
You need an extra column for prices, dates, links, or labels.

🏷️ Headers

Controls whether the table includes header cells (HTML <th>).

Your screenshot shows Headers: None.

Common options (varies by editor):

• None – all cells are standard data cells

• First row – top row becomes headers

• First column – left column becomes headers

• Both – top row and left column become headers

Use when:
You need column titles such as Package, Price, or Includes.
Also important for accessibility and screen readers.

🔲 Border Size

Controls the thickness of the table’s borders.

• 0 = no visible border

• Higher values increase border thickness

Tip:
For cleaner designs, set the border size to 0 and rely on spacing and padding instead.

📍 Align

Controls how the table sits on the page.

Common options:

• Left – aligns to the left

• Center – centres the table

• Right – aligns to the right

• Not set – uses the site’s default styling

↔️ Width

Controls how wide the table is.

Your screenshot shows 100%, meaning the table fills the available space.

Common formats:

• Percentages (e.g. 100%, 50%) – responsive and mobile-friendly

• Pixels (e.g. 600) – fixed width (not ideal for mobile)

Best practice:
Use percentages for responsive layouts.

↕️ Height

Sets a fixed height for the table.

Best practice:
Leave this blank unless you have a specific requirement, as fixed heights can cause overflow or awkward spacing.

📏 Cell Spacing

Adds space between cells.

This is similar to the old HTML cellspacing behaviour.

Use when:
The table feels cramped and you want visible gaps between cells.

🧱 Cell Padding

Adds space inside each cell, between the border and the content.

This is similar to the old HTML cellpadding behaviour.

Use when:
You want text to breathe and look more readable and professional.

🏷️ Caption

Adds a visible table caption (HTML <caption>), usually displayed above the table.

Use when:
The table needs a clear label, for example:

• Pricing Overview

• Key Dates

Captions are also helpful for accessibility.

♿ Summary

Provides a description of what the table contains.

This is mainly used by screen readers for accessibility.
(Some editors still include this even though modern HTML often relies more on captions and headers.)

Use when:
You want to describe the table purpose, for example:

“Table showing ticket types and what each includes.”

✅ OK vs ❌ Cancel

• OK – applies and saves your changes

• Cancel – closes the window without saving

✏️ Editing Table Content (Text & Links)

To edit what’s inside the table:

1. Click inside a table cell.

2. Type as normal to update the text.

3. Use the editor toolbar to add:

   • Bold or italics

   • Links

   • Bullet points (if supported in cells)

Tip:
Keep content consistent across columns (for example, format all prices the same way).

Screenshot Reference: