Las tablas de datos enumeran diversa información en columnas y filas para facilitar la lectura. Los datos suelen ser parcialmente numéricos con etiquetas de texto. Un ejemplo es una tabla de datos que muestra cuántas calorías come una persona al día. La creación de una tabla de datos en línea se puede hacer con HTML o el lenguaje de navegador CSS más complejo. La tabla final se parece a una tabla de datos creada en una hoja de cálculo o en papel. La única diferencia es la codificación de fondo, que no se ve a menos que se mire el código fuente. La codificación se puede crear mediante editores de HTML, texto u otras formas. Hay muchos sitios en línea que ofrecen la posibilidad de ingresar datos, establecer algunos atributos y crear toda la codificación de la tabla para usted. Las tablas de datos en línea se utilizan generalmente como parte de una página web. Las tablas de datos se utilizan a menudo para crear listas de artículos con categorías, como artículos a la venta. Algunas páginas web las utilizan para mostrar estadísticas para obtener información. Si bien las tablas de datos se pueden usar sin conexión para imprimir o en informes, generalmente es mejor usar software de hoja de cálculo, como Microsoft Office Excel, que ofrece muchas más funciones para trabajar con datos. Esta guía muestra cómo crear una tabla de datos HTML con el Bloc de notas.
Abra un editor HTML o simplemente un documento de texto normal del Bloc de notas para ingresar código HTML. El Bloc de notas funciona bien si está acostumbrado a la codificación HTML. Los editores HTML hacen que las tareas repetitivas sean más rápidas, pero algunos, como Frontpage, agregan codificación adicional e innecesaria que puede ralentizar las páginas web. Lo mejor que puede hacer es codificar primero con un editor HTML, luego volver y editar el código a mano para limpiarlo.
Decida los atributos de la tabla para el borde, el ancho, el color de fondo y los colores de la fuente. Debe tener en cuenta el diseño de la página web, el ancho, los colores y otros atributos para que la tabla sea fácilmente legible. También debe decidir cuántas filas y columnas se necesitan para los datos. Comience a definir los atributos de la tabla. (Nuestro ejemplo muestra la cantidad de calorías consumidas en el almuerzo y la cena de cada día de la semana. Necesitamos tres columnas (Día, Almuerzo y Cena) y siete filas (dos para etiquetas y una para cada día de la semana).
Agregue un borde alrededor de la tabla y las celdas de datos. Los bordes separan los datos en celdas para facilitar la visualización. Se mide en píxeles y se le puede dar un valor de 0 para no utilizarlos. Un borde de uno o dos píxeles generalmente está bien. La etiqueta del borde es
bgcolor = border = "CHOSEN_BORDER_WIDTH"
El color del borde se puede cambiar con la etiqueta.
bordercolor = "CHOSEN_COLOR"
que utiliza los términos de colores básicos, como rojo o negro o códigos de color hexadecimales de seis dígitos. Los hexadecimales ofrecen más colores. Nuestro ejemplo usa border = "2" y bordercolor = "black".
Determina el ancho de toda la mesa. Se mide en píxeles o porcentaje del tamaño de la pantalla. Los píxeles son definitivos y los porcentajes permiten que la tabla se ajuste a diferentes tamaños de pantalla. Intente juzgar el ancho en función del ancho de los datos en las filas. Si luego descubre que la mesa es demasiado delgada o ancha, puede cambiarla. Nuestro ejemplo usa width = "175".
Establezca el color de fondo de las celdas de datos. Es diferente al color de fondo de la página, que puede ofrecer un buen contraste. La etiqueta es
bgcolor = "ELEGIDO_COLOR"
al igual que el color del borde. Nuestro ejemplo usa bgcolor = "white".
Establezca el color de fuente del texto en las celdas. Asegúrese de que el color contrasta bien con el fondo, para que sea fácil de leer. Claro sobre oscuro u oscuro sobre claro siempre funcionan mejor. La etiqueta es
font = "CHOSEN_COLOR"
Nuestro ejemplo es font = "black", que contrasta bien con el fondo blanco.
Escriba las etiquetas de la tabla completas entre una flecha izquierda y derecha con un espacio entre los atributos de la etiqueta y comenzando con la etiqueta de la tabla al frente. El orden de las etiquetas no importa, siempre que la "tabla" esté al frente.
Determine el ancho de las columnas. El ancho de cada columna depende del ancho de toda la tabla. Tome el ancho de la tabla y divídalo por el número de celdas para obtener columnas de tamaño uniforme. Si es necesario, ajuste el ancho de las columnas, pero el total no puede exceder el ancho de la tabla. Cuando cambia el ancho de una celda, las otras celdas deben ajustarse para totalizar el ancho de la tabla. (Nuestro ejemplo tiene un ancho de 175 y tres columnas por fila, por lo que una división uniforme de aproximadamente 59. La división real es 70, 60, 40.)
Comience a agregar sus datos. Primero, comience una nueva línea y agregue una fila de tabla con el código
Ingrese sus datos para la celda; usando este código para representar celdas en blanco:
Cerrar la celda con la etiqueta. La etiqueta bordercolor se utiliza para especificar el color del borde de la celda, si se desea. Si se omite, se utiliza el color de borde de la tabla predeterminado. El primer código de celda de nuestro ejemplo es:
Repita la creación de celdas de datos de la tabla, cada una en una nueva línea, hasta que todas las celdas de la fila estén completas. Luego termina la fila con la etiqueta. Comience la siguiente fila con el mismo proceso, comenzando con el
Cierre el código de la tabla con el con etiqueta. Nuestro código de tabla final, si finaliza después de dos filas de datos, se encuentra a continuación.
Cosas que necesitará
- Editor de HTML o Bloc de notas
- Datos