Desarrollo Web Lección 4 - Tablas

En esta actividad, ajustaremos el espacio entre las celdas y dentro de las celdas para que sea más legible.

• Continúe usando 'tables.html' y 'style.css' con su código de la actividad anterior. Debe tener un aspecto como este.
• tables.html
• style.css

• El relleno es el espacio entre el límite de un elemento (en este caso, la celda de la tabla) y su contenido.
• Agreguemos 10 píxeles alrededor de cada lado del texto en las celdas de datos.
• Debido a que solo queremos aplicar el relleno a las celdas de datos y no a las celdas de encabezado, debemos crear un nuevo objetivo en el código CSS.

td {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
}

• Esto debería ser mucho más legible.

• Personalmente, no me gusta el espacio entre las celdas de la tabla, así que siempre lo elimino.
• Aplicar la border-collapsepropiedad al elemento. <table>

table {
  border-collapse: collapse;
}

• ¿Eso se ve mejor?

• Echemos un vistazo a otra herramienta que te ayudará como desarrollador.
• Abra el menú de su navegador. Por lo general, se encuentra en la parte superior derecha, pero pida ayuda si no puede encontrarlo.
• Seleccione 'Más herramientas' y luego 'Herramientas para desarrolladores'.
• Esto abrirá un panel en la parte inferior de su pantalla (Firefox) o a la derecha de su pantalla (Chrome) con muchas herramientas que lo ayudarán a comprender lo que sucede en su página. El tamaño de su navegador se ajustará para cubrir el área restante.
• Si sus Herramientas para desarrolladores no se han abierto en la pestaña 'Inspector', navegue hasta ella ahora.
• Verá la estructura completa de su código HTML en un formato plegable en esta pestaña.
• Si hace clic en cualquiera de las etiquetas, verá los detalles de todos los estilos aplicados en el segundo panel, incluidos los errores.
• En el último panel, verá un modelo de caja del elemento que incluye el relleno. Veremos esto con más detalle en la próxima lección, pero por ahora, observe que el relleno está dentro del borde y algo llamado margen está fuera del borde.
• Haga clic en cualquiera <td> en su panel 'Inspector' para ver esos estilos.
• Ahora haga clic en el elemento 'td' del segundo panel para agregar una nueva regla.
• Escriba color: green; y vea que todas las celdas de datos de su tabla se vuelven verdes, al igual que algunos de los bordes.
• Esta herramienta le permitirá ver y editar sus reglas CSS sin cambiar sus archivos. Es un excelente lugar para probar los cambios que desea realizar.
• Ahora intente agregar margin: 10px; a su estilo de elemento 'td'.
• Verá una 'i' en un círculo al lado de la regla, lo que indica que hay un problema. Si pasa el cursor sobre él, verá un mensaje que le indica que margin no es una propiedad válida para las celdas de la tabla.
• Intente eliminar la 'n' de color: green; y verá que la regla está tachada y tiene una señal de advertencia al lado. Encontrará rápidamente cualquier error de tipeo si escanea sus reglas CSS aquí y los cambios que haga aquí no cambiarán su código original.

• style.css
• resultado

Siguiente: Selectores