118 Diseñando el encabezado de la FACTURA en el SISTEMA DE VENTAS (PHP y MySql) FullStack

Duración: 10 min
Módulo: 📄 Facturación Profesional (TCPDF) y Dashboard Final Lección 1 de 13

Descripción

Lección 118: Diseñando el Encabezado de la Factura 🖼️

Esta lección se centró en la creación y el diseño del encabezado de la factura utilizando tablas HTML dentro del documento PDF generado por TCPDF, dividiendo la información de la empresa de la información fiscal de la factura.

1. Configuración de Márgenes y Estilos Iniciales 🎨

  • Ajuste de Márgenes: Se confirmó que el margen ideal para el documento tamaño Carta es de 15 [04:38].
  • Diseño con Tablas: Dado que TCPDF utiliza una sintaxis similar a HTML, se decidió usar la etiqueta <table> para estructurar el contenido de la factura. Se utilizó la propiedad border="1" inicialmente para visualizar y ajustar los límites de las celdas (TD) [03:49].
  • Alineación: Se probó alinear el texto al centro utilizando la etiqueta <center>, pero, al no ser reconocida, se optó por el estilo text-align: center dentro de las celdas [05:41].

2. Estructura del Encabezado (División en Columnas) 🏗️

El encabezado se estructuró mediante una tabla principal dividida en dos secciones (<td>): la izquierda para la información de la empresa y la derecha para la información fiscal de la factura.

SecciónContenidoEstilos Aplicados
Izquierda (Datos de la Empresa)Información de la empresa, incluyendo: nombre (Sistema de Ventas Hilary Web), dirección (Zona Alto Lima, primera sección, Avenida Litoral), teléfonos y la ubicación (Departamento/País, ej. La Paz - Bolivia) [02:41] - [07:08].Se usó la etiqueta <b> para resaltar el nombre de la empresa [03:00].
Derecha (Datos Fiscales)Información de la factura, incluyendo: NIT de la empresa, Número de Factura y Número de Autorización [07:49] - [09:08].Se utilizó la etiqueta <b> y se probó el estilo font-size (16px) en el NIT para hacerlo más visible [10:04].

3. Visualización Final del Modelo 💡

Una vez terminada la estructura del encabezado, se eliminó la propiedad border="1" de la tabla para obtener una vista limpia del diseño:

  • Al quitar los bordes, la factura adquiere un aspecto más profesional y organizado, dejando los datos de la empresa en la izquierda y los datos fiscales en la derecha, listos para ser rellenados con la información real de la base de datos [07:27].

La próxima lección se centrará en obtener los datos de la venta, del cliente y de la empresa para rellenar dinámicamente este encabezado.