Codestin Search App

Description

The caption-side property controls where a table's caption is placed in relation to the table box. It does not create or remove a caption - it only affects the visual placement of the existing caption element that is associated with the table. User agents typically render the caption in a separate caption box which is positioned adjacent to the table's outer box; adjusting caption-side moves that caption box to a different edge of the table rather than altering the table's internal cell order or the DOM order of elements.

Although the property is primarily visual, its positioning has real effects on layout and available space. When the caption is moved to a different edge, the table's used dimensions and the distribution of surrounding whitespace can change because caption boxes are considered when calculating the table's outer box. This can influence how the table interacts with surrounding flow content and with table sizing algorithms. It also affects how caption alignment and spacing are applied relative to the table; for aligning the caption text itself you will typically rely on other text-alignment and box-model rules such as text-align and margin properties.

The way the caption is interpreted by the visual formatting system depends on writing direction and orientation. For example, logical edges such as "start" and "end" are resolved according to the document’s inline progression and writing-mode, and bidi directionality can shift how those edges map to physical sides via direction. Because of that, positioning that appears on one physical side in a left-to-right horizontal layout might map to a different physical edge in vertical or right-to-left layouts - so designers should test caption placement across different writing modes if internationalization is a concern.

Finally, consider interactions with table-specific layout behaviors and other table properties. For example, caption placement can affect perceived borders, gaps, and how the table interacts with collapsing borders, so be mindful of settings controlled by border-collapse and related box-model properties. Remember also that repositioning a caption is a presentation change only - it does not change the semantic relationship between the caption and the table in the accessibility tree or the document structure, and screen readers will typically follow the document order rather than the visual placement.

Definition

Initial value: top
Applies to: Tables with a caption
Inherited: Yes
Computed value: As specified
Animatable: No
JavaScript syntax: object.style.captionSide

Interactive Demo

caption-side: top;

caption-side: bottom;

Grocery Prices
Bananas	5 Dollars
Apples	10 Dollars
Oranges	2 Dollars
Grapes	3 Dollars

Syntax

caption-side: top | bottom | inherit

Values

topPositions the caption box above the table box.
bottomPositions the caption box below the table box.

Example

HTML

<div class='wrap'>

  <table class='demo caption-top'>

    <caption>Caption on top (default)</caption>

    <thead>

      <tr>

        <th>Item</th>

        <th>Value</th>

      </tr>

    </thead>

    <tbody>

      <tr>

        <td>Alpha</td>

        <td>10</td>

      </tr>

      <tr>

        <td>Beta</td>

        <td>20</td>

      </tr>

    </tbody>

  </table>



  <table class='demo caption-bottom'>

    <caption>Caption on bottom</caption>

    <thead>

      <tr>

        <th>Item</th>

        <th>Value</th>

      </tr>

    </thead>

    <tbody>

      <tr>

        <td>Gamma</td>

        <td>30</td>

      </tr>

      <tr>

        <td>Delta</td>

        <td>40</td>

      </tr>

    </tbody>

  </table>



  <table class='demo caption-right'>

    <caption>Caption on right</caption>

    <thead>

      <tr>

        <th>Item</th>

        <th>Value</th>

      </tr>

    </thead>

    <tbody>

      <tr>

        <td>Epsilon</td>

        <td>50</td>

      </tr>

      <tr>

        <td>Zeta</td>

        <td>60</td>

      </tr>

    </tbody>

  </table>



  <table class='demo caption-left'>

    <caption>Caption on left</caption>

    <thead>

      <tr>

        <th>Item</th>

        <th>Value</th>

      </tr>

    </thead>

    <tbody>

      <tr>

        <td>Eta</td>

        <td>70</td>

      </tr>

      <tr>

        <td>Theta</td>

        <td>80</td>

      </tr>

    </tbody>

  </table>

</div>

CSS

/* Basic reset and typography */
* {
  box-sizing: border-box;
}
body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  padding: 1rem;
  background: #ffffff;
  color: #222222;
}

/* Layout for examples */
.wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
}

/* Table base styles */
.demo {
  border-collapse: collapse;
  width: 220px;
  border: 1px solid #d0d7de;
  background: #ffffff;
}

.demo th,
.demo td {
  padding: 0.5rem 0.75rem;
  border: 1px solid #e6e9ee;
  text-align: left;
  font-size: 0.95rem;
}

/* Caption styling */
.demo caption {
  font-weight: 600;
  padding: 0.5rem 0.75rem;
  background: #eef2ff;
  color: #0b3a8c;
  text-align: left;
}

/* Demonstrate caption-side values */
.caption-top caption {
  caption-side: top; /* default */
}

.caption-bottom caption {
  caption-side: bottom;
}

.caption-right caption {
  caption-side: right;
}

.caption-left caption {
  caption-side: left;
}

/* Tweak visuals for side captions */
.caption-right caption,
.caption-left caption {
  white-space: nowrap;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  background: #f0fff4;
  color: #0a6b3d;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS caption-side property. Hover over a browser icon to see the version that first introduced support for this CSS property.