Crear tabla html

Crear tabla html

Elemento meta

Al crear una entrada de blog o una página web, es posible que desee incluir datos que no se representan mejor mediante texto. Digamos que quieres mostrar un desglose de la diversidad de tu plantilla o un resumen al final de una entrada de blog de comparación. Como estos datos serían demasiado complicados o detallados para escribirlos simplemente, podría utilizar tablas para organizarlos y presentarlos.
Las tablas permiten que el lector vea los resultados o las conclusiones de un vistazo, en lugar de tener que leer el texto para encontrar los datos numéricos o los puntos clave. Hacer que una entrada o página sea más legible de esta manera puede ayudar a atraer y mantener a los visitantes en su sitio y, en última instancia, mejorar su experiencia de usuario.
Digamos que está creando una tabla para la información de contacto de su personal. Quieres incluir el nombre, el cargo y la dirección de correo electrónico de cada uno de tus tres empleados. En ese caso, necesitarías tres columnas y cuatro filas.
La primera fila sería la cabecera de la tabla. Aquí etiquetarías cada columna envolviendo el siguiente texto -Nombre, Cargo y Dirección de Correo Electrónico- en etiquetas <th>. Este es el aspecto que tendría el código:

Div y span

Puede considerar el uso de tablas HTML en su página web. Además de crear tablas HTML para presentar datos en filas y columnas, también puede crear tablas HTML para organizar la información en su página web.
El proceso de creación de una tabla HTML es similar al que utilizó para crear su página web y cualquier elemento que ya haya incluido en su página, como enlaces o marcos. La codificación de tablas HTML en su página web es bastante fácil, ya que sólo necesita entender algunos códigos básicos de las tablas.
Esta tabla no contiene bordes, títulos ni encabezados.    Si desea añadir alguno de estos elementos a su tabla, debe incluir códigos HTML adicionales.    Los códigos para estos elementos se explican en la siguiente sección.
Además de las etiquetas básicas de la tabla, existen varias opciones para añadir elementos adicionales a su tabla. Por ejemplo, si añade un borde, un título y encabezados de columna a la tabla de la sección anterior, la tabla se parecería a la siguiente:
Observe que la etiqueta inicial de la tabla, <TABLE>, incluye ahora la etiqueta de borde, BORDER=”5″, que coloca un borde alrededor de la tabla y enmarca cada celda. El número que atribuya a la etiqueta de borde, BORDER=n, establece la anchura del borde de la tabla. Dependiendo de cómo diseñe su tabla, podrá determinar el tamaño del borde que mejor se adapte a su tabla y al diseño general de su página web.

Marco en línea

Tenemos un nombre, una altura y un lugar en el que se encuentra el pico. Pero, ¿qué es una tabla HTML? Una tabla HTML es un elemento que contiene datos tabulares, presentados en filas y columnas. Es decir, dada la siguiente matriz:
Nuestro primer objetivo es generar la cabeza de la tabla. Pero pensemos un momento en ello. Sabemos que el método nativo createElement() crea cualquier elemento que le pasemos. Digamos que queremos crear una cabeza de tabla, podemos hacer document.createElement(‘thead’). ¿Pero tenemos una alternativa mejor?
Lo interesante de HTMLTableElement son los métodos que expone. Entre los métodos está createTHead(). Bingo! createTHead devuelve el elemento cabeza de tabla asociado a una tabla dada, pero mejor, si no existe ninguna cabecera en la tabla, createTHead crea una por nosotros.
Si llamas a build-table.html en un navegador no verás nada en la pantalla pero la consola de desarrollador te mostrará un thead dentro de la tabla. Estamos a mitad de camino para rellenar la cabeza de la tabla. Hemos visto que la cabecera de la tabla contiene una fila rellena con un montón de th (cabeceras de tabla). Cada cabecera de tabla debe asignarse a una clave que describa de qué están hechos nuestros datos.

Elemento blockquote

Puedes crear una tabla utilizando el elemento <table>. Dentro del elemento <table>, puede utilizar los elementos <tr> para crear filas, y para crear columnas dentro de una fila puede utilizar los elementos <td>. También puede definir una celda como cabecera de un grupo de celdas de la tabla utilizando el elemento <th>.
Las tablas no tienen bordes por defecto. Puedes utilizar la propiedad CSS border para añadir bordes a las tablas. Además, las celdas de la tabla tienen el tamaño justo para que quepa el contenido por defecto. Para añadir más espacio alrededor del contenido en las celdas de la tabla puedes utilizar la propiedad CSS padding.
Nota: La mayoría de los atributos del elemento <table> como border, cellpadding, cellspacing, width, align, etc. para estilizar la apariencia de las tablas en versiones anteriores han sido eliminados en HTML5, así que evita usarlos. En su lugar, utilice CSS para estilizar las tablas HTML.

Acerca del autor

admin

Ver todos los artículos