checkmark

HTML

Introduction to Web and HTML

How the Web Works What is HTML Why Learn HTML

HTML Basics

HTML Structure and Syntax HTML Tags HTML Elements HTML Attributes Anatomy of an HTML Document Creating Your First HTML Page

HTML Document Structure

Document Type Declaration (<!DOCTYPE>) The `<html>` Element The `<head>` Section The `<meta>` Element The `<title>` Element The `<body>` Element HTML Comments

Text Formatting

Headings (<h1> to <h6>) Paragraphs (`<p>`) Line Breaks (`<br>`) Text Formatting Tags Preformatted Text (`<pre>`)

Lists

Unordered Lists (<ul> and <li>) Ordered Lists (<ol> and <li>) Definition Lists (<dl>, <dt>, and <dd>)

Links

Anchor Tags (<a>) Internal Links in html External Links in html Links to Email Addresses Linking to Other Resources Link Target Attributes Image Links

Images

Inserting Images (<img>) Image Attributes Image Formats (JPEG, PNG, GIF) Image Size and Alignment Image Maps

HTML Forms

HTML Form Structure Text Fields and Textareas Radio Buttons and Checkboxes Dropdowns / Select Box Text, Password, and Email Inputs in HTML Forms Date and Time Inputs in HTML Forms Submit and Reset Buttons Form Elements Attributes Form Validation Grouping Form Elements File Uploads Creating a Contact Form

Tables

Table Structure Table Rows and Columns Table Headers Table Data Table Captions Table Borders and Styling Spanning Rows and Columns

Multimedia

Embedding Audio (<audio>) Embedding Video (<video>) Video Formats (MP4, WebM, Ogg) Multimedia Attributes

HTML5 Sematic Elements

HTML5 Structural Elements Role of Semantic Elements Accessibility and SEO

HTML Entities

Special Characters and Symbols Common HTML Entities
menu Back to Edkool

Table Captions

Table Captions

Table captions are a way to provide a brief title or description for a table, making it more accessible and informative. In this section, we'll explore how to create table captions in HTML and understand their importance.

Adding a Table Caption

To add a caption to a table, use the <caption> element within the <table> element. The <caption> element should be placed immediately after the opening <table> tag.

Here's an example of adding a caption to a table:

<table>
  <caption>Monthly Sales Report</caption>
  <thead>
    <tr>
      <th>Month</th>
      <th>Sales</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$5,000</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$6,200</td>
    </tr>
  </tbody>
</table>

Styling Table Captions

You can style table captions using CSS to make them visually distinct and in line with your website's design. Consider using font styles, colors, and text alignment for a polished appearance.

/* Example CSS for styling table captions */
caption {
  font-weight: bold;
  font-size: 1.2em;
  text-align: center;
  background-color: #f2f2f2;
  padding: 5px;
}

Accessibility

Table captions are not only for visual presentation but also improve accessibility. They provide a summary or title for the table that can be read by screen readers, helping users understand the table's context.

When creating captions, be concise and descriptive, summarizing the purpose or content of the table in a clear and informative manner.

Multiple Captions

In some cases, you may want to provide multiple captions for a table. While the HTML specification allows for this, it's important to use this feature thoughtfully, considering how it affects both visual and assistive technology users.

Here's an example with multiple captions:

<table>
  <caption>Monthly Sales Report</caption>
  <caption>Year: 2023</caption>
  <thead>
    <!-- Header row -->
  </thead>
  <tbody>
    <!-- Data rows -->
  </tbody>
</table>

In summary, table captions are a valuable addition to HTML tables, providing context and improving accessibility. By using the <caption> element, you can create informative and visually appealing captions that enhance the user experience and understanding of the table's content.

Previous Table Data
Next Table Borders and Styling