Current Location：How HTML > HTML Articles > Content

HTML Table Title

HTML Table Title

Tables are a fundamental part of web design, allowing us to organize and display data in a structured way. One key aspect of tables is the ability to provide titles for different sections. In this article, we will explore various ways to add titles to HTML tables.

Basic Table Structure

Let’s start with a basic example of an HTML table structure:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table>
  <tr>
    <th>Title 1</th>
    <th>Title 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>
</body>
</html>

Output:

HTML Table Title

In this example, we have a simple table with two columns and one row of data. The <th> tags are used to define table headers, while the <td> tags are used for table data.

Adding a Table Title

To add a title to a table, we can use the <caption> tag:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table>
  <caption>Table Title</caption>
  <tr>
    <th>Title 1</th>
    <th>Title 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>
</body>
</html>

Output:

HTML Table Title

In this example, the <caption> tag is placed before the first row of the table. The text inside the <caption> tag will be displayed as the title of the table.

Aligning the Table Title

We can also align the table title using the style attribute:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table>
  <caption style="text-align: center;">Centered Table Title</caption>
  <tr>
    <th>Title 1</th>
    <th>Title 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>
</body>
</html>

Output:

HTML Table Title

In this example, we have centered the table title by setting the text-align property to center. Other alignment options include left and right.

Adding Background Color to the Table Title

We can also add styles such as background color to the table title:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table>
  <caption style="background-color: #f1f1f1;">Table Title with Background Color</caption>
  <tr>
    <th>Title 1</th>
    <th>Title 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>
</body>
</html>

Output:

HTML Table Title

In this example, we have set the background-color property of the <caption> tag to #f1f1f1 to give it a light gray background color.

Combining Table Title with Table Headers

We can also combine the table title with table headers to provide additional context:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table>
  <caption>Product Sales Data</caption>
  <tr>
    <th>Product Name</th>
    <th>Revenue</th>
  </tr>
  <tr>
    <td>Product A</td>
    <td>$1000</td>
  </tr>
</table>
</body>
</html>

Output:

HTML Table Title

In this example, the table title “Product Sales Data” provides an overview of the data displayed in the table, while the table headers provide specific information about the columns.

Adding a Subtitle to the Table

In addition to a main title, we can also include a subtitle for the table using multiple <caption> tags:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table>
  <caption>Product Sales</caption>
  <caption>January 2022</caption>
  <tr>
    <th>Product Name</th>
    <th>Revenue</th>
  </tr>
  <tr>
    <td>Product A</td>
    <td>$1000</td>
  </tr>
</table>
</body>
</html>

Output:

HTML Table Title

In this example, we have added two <caption> tags to create a main title “Product Sales” and a subtitle “January 2022” for the table.

Spanning Table Title Across Columns

We can also span the table title across multiple columns using the colspan attribute:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table>
  <caption colspan="2">Sales Data</caption>
  <tr>
    <th>Month</th>
    <th>Revenue</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$5000</td>
  </tr>
</table>
</body>
</html>

Output:

HTML Table Title

In this example, the colspan="2" attribute in the <caption> tag spans the title “Sales Data” across both columns of the table.

Styling Table Titles with CSS

We can further enhance the appearance of table titles using CSS styles:

<!DOCTYPE html>
<html>
<head>
<style>
  caption {
    font-size: 1.5em;
    font-weight: bold;
    color: #333;
    background-color: #f9f9f9;
    padding: 10px;
    text-align: center;
  }
</style>
</head>
<body>
<table>
  <caption>Styled Table Title</caption>
  <tr>
    <th>Title 1</th>
    <th>Title 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>
</body>
</html>

Output:

HTML Table Title

In this example, we have defined CSS styles for the <caption> tag to change the font size, weight, color, background color, padding, and text alignment of the table title.

Responsive Table Titles

To make table titles responsive, we can use media queries to adjust the styles based on the screen size:

<!DOCTYPE html>
<html>
<head>
<style>
  @media screen and (max-width: 600px) {
    caption {
      font-size: 1.2em;
    }
  }
</style>
</head>
<body>
<table>
  <caption>Responsive Table Title</caption>
  <tr>
    <th>Title 1</th>
    <th>Title 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>
</body>
</html>

Output:

HTML Table Title

In this example, the font size of the table title is reduced to 1.2em when the screen width is less than 600px, ensuring that the title remains readable on smaller devices.

Conclusion

In this article, we have explored various ways to add titles to HTML tables, including basic table structures, aligning table titles, adding background colors, combining titles with headers, adding subtitles, spanning titles across columns, styling with CSS, and making titles responsive. By effectively utilizing table titles, we can enhance the organization and presentation of data in our web pages.

Like(0)

HTML Articles