Browser Support

Menu

Tailwind CSS Caption Side

The caption-side property in CSS specifies the placement of a table caption with respect to the table. This feature allows you to position the caption at the top or bottom of the table.

Tailwind CSS further simplifies this task by providing pre-defined classes for controlling the caption side positioning, ensuring consistency and ease of use. In this guide, we will learn how to use these classes to simplify our workflow.

Class	Properties	Example
`caption-top`	`caption-side: top;`	`<div className="caption-top"></div>`
`caption-bottom`	`caption-side: bottom;`	`<div className="caption-bottom"></div>`

Overview of Caption Side

Top Position

To place a caption above the table, Tailwind CSS provides the class caption-top. This class sets the caption's position to the top, ensuring it aligns above the table consistently across screen sizes.

This is a live editor. Play around with it!

import React from "react";

export default function TableWithCaptionTop() {
  return (
    <div className="h-screen w-screen bg-gray-200 flex justify-center items-center">
      <table className="table-auto border-separate border-gray-300">
        <caption className="caption-top text-xs mb-4">
          Scenic Landscape
        </caption>
        <thead className="bg-gray-100">
          <tr>
            <th className="border px-4 py-2">Location</th>
            <th className="border px-4 py-2">Type</th>
            <th className="border px-4 py-2">Rating</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td className="border px-4 py-2">Mountains</td>
            <td className="border px-4 py-2">Hills</td>
            <td className="border px-4 py-2">★★★★★</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}

Bottom Position

For captions positioned below the table, use the caption-bottom class in Tailwind. This class standardizes caption placement under the table structure with minimal setup.

This is a live editor. Play around with it!

import React from "react";

export default function TableWithCaptionBottom() {
  return (
    <div className="h-screen w-screen bg-gray-200 flex justify-center items-center">
      <table className="table-auto border-separate border-gray-300">
        <caption className="caption-bottom text-xs mt-4">
          Scenic Landscape
        </caption>
        <thead className="bg-gray-100">
          <tr>
            <th className="border px-4 py-2">Location</th>
            <th className="border px-4 py-2">Type</th>
            <th className="border px-4 py-2">Rating</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td className="border px-4 py-2">Mountains</td>
            <td className="border px-4 py-2">Hills</td>
            <td className="border px-4 py-2">★★★★★</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}

States and Responsiveness

Hover and Focus States

Tailwind utilities can be conditionally applied based on pseudo-classes like hover: or focus:. This enables dynamic styling for table captions based on user interactions.

This is a live editor. Play around with it!

import React from "react";

export default function InteractiveCaption() {
  return (
    <div className="h-screen w-screen bg-gray-200 flex justify-center items-center">
      <table className="table-auto border-separate border-gray-300">
        <caption tabindex="0" className="caption-bottom focus:caption-top text-xs my-4">
          Click on the caption to change its position
        </caption>
        <thead className="bg-gray-100">
          <tr>
            <th className="border px-4 py-2">Location</th>
            <th className="border px-4 py-2">Type</th>
            <th className="border px-4 py-2">Rating</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td className="border px-4 py-2">Mountains</td>
            <td className="border px-4 py-2">Hills</td>
            <td className="border px-4 py-2">★★★★★</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}

Breakpoint Modifiers

To enhance responsiveness, Tailwind allows you to specify breakpoints for altering the caption's position. By combining responsive prefixes with caption-top or caption-bottom, you can control placement across different screen sizes.

This is a live editor. Play around with it!

import React from "react";

export default function ResponsiveCaptionTable() {
  return (
    <div className="h-screen w-screen bg-gray-200 flex justify-center items-center">
      <table className="table-auto border border-gray-300">
        <caption className="sm:caption-top md:caption-bottom lg:caption-top text-xs py-6">
          Adaptable Caption
        </caption>
        <thead className="bg-gray-100">
          <tr>
            <th className="border px-4 py-2">Screen Size</th>
            <th className="border px-4 py-2">Caption Position</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td className="border px-4 py-2">Small (sm)</td>
            <td className="border px-4 py-2">Top</td>
          </tr>
          <tr>
            <td className="border px-4 py-2">Medium (md)</td>
            <td className="border px-4 py-2">Bottom</td>
          </tr>
          <tr>
            <td className="border px-4 py-2">Large (lg)</td>
            <td className="border px-4 py-2">Top</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}

Real World Examples

Product Specifications Table

A table displaying detailed product specifications with a caption positioned at the top, commonly used in e-commerce technical documentation.

This is a live editor. Play around with it!

export default function ProductSpecsTable() {
  const specifications = [
    { category: "Display", value: "6.7-inch OLED" },
    { category: "Processor", value: "A15 Bionic chip" },
    { category: "RAM", value: "6GB LPDDR4X" },
    { category: "Storage", value: "128GB/256GB/512GB" },
    { category: "Battery", value: "4352mAh" },
    { category: "Camera", value: "12MP Triple lens" },
    { category: "OS", value: "iOS 16" }
  ];

  return (
    <table className="w-full border-collapse border border-gray-300">
      <caption className="caption-top text-lg font-semibold p-4 bg-gray-50">
        Technical Specifications - Latest Model
      </caption>
      <tbody>
        {specifications.map((spec, index) => (
          <tr key={index} className="border-b border-gray-300">
            <td className="p-3 bg-gray-100 font-medium">{spec.category}</td>
            <td className="p-3">{spec.value}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

Product Comparison Table with Side Statistics

A table showcasing various laptop models with statistical data, helping users compare key specifications at a glance.

This is a live editor. Play around with it!

export default function LaptopComparisonTable() {
  const laptops = [
    {
      name: "UltraBook Pro",
      price: "$1299",
      processor: "Intel i7-12700H",
      ram: "16GB",
      storage: "512GB SSD",
      image: "https://images.unsplash.com/photo-1588872657578-7efd1f1555ed",
      rating: "4.8/5"
    },
    {
      name: "Creator Book Max",
      price: "$1599",
      processor: "AMD Ryzen 9 5900HX",
      ram: "32GB",
      storage: "1TB SSD",
      image: "https://images.unsplash.com/photo-1593642632823-8f785ba67e45",
      rating: "4.9/5"
    },
    {
      name: "Gaming Elite X",
      price: "$1899",
      processor: "Intel i9-12900H",
      ram: "64GB",
      storage: "2TB SSD",
      image: "https://images.unsplash.com/photo-1603302576837-37561b2e2302",
      rating: "4.7/5"
    },
    {
      name: "StudentBook Air",
      price: "$899",
      processor: "Intel i5-1135G7",
      ram: "8GB",
      storage: "256GB SSD",
      image: "https://images.unsplash.com/photo-1541807084-5c52b6b3adef",
      rating: "4.5/5"
    },
    {
      name: "Business Pro",
      price: "$1399",
      processor: "Intel i7-1165G7",
      ram: "16GB",
      storage: "512GB SSD",
      image: "https://images.unsplash.com/photo-1588872657578-7efd1f1555ed",
      rating: "4.6/5"
    },
    {
      name: "WorkStation Ultra",
      price: "$2199",
      processor: "AMD Threadripper",
      ram: "128GB",
      storage: "4TB SSD",
      image: "https://images.unsplash.com/photo-1593642632823-8f785ba67e45",
      rating: "4.9/5"
    }
  ];

  return (
    <table className="min-w-full border-collapse">
      <caption className="caption-bottom text-left p-4 bg-gray-50 text-sm text-gray-600">
        *All laptops come with Windows 11 Pro pre-installed
        <br />
        **Prices may vary by region and configuration
      </caption>
      <thead className="bg-gray-100">
        <tr>
          <th className="p-4">Model</th>
          <th className="p-4">Specs</th>
          <th className="p-4">Price</th>
          <th className="p-4">Rating</th>
        </tr>
      </thead>
      <tbody>
        {laptops.map((laptop, index) => (
          <tr key={index} className="border-b hover:bg-gray-50">
            <td className="p-4 flex items-center gap-4 w-40">
              <img 
                src={laptop.image} 
                alt={laptop.name}
                className="w-12 h-16 object-cover rounded"
              />
              {laptop.name}
            </td>
            <td className="p-4">
              <div>{laptop.processor}</div>
              <div>{laptop.ram} RAM</div>
              <div>{laptop.storage}</div>
            </td>
            <td className="p-4 font-semibold">{laptop.price}</td>
            <td className="p-4">{laptop.rating}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

Recipe Ingredients Table with Top Notes

A recipe table featuring ingredients with important cooking notes positioned in the top caption.

This is a live editor. Play around with it!

export default function RecipeIngredientsTable() {
  const ingredients = [
    {
      name: "Organic Quinoa",
      amount: "2 cups",
      calories: 222,
      preparation: "Rinsed and drained",
      substitutes: "Brown rice, Couscous",
      image: "https://images.unsplash.com/photo-1586201375761-83865001e31c"
    },
    {
      name: "Fresh Avocado",
      amount: "2 medium",
      calories: 322,
      preparation: "Diced",
      substitutes: "Guacamole, Hummus",
      image: "https://images.unsplash.com/photo-1523049673857-eb18f1d7b578"
    },
    {
      name: "Cherry Tomatoes",
      amount: "1 cup",
      calories: 27,
      preparation: "Halved",
      substitutes: "Grape tomatoes, Sun-dried tomatoes",
      image: "https://images.unsplash.com/photo-1546094096-0df4bcaaa337"
    },
    {
      name: "Baby Spinach",
      amount: "3 cups",
      calories: 21,
      preparation: "Fresh",
      substitutes: "Kale, Arugula",
      image: "https://images.unsplash.com/photo-1576045057995-568f588f82fb"
    },
  ];

  return (
    <table className="w-full border-collapse">
      <caption className="caption-top p-6 bg-green-50 text-green-800 text-left">
        <h4 className="font-bold mb-2">Important Notes:</h4>
        <ul className="list-disc pl-4 space-y-1">
          <li>All measurements are for 4 servings</li>
          <li>Prep time: 20 minutes</li>
          <li>Suitable for vegetarian diet</li>
        </ul>
      </caption>
      <thead className="bg-green-100">
        <tr>
          <th className="p-4">Ingredient</th>
          <th className="p-4">Amount</th>
          <th className="p-4">Calories</th>
          <th className="p-4">Preparation</th>
          <th className="p-4">Substitutes</th>
        </tr>
      </thead>
      <tbody>
        {ingredients.map((ingredient, index) => (
          <tr key={index} className="border-b hover:bg-green-50">
            <td className="p-4 flex items-center gap-3 w-40">
              <img 
                src={ingredient.image} 
                alt={ingredient.name}
                className="w-12 h-12 rounded-full object-cover"
              />
              {ingredient.name}
            </td>
            <td className="p-4">{ingredient.amount}</td>
            <td className="p-4">{ingredient.calories}</td>
            <td className="p-4">{ingredient.preparation}</td>
            <td className="p-4">{ingredient.substitutes}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

Book Collection Table with Bottom Details

A table displaying a book collection with publication details in the bottom caption.

This is a live editor. Play around with it!

export default function BookCollectionTable() {
  const books = [
    {
      title: "The Silent Echo",
      author: "Elena Martinez",
      genre: "Mystery",
      pages: 342,
      rating: 4.7,
      published: "2023",
      image: "https://images.unsplash.com/photo-1544947950-fa07a98d237f"
    },
    {
      title: "Digital Dawn",
      author: "James Chen",
      genre: "Science Fiction",
      pages: 486,
      rating: 4.9,
      published: "2023",
      image: "https://images.unsplash.com/photo-1512820790803-83ca734da794"
    },
    {
      title: "The Last Garden",
      author: "Sarah Williams",
      genre: "Literary Fiction",
      pages: 298,
      rating: 4.5,
      published: "2023",
      image: "https://images.unsplash.com/photo-1543002588-bfa74002ed7e"
    },
    {
      title: "Quantum Memories",
      author: "Dr. Robert Blake",
      genre: "Science Fiction",
      pages: 512,
      rating: 4.8,
      published: "2023",
      image: "https://images.unsplash.com/photo-1532012197267-da84d127e765"
    },
    {
      title: "The Midnight Trail",
      author: "Maya Patel",
      genre: "Thriller",
      pages: 378,
      rating: 4.6,
      published: "2023",
      image: "https://images.unsplash.com/photo-1512820790803-83ca734da794"
    },
    {
      title: "Echoes of Tomorrow",
      author: "David Anderson",
      genre: "Science Fiction",
      pages: 445,
      rating: 4.7,
      published: "2023",
      image: "https://images.unsplash.com/photo-1544947950-fa07a98d237f"
    }
  ];

  return (
    <table className="w-full border-collapse bg-indigo-50">
      <caption className="caption-bottom p-6 bg-indigo-100 text-indigo-800">
        <div className="grid grid-cols-3 gap-4 text-sm">
          <div>
            <h4 className="font-bold">Publisher Information</h4>
            <p>Stellar Publishing House</p>
            <p>First Edition, 2023</p>
          </div>
          <div>
            <h4 className="font-bold">Distribution</h4>
            <p>Available worldwide</p>
            <p>Digital and physical formats</p>
          </div>
          <div>
            <h4 className="font-bold">Series Information</h4>
            <p>Part of Contemporary Literature Collection</p>
          </div>
        </div>
      </caption>
      <thead className="bg-indigo-200">
        <tr>
          <th className="p-4">Book</th>
          <th className="p-4">Author</th>
          <th className="p-4">Genre</th>
          <th className="p-4">Pages</th>
          <th className="p-4">Rating</th>
        </tr>
      </thead>
      <tbody>
        {books.map((book, index) => (
          <tr key={index} className="border-b border-indigo-100 hover:bg-indigo-100">
            <td className="p-4 flex items-center gap-3 w-48">
              <img 
                src={book.image} 
                alt={book.title}
                className="w-12 h-16 object-cover rounded"
              />
              <span className="font-medium">{book.title}</span>
            </td>
            <td className="p-4">{book.author}</td>
            <td className="p-4">{book.genre}</td>
            <td className="p-4">{book.pages}</td>
            <td className="p-4">⭐ {book.rating}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

Sales Performance Dashboard

A dashboard component that displays sales performance metrics.

This is a live editor. Play around with it!

export default function SalesPerformanceTable() {
  const salesData = [
    {
      representative: "Emma Thompson",
      region: "North America",
      quarterly_target: "$250,000",
      current_sales: "$180,000",
      leads: "45",
      conversion_rate: "68%"
    },
    {
      representative: "John Chen",
      region: "Asia Pacific",
      quarterly_target: "$200,000",
      current_sales: "$195,000",
      leads: "52",
      conversion_rate: "75%"
    },
  ];

  return (
    <div className="space-y-8">
      <table className="w-full border-collapse">
        <caption className="caption-top text-xl font-bold text-blue-800 py-4">
          Q4 Sales Performance Metrics
        </caption>
        <thead className="bg-blue-50">
          <tr>
            {Object.keys(salesData[0]).map((header) => (
              <th key={header} className="p-4 border border-blue-200 text-left">
                {header.split('_').join(' ').toUpperCase()}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {salesData.map((rep, idx) => (
            <tr key={idx} className={idx % 2 === 0 ? 'bg-white' : 'bg-blue-50/30'}>
              {Object.values(rep).map((value, valueIdx) => (
                <td key={valueIdx} className="p-4 border border-blue-200">
                  {value}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

Best Practices

Maintain Design Consistency

When working with Tailwind CSS to position table or component captions, maintaining consistency across your design is paramount. For example, using either caption-top or caption-bottom consistently within a single flow of related components ensures that the layout remains predictable and professional. Inconsistent application, such as mixing top and bottom captions for visually similar components, can confuse users and reduce accessibility.

Optimize for Reusability

Creating reusable caption components saves development time and enforces design discipline as your application scales. Focus on building components where caption-related utilities like caption-top and caption-bottom are passed as props. This ensures that the component can be reused with specific caption whenever needed.

Accessibility Considerations

Enhance Readability and Navigability

Captions are vital for improving the accessibility of tabular or visual data since they provide essential context and clarity. When using caption-side utilities in Tailwind CSS, ensure captions are legible and positioned meaningfully within the flow of your design. For improved readability, ensure captions are neither too small nor illegible, especially on smaller devices.

For example, opt for common font styles such as font-medium or font-bold to emphasize the text when contextually significant. Additionally, you can combine caption-side classes with appropriate text alignment utilities (text-left, text-center) to aid users navigating data-heavy interfaces. Positioning the caption close to its associated content ensures logical and intuitive reading patterns

Focus on High Contrast

Achieving sufficient contrast ratios between captions and their backgrounds is critical for designing inclusively.

Combine caption-* utilities with background color and text color utilities to ensure captions stand out distinctly against their parent container backgrounds. A fundamental aspect of ensuring accessibility is using WCAG-compliant foreground/background contrast ratios.

Table Layout Text Color