3.5 Tablas

Mediante las herramientas de edición de texto de Joomla, aprenda a crear y dar formato a una tabla en un artículo. En este último tutorial de la sección, completaremos el artículo Nuestros servicios añadiendo una tabla de planes y precios.

Requisitos previos

• 1 Introducción al tutorial explica dónde ejecutar su tutorial y el acceso administrativo.
• 3.4 Enlaces agrega el hiperenlace de Joomla sobre el que se construye el punto de partida de este tutorial.

Pasos

1. Inicie sesión en el backend de Joomla y navegue hasta el Panel de inicio.
2. En el Menú de la administración, haga clic en Contenido > Artículos.
3. Haga clic en Nuestros servicios para reabrirlo y editarlo.
4. Haga clic al final de la última línea del artículo y pulse Intro para empezar una nueva línea.
5. Como se mostró en 3.2 Encabezados, establezca el formato en Encabezado 2 y escriba Plans & Pricing.
6. Pulse Intro, establezca el formato en Párrafo, y escriba: Choose the plan that fits where you are today — you can always move up as you grow.
7. Pulse Intro para empezar una nueva línea para la tabla.
8. Expanda la barra de herramientas haciendo clic en el icono de puntos suspensivos.
   • La barra de herramientas se adapta al ancho del navegador. La configuración y posición de los iconos puede ser diferente a la mostrada aquí.
9. El icono de tabla es un menú desplegable. Despliegue el menú y pase el cursor sobre la primera opción, Tabla. Resultado: aparece una cuadrícula a la derecha.
10. Pase el cursor sobre la cuadrícula para seleccionar una tabla de 4 columnas y 4 filas, luego haga clic para insertarla.
    

    

11. Rellene la tabla, pulsando Tab para avanzar de celda en celda:
    • Fila 1 (encabezado): Feature, Basic, Estándar, Premium
    • Fila 2: Consulting hours, 5/mo, 15/mo, Unlimited
    • Fila 3: Implementation support, Email only, Email + calls, Dedicated manager
    • Fila 4: Support response time, 2 business days, 1 business day, Same Day
12. Cuando el cursor está en cualquier celda, aparece un menú contextual encima de la tabla.
    • Aquí puede agregar o borrar filas o columnas.
    • Pase el cursor sobre los iconos para ver su función.
    
    

    

13. Ajustar el ancho de las columnas y de la tabla.
    • Pase el cursor sobre la línea de borde que divide dos columnas y observe que el cursor cambia.
    • Haga clic y arrastre el borde hacia la izquierda o hacia la derecha para cambiar el ancho de una columna.
    • Arrastrar el borde derecho más alejado ajusta el ancho de la tabla.
14. Guarde y previsualice su artículo haciendo clic en el botón Guardar seguido del botón Vista previa. Resultado: Aparece una ventana emergente con su artículo.
    • Desplácese hacia abajo para examinar la tabla.
    • Observe que no hay bordes entre las celdas de la tabla.
    • Cierre la ventana de vista previa.
15. Añadir bordes a las celdas.
    • Haga clic en la celda superior izquierda y arrastre hacia abajo y hacia la derecha para resaltar todas las celdas de la tabla.
    • Haga clic con el botón derecho en cualquier celda resaltada, pase el cursor sobre Celda y luego haga clic en Propiedades de celda. Resultado: Se abre la ventana Propiedades de celda.
      

      

    • Haga clic en Avanzado. Establezca el Ancho del borde en 1px y el Estilo de borde en Sólido.
      

      

    • Guarde y cierre el formulario.
    • Guarde el artículo y previsualícelo. Resultado: Todas las celdas tienen el mismo formato. A continuación formatearemos el encabezado de la tabla.
    • Cierre la ventana de vista previa.
16. Establecer la fila de encabezado de la tabla.
    • Resalte la fila superior de la tabla haciendo clic en la celda superior izquierda y arrastrando hacia la derecha mientras mantiene presionado el botón del ratón.
    • Haga clic con el botón derecho en cualquiera de las celdas resaltadas, pase el cursor sobre Celda y luego haga clic en Propiedades de celda.
    • En Tipo de celda elija Celda de encabezado.
    • En Alineación horizontal elija Centrar, y luego guarde. Resultado: El contenido de la celda de encabezado queda centrado y formateado en negrita.
      

      

    • Guarde el artículo y vea la vista previa. Resultado: El contenido de la celda está ajustado contra los bordes de la celda.
    • Cierre la ventana de vista previa.
17. Ajuste el relleno de la celda.
    • Haga clic derecho en cualquier parte de la tabla y seleccione Propiedades de la tabla.
    • Introduzca 5px en Relleno de celda.
    • Guarde el artículo y vea la vista previa. Resultado: La tabla está completamente formateada — con bordes, una fila de encabezado centrada en negrita y un relleno de celda cómodo.
      

      

Haga clic en Guardar y cerrar. Resultado: Nuestros Servicios está ahora completo — un párrafo de apertura con énfasis en negrita y cursiva, tres secciones de servicio con encabezados, una lista con viñetas y una lista numerada anidada, un hiperenlace al proyecto Joomla, y una tabla de precios formateada. Si desea publicarlo, 2.1 Artículo y elemento del menú explica cómo agregar un enlace de menú para que los visitantes puedan encontrarlo.

Inicia el recorrido guiado de este tutorial

Iniciar el recorrido guiado Tablas · 15 pasos

Haz este tutorial paso a paso en un Joomla Playground: un sitio Joomla que funciona en tu navegador.
Iniciarlo tarda unos segundos, como mucho medio minuto.

Tablas Abrir en una pestaña nueva × Cerrar

Conceptos

Configurar las celdas de encabezado es un asunto semántico y de accesibilidad importante; consulte Creating Accessible Tables para más información.

Los navegadores ajustarán el ancho de las tablas y celdas de forma diferente según el ancho del navegador y el tamaño de la ventana.

Las tablas están pensadas para mostrar datos tabulares. En su momento fue popular usar tablas para la presentación, con el fin de posicionar el contenido en una página. Nunca deben usarse con ese propósito.