Table Layout, Cell Spacing and Captions

What Is It?

Table-specific properties control the sizing algorithm, border model, cell spacing, caption placement, and vertical cell alignment.

Properties, Tags and Attributes Explained

• table-layout: auto uses content-sensitive sizing; fixed uses the table width and early column information.
• border-collapse: separate keeps distinct cell borders; collapse merges adjacent borders.
• border-spacing: Sets horizontal and vertical gaps in the separate border model.
• caption-side: Places the caption above or below the table.
• empty-cells: show or hide controls empty-cell backgrounds and borders in the separate model.
• vertical-align: Aligns content inside table cells; also affects inline-level alignment, but does not center arbitrary block content.

Each example is a complete HTML page. The CSS is inside the head's style element. Use Try in new tab to edit the CSS or HTML, run your changes, and reset the example.

Example 1: Separate borders

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Table Layout, Cell Spacing and Captions</title>
  <style>
    table { border-collapse: separate; border-spacing: 8px 4px; caption-side: bottom; }
    th, td { border: 1px solid #94a3b8; padding: 12px; vertical-align: top; }
  </style>
</head>
<body>
  <table><caption>Course choices</caption><tr><th scope="col">Topic</th><th scope="col">Notes</th></tr><tr><td>CSS</td><td>Short lessons<br>Working previews</td></tr></table>
</body>
</html>

What you see: Cells have separate borders with visible gaps, top-aligned text, and a bottom caption.

Example 2: Fixed layout

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Table Layout, Cell Spacing and Captions</title>
  <style>
    table { width: 100%; table-layout: fixed; border-collapse: collapse; }
    th, td { border: 1px solid #94a3b8; padding: 8px; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <table><caption>Learning progress</caption><tr><th scope="col">Topic</th><th scope="col">Status</th></tr><tr><td>averylongtopicidentifierwithoutspaces</td><td>Ready</td></tr></table>
</body>
</html>

What you see: Columns share the definite table width, and a long token wraps within its cell.

Example 3: Hide the border of an empty cell

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Table Layout, Cell Spacing and Captions</title>
  <style>
    table { border-collapse: separate; border-spacing: 6px; empty-cells: hide; }
    th, td { border: 2px solid #64748b; padding: 12px; }
  </style>
</head>
<body>
  <table><caption>Optional notes</caption><tr><th scope="col">Topic</th><th scope="col">Note</th></tr><tr><td>CSS</td><td></td></tr><tr><td>HTML</td><td>Reviewed</td></tr></table>
</body>
</html>

What you see: The truly empty cell has no visible border in the separate border model. Use this only when an empty cell still communicates the data clearly.

When and Where to Use It

Use fixed table layout for predictable widths in data tables and separate borders when visible cell gutters are part of the design.

Common Mistake or Useful Tip

border-spacing has no effect when border-collapse is collapse. Use real table headers and captions so visual styling supports the data relationships.

Try It Yourself

Change border-collapse in example 1 to collapse and observe what happens to the gaps.