En este artículo, conoceremos las etiquetas HTML que se pueden usar para mostrar los datos en forma tabular. Una tabla es una representación de datos en filas y columnas, que ayuda a organizar los datos estructurados complejos. Las tablas se utilizan ampliamente en la comunicación, la investigación y el análisis de datos. Por ejemplo, si necesitamos encontrar los datos del conjunto de información que no está organizado correctamente, entonces no podemos encontrar esos datos específicos de un vistazo. De manera similar, podemos usar el formato de tabla usando la etiqueta Tabla HTML en la página web.
Las posibles áreas donde podemos usar la tabla para mostrar los datos:
- Una cantidad grande o compleja de datos se puede convertir fácilmente en una mejor forma para que sea más conveniente.
- Debido a la representación tabular, hace que la comparación de los datos sea una tarea más fácil.
- Crea una base para el análisis estadístico.
Sintaxis:
<table>
<tr><th>Table Header</th></tr>
<tr><td>Table Data</td></tr>
</table>
Comprenderemos las 3 etiquetas, sus características/usos individuales a través del ejemplo.
Etiqueta HTML <tr>: se utiliza para definir una fila en una tabla HTML. Consiste principalmente en múltiples elementos <th> o <td> debajo de él.
Sintaxis:
<tr>
<td>Data</td>
</tr>
Etiqueta HTML <th> : Se utiliza para definir el encabezado de una tabla. En la etiqueta <th>, el texto está marcado en negrita y alineado al centro de forma predeterminada.
Sintaxis:
<th>Table Heading</th>
Etiqueta HTML <td> : Se utiliza para insertar o agregar datos en cada celda. En <td>, el texto de la etiqueta es normal y está alineado a la izquierda de forma predeterminada.
Sintaxis:
<td>Table data</td>
Enfoque: en primer lugar, crearemos una tabla usando la etiqueta <table> y luego dividiremos la tabla en dos partes: encabezado y cuerpo de la tabla usando <thead> y <tbody> . Debajo de la etiqueta <thead>, agregaremos todos los encabezados de la tabla y debajo de la etiqueta <tbody>, usaremos la etiqueta <tr> para definir la fila de la tabla. Debajo de la etiqueta <thead>, agregaremos la etiqueta <th> para dar los encabezados a la tabla. Finalmente, bajo la etiqueta <tbody>, definiremos cada celda usando la etiqueta <td> .
Comprenderemos los conceptos anteriores a través de los ejemplos.
Ejemplo 1: En este ejemplo, hemos creado una tabla HTML para almacenar las calificaciones de cada estudiante en forma tabular.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
What are the HTML tags used
to display the data in the
tabular form?
</title>
<style>
table,
th,
td {
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h2>
What are the HTML tags used
to display the data in the
tabular form?
</h2>
<table>
<thead>
<tr>
<th>Roll No.</th>
<th>Name</th>
<th>Physics</th>
<th>Chemistry</th>
<th>Maths</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Kunal</td>
<td>91</td>
<td>85</td>
<td>96</td>
</tr>
<tr>
<td>2</td>
<td>Aryan</td>
<td>96</td>
<td>92</td>
<td>91</td>
</tr>
<tr>
<td>3</td>
<td>Rohan</td>
<td>80</td>
<td>85</td>
<td>98</td>
</tr>
<tr>
<td>4</td>
<td>Mohan</td>
<td>94</td>
<td>90</td>
<td>89</td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
Producción:
Ejemplo 2: Este ejemplo describe el uso de la tabla HTML.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
What are the HTML tags used
to display the data in the
tabular form?
</title>
<style>
table,
th,
td {
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h2>
What are the HTML tags used
to display the data in the
tabular form?
</h2>
<table>
<thead>
<tr>
<th>ID No.</th>
<th>Name</th>
<th>Entry time</th>
<th>Leave time</th>
</tr>
</thead>
<tbody>
<tr>
<td>C-124</td>
<td>Sahaj</td>
<td>6:00 am</td>
<td>7:30 am</td>
</tr>
<tr>
<td>C-102</td>
<td>Vedanshu</td>
<td>6:10 am</td>
<td>6:55 am</td>
</tr>
<tr>
<td>C-59</td>
<td>John</td>
<td>7:00 am</td>
<td>8:20 am</td>
</tr>
<tr>
<td>C-169</td>
<td>Priyanshu</td>
<td>7:30 am</td>
<td>8:15 am</td>
</tr>
<tr>
<td>C-145</td>
<td>Yash</td>
<td>7:35</td>
<td>8:30</td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
Producción:
