En este artículo, aprenderemos cómo especificar una versión más corta del contenido en una celda de encabezado. Esto puede ser útil para los usuarios de lectores de pantalla, ya que no necesitan leer encabezados más grandes ni facilitar la comprensión de abreviaturas conocidas. La etiqueta <th> se usa para especificar el encabezado de un elemento <table> y el contenido del encabezado se define entre las etiquetas de encabezado.
Enfoque: el atributo abbr de la etiqueta <th> se usa para especificar una abreviatura del contenido del encabezado. Esto no tendrá ningún efecto en un navegador web normal. Sin embargo, los lectores de pantalla podrían leer la información.
Sintaxis:
<th abbr="text">
Los siguientes ejemplos ilustran el atributo abbr para especificar la versión más corta del contenido de la celda del encabezado.
Ejemplo:
HTML
<html>
<style>
table {
border: 2px solid;
padding: 4px;
margin: 4px;
width: 100%;
}
th {
background-color: yellowgreen;
}
</style>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
How to specify a shorter version of
the content in a header cell
</h3>
<table>
<tr>
<!-- Use the abbr attribute to specify
the shorter version -->
<th abbr="S. No">Serial Number</th>
<th abbr="DOB">Date of Birth</th>
<th abbr="Ph. No.">Phone Number</th>
</tr>
<tr>
<td>1</td>
<td>12/04/1991</td>
<td>099-91929349</td>
</tr>
<tr>
<td>2</td>
<td>06/03/2000</td>
<td>099-12345678</td>
</tr>
<tr>
<td>3</td>
<td>16/07/2020</td>
<td>099-12334678</td>
</tr>
</table>
</body>
</html>
Salida: Las abreviaturas no se mostrarían ya que los navegadores web normales no las muestran.
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA