En este artículo, aprenderemos a especificar si una celda de encabezado es un encabezado de una columna, una fila o un grupo de columnas o filas. La etiqueta <th> se utiliza para especificar el encabezado de un elemento <table> , normalmente para las columnas de la tabla. Sin embargo, en casos específicos, el encabezado se puede utilizar para definir el encabezado de una fila o un grupo de columnas o filas.
Acercarse:
El atributo de alcance de la etiqueta <th> se usa para especificar el alcance del encabezado, es decir, se puede usar para definir si el encabezado es para una columna, una fila o un grupo de columnas y filas. Los valores de palabra clave disponibles son filas, columnas, grupo de filas y grupo de columnas .
Sintaxis:
<th scope="rows|cols|rowgroup|colgroup">
Los siguientes ejemplos ilustran el atributo de alcance para especificar el alcance de las celdas de encabezado.
Ejemplo:
HTML
<html>
<style>
table {
border: 2px solid;
padding: 4px;
margin: 4px;
width: 100%;
}
th {
background-color: orange;
}
</style>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
How to specify whether a header cell is
a header for a column, row, or group of
columns or rows in HTML5?
</h3>
<table>
<tr>
<!-- Specifying the scope of the headings
on the columns of the table -->
<th scope="col">Name</th>
<th scope="col">Maths</th>
<th scope="col">Physics</th>
</tr>
<tr>
<!-- Specifying the scope of the heading
on the row of the table -->
<th scope="row">Saul</th>
<td>89</td>
<td>57</td>
</tr>
<tr>
<!-- Specifying the scope of the heading
on the row of the table -->
<th scope="row">Jessy</th>
<td>78</td>
<td>45</td>
</tr>
<tr>
<!-- Specifying the scope of the heading
on the row of the table -->
<th scope="row">Whitman</th>
<td>98</td>
<td>69</td>
</tr>
</table>
</body>
</html>
Salida: Las abreviaturas no se mostrarían ya que los navegadores web normales no las muestran.
atributo de alcance
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA