Table Margins: Visual Guide to Proper Spacing

This guide illustrates the correct margin specifications between tables and various content elements. Each example precisely demonstrates the pixel measurements needed to maintain proper visual hierarchy and readability.

Paragraph to Table: 32px

This paragraph precedes a table. When transitioning from paragraph text to a table, we use a 32px margin. This larger spacing acknowledges the significant visual shift that occurs when moving from text to tabular content. The 32px margin provides enough space for the reader's eye to transition between reading text and processing structured data.

Table header	Table header
Table row	Table row

Table to Paragraph: 32px

Table header	Table header
Table row	Table row

This paragraph appears 32px below the table above. When returning to paragraph text after a table, we maintain the same 32px spacing to create symmetry in the document's vertical rhythm. Tables create significant visual breaks in content, so the larger margin helps re-establish the reading rhythm when returning to text.

Heading to Table: 24px

Heading Above a Table

Table header	Table header
Table row	Table row

The 24px spacing between a heading and a table follows the same pattern as heading-to-content spacing throughout the document. This creates consistency while acknowledging that the table is content that belongs to the heading above it.

Table to Heading: 40px

Table header	Table header
Table row	Table row

New Section Heading (40px above)

The 40px spacing before a heading creates a clear section break, regardless of what content type precedes it. This consistent approach to section transitions improves content structure and readability, particularly when a table concludes one section before moving to a new topic.

List to Table: 32px

This list precedes a table
When transitioning from a list to tabular content
We use a 32px margin
This acknowledges the stronger visual break that tables create

Table header	Table header
Table row	Table row

Table to List: 32px

Table header	Table header
Table row	Table row

This list appears 32px below the table
The increased spacing helps transition from tabular to list content
While maintaining the overall document flow
Each content type receives appropriate spacing based on its visual weight

Code Block to Table: 32px

javascript// Placeholder code
const margins = {
  standard: 24,    // text elements
  visual: 32,      // images, tables
  section: 40      // headings, dividers
};

console.log(`Table margins: ${margins.visual}px`);

Table header	Table header
Table row	Table row

Table to Code Block: 32px

Table header	Table header
Table row	Table row

javascript// Placeholder code
const margins = {
  standard: 24,    // text elements
  visual: 32,      // images, tables
  section: 40      // headings, dividers
};

console.log(`Table margins: ${margins.visual}px`);

Image to Table: 32px

Table header	Table header
Table row	Table row

Table to Image: 32px

Table header	Table header
Table row	Table row

Table to Table: 40px

Multiple tables in sequence need clear separation to be perceived as distinct elements:

Table header	Table header
Table row	Table row

Table header	Table header
Table row	Table row

The 40px spacing between tables creates sufficient separation to indicate these are distinct data sets, preventing them from visually merging into a single unit.

Embed to Table: 32px

Paragraph on Warpcast

Warm up with a delicious spicy Italian chicken sausage and barley soup! This hearty recipe from @galazio combines sausage, fresh veggies, and a smooth, creamy texture thanks to a perfectly tempered egg. Perfect for cozy nights in your kitchen! Check out the full blog post for details. https://paragraph.com/@galazio/spicy-italian-chicken-sausage-and-barley-soup

Farcaster

Table header	Table header
Table row	Table row

Table to Embed: 32px

Table header	Table header
Table row	Table row

Paragraph on Warpcast

Farcaster

Divider to Table: 40px

Table header	Table header
Table row	Table row

Note the 40px spacing between the divider and the table. Dividers signal significant breaks in content, so the larger margin helps establish a clear separation between sections.

Table to Divider: 40px

Table header	Table header
Table row	Table row

The 40px spacing from a table to a divider creates a clear section break. This larger margin is used consistently for transitions between major content sections.

Paragraph to Table: 32px

Table header	Table header
Table row	Table row

Table to Paragraph: 32px

Table header	Table header
Table row	Table row

Heading to Table: 24px

Heading Above a Table

Table header	Table header
Table row	Table row

Table to Heading: 40px

Table header	Table header
Table row	Table row

New Section Heading (40px above)

List to Table: 32px

This list precedes a table
When transitioning from a list to tabular content
We use a 32px margin
This acknowledges the stronger visual break that tables create

Table header	Table header
Table row	Table row

Table to List: 32px

Table header	Table header
Table row	Table row

This list appears 32px below the table
The increased spacing helps transition from tabular to list content
While maintaining the overall document flow
Each content type receives appropriate spacing based on its visual weight

Code Block to Table: 32px

javascript// Placeholder code
const margins = {
  standard: 24,    // text elements
  visual: 32,      // images, tables
  section: 40      // headings, dividers
};

console.log(`Table margins: ${margins.visual}px`);

Table header	Table header
Table row	Table row

Table to Code Block: 32px

Table header	Table header
Table row	Table row

javascript// Placeholder code
const margins = {
  standard: 24,    // text elements
  visual: 32,      // images, tables
  section: 40      // headings, dividers
};

console.log(`Table margins: ${margins.visual}px`);

Image to Table: 32px

Table header	Table header
Table row	Table row

Table to Image: 32px

Table header	Table header
Table row	Table row

Table to Table: 40px

Multiple tables in sequence need clear separation to be perceived as distinct elements:

Table header	Table header
Table row	Table row

Table header	Table header
Table row	Table row

The 40px spacing between tables creates sufficient separation to indicate these are distinct data sets, preventing them from visually merging into a single unit.

Embed to Table: 32px

Paragraph on Warpcast

Farcaster

Table header	Table header
Table row	Table row

Table to Embed: 32px

Table header	Table header
Table row	Table row

Paragraph on Warpcast

Farcaster

Divider to Table: 40px

Table header	Table header
Table row	Table row

Note the 40px spacing between the divider and the table. Dividers signal significant breaks in content, so the larger margin helps establish a clear separation between sections.

Table to Divider: 40px

Table header	Table header
Table row	Table row

The 40px spacing from a table to a divider creates a clear section break. This larger margin is used consistently for transitions between major content sections.

Paragraph to Table: 32px

Table to Paragraph: 32px

Heading to Table: 24px

Heading Above a Table

Table to Heading: 40px

New Section Heading (40px above)

List to Table: 32px

Table to List: 32px

Code Block to Table: 32px

Table to Code Block: 32px

Image to Table: 32px

Table to Image: 32px

Table to Table: 40px

Embed to Table: 32px

Paragraph on Warpcast

Table to Embed: 32px

Paragraph on Warpcast

Divider to Table: 40px

Table to Divider: 40px

No comments yet

Paragraph to Table: 32px

Table to Paragraph: 32px

Heading to Table: 24px

Heading Above a Table

Table to Heading: 40px

New Section Heading (40px above)

List to Table: 32px

Table to List: 32px

Code Block to Table: 32px

Table to Code Block: 32px

Image to Table: 32px

Table to Image: 32px

Table to Table: 40px

Embed to Table: 32px

Paragraph on Warpcast

Table to Embed: 32px

Paragraph on Warpcast

Divider to Table: 40px

Table to Divider: 40px

Table Margins: Visual Guide to Proper Spacing

A comprehensive demonstration of table spacing for optimal readability

Meesh @ Paragraph

No comments yet