Cover photo

Table Margins: Visual Guide to Proper Spacing

A comprehensive demonstration of table spacing for optimal readability

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

post image
Example image

Table header

Table header

Table row

Table row

Table to Image: 32px

Table header

Table header

Table row

Table row

post image
Image with a caption

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
link embed image

Table header

Table header

Table row

Table row

Table to Embed: 32px

Table header

Table header

Table row

Table row

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
link embed image

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.