En este artículo, discutiremos las etiquetas utilizadas para mostrar los datos en forma tabular.
Etiquetas: Las etiquetas son las partes inicial y final de un elemento HTML. Cada etiqueta comienza con el símbolo «<» y termina con el símbolo «>». Todo lo que hay dentro de estos símbolos se llama etiquetas. Las etiquetas de apertura y cierre se utilizan para almacenar cualquier información dentro de la etiqueta.
Las etiquetas de apertura están representadas por <tag_name> y las etiquetas de cierre están representadas por </tag_name> .
Sintaxis:
<table> INFORMATION INSIDE THE TAG </table>
Atributos: los atributos se utilizan para describir las características de un elemento HTML. Todos los elementos HTML pueden tener atributos. Un atributo tiene dos parámetros, nombre y valor, para definir las propiedades de un elemento y estos parámetros se colocan debajo de la etiqueta de apertura del elemento.
Sintaxis:
<tag_name attribute_name="attribute_value">
DATA INSIDE THE TAG
</tag_name>
Nota: consulte el artículo de atributos HTML para una mejor comprensión.
Las etiquetas que se utilizan para crear una tabla en HTML son:
- tabla : En HTML, la etiqueta «tabla» se usa para definir una tabla.
- tr : para definir las filas de la tabla, se utiliza la etiqueta «tr».
- th : “th” representa un encabezado de tabla, para definir el encabezado de tabla se usa la etiqueta “th”. El encabezado de una tabla está en negrita y centrado.
- td : para insertar o agregar datos en cada celda, se usa la etiqueta «td» de Table Data.
Enfoque: ahora, para mostrar datos en un formato tabular usando las etiquetas y atributos anteriores, seguiremos los pasos a continuación:
- Cree una etiqueta de tabla debajo de la etiqueta del cuerpo.
- Para definir filas, agregue la etiqueta Table Row(tr) debajo de la tabla.
- Para encabezados de tablas, use la etiqueta Table Header(th) en la fila en particular.
- Para agregar datos a una tabla, cree una fila y use la etiqueta «td» para insertar datos dentro de cada fila.
A continuación se muestra la implementación del enfoque anterior.
Ejemplo 1: en este ejemplo, crearemos una tabla simple y la mostraremos sin usar ningún atributo.
index.html
<!DOCTYPE html> <html lang="en"> <body> <table> <tr> <th>Name</th> <th>Address</th> <th>Phone</th> </tr> <tr> <td>Ram</td> <td>Dwarika East</td> <td>9999999999</td> </tr> <tr> <td>Arjun</td> <td>Mumbai</td> <td>0808080808</td> </tr> <tr> <td>Karan</td> <td>Delhi</td> <td>7979797979</td> </tr> </table> </body> </html>
Producción:
Ejemplo 2: en este ejemplo, crearemos una tabla con atributos y usaremos el atributo de estilo para mostrar contenido que cubra todo el ancho y alinear el texto en el centro de la tabla.
index.html
<!DOCTYPE html> <html lang="en"> <body> <table style="width:100%; text-align:center"> <tr> <th>Name</th> <th>Address</th> <th>Phone</th> </tr> <tr> <td>Ram</td> <td>Dwarika East</td> <td>9999999999</td> </tr> <tr> <td>Arjun</td> <td>Mumbai</td> <td>0808080808</td> </tr> <tr> <td>Karan</td> <td>Delhi</td> <td>7979797979</td> </tr> </table> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por anuragsingh1022 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA