HTML5: How to specify an abbreviated version of the content in a header cell ?

Last update on February 14 2024 12:55:26 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Define document type as HTML -->
<html><!-- Begin HTML document -->
<head><!-- Start of document header -->
<meta charset="utf-8"><!-- Define character encoding -->
<title>How to specify an abbreviated version of the content in a header cell</title><!-- Title of the HTML page -->
<style><!-- Start of CSS styling -->
table, th, td { /*CSS rule for table, table header, and table data cells */
border: 1px solid black; /* Apply border style to the table */
}
</style><!-- End of CSS styling -->
</head><!-- End of document header -->
<body><!-- Start of document body -->
<table border="1"><!-- Table element with border attribute set to "1" -->
<tr><!-- Table row element -->
<th abbr="type">Type of scripting</th><!-- Table header cell for column "Type of scripting" with abbreviation "type" -->
<th abbr="Description">Description of scripting</th><!-- Table header cell for column "Description of scripting" with abbreviation "Description" -->
</tr><!-- End of table row -->
<tr><!-- Table row element -->
<td>PHP</td><!-- Table data cell with content "PHP" -->
<td>Server side scripting</td><!-- Table data cell with content "Server side scripting" -->
</tr><!-- End of table row -->
<tr><!-- Table row element -->
<td>JavaScript</td><!-- Table data cell with content "JavaScript" -->
<td>Client side scripting</td><!-- Table data cell with content "Client side scripting" -->
</tr><!-- End of table row -->
</table><!-- End of table -->
</body><!-- End of document body -->
</html><!-- End of HTML document -->

Explanation:

This HTML code defines a webpage with a table displaying different types of scripting languages and their descriptions.
The <table> tag creates a table structure with a border.
The <th> tag creates table header cells.
The abbr attribute specifies an abbreviated version of the content in the header cell, which is useful for accessibility purposes or for displaying shortened versions of longer labels.
Each <tr> tag represents a row in the table.
Each <td> tag represents a cell in the table containing data.
CSS styling is applied to the table, table header, and table data cells to add a border around them.

Live Demo:

See the Pen th-abbr-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page