Lección 3 de desarrollo web - Tablas

En esta actividad, ajustaremos el espacio entre celdas y dentro de las celdas para que sea más legible. También veremos varias opciones de visualización que se utilizan para colocar elementos entre sí.

Continúe usando su jsfiddle con su código de la actividad anterior. Debe parecer como este.

HTML

<tabla>
  <thead>
    <tr>
      <th> Nombre </th>
      <th> Apellido </th>
      <th> Nacionalidad </th>
      <th> Edad </th>
      <th> Posición </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> David </td>
      <td> Ospina Ramírez </td>
      <td> Colombia </td>
      <td> 33 </td>
      <td> Portero </td>
    </tr>
    <tr>
      <td> Carlos </td>
      <td> Eccehomo Cuesta Figueroa </td>
      <td> Colombia </td>
      <td> 22 </td>
      <td> Defensa </td>
    </tr>
    <tr>
      <td> Juan Guillermo </td>
      <td> Cuadrado Bello </td>
      <td> Colombia </td>
      <td> 33 </td>
      <td> Centrocampista </td>
    </tr>
    <tr>
      <td> Radamel Falcao </td>
      <td> García Zárate </td>
      <td> Colombia </td>
      <td> 35 </td>
      <td> Delantero </td>
    </tr>
  </tbody>
</table>

CSS

td, th {
  border-width: 1px;
  border-style: solid;
}

• El relleno es el espacio entre el elemento (en este caso el texto) y el borde.
• Agreguemos 10 píxeles a 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, tenemos que crear un nuevo objetivo en el código CSS.

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

• Personalmente, no me gusta el espacio entre las celdas de la tabla, así que me gusta eliminarlo.
• Aplicar la border-collapse propiedad al elemento <table>.

table {
  border-collapse: collapse;
}

• Cada elemento en HTML es en bloque o en línea, lo que afecta la forma en que aparece en la página y los elementos que lo rodean.
• Los elementos block se apilan uno encima del otro. Los párrafos y encabezados son elementos de bloque.
• los elementos in-line se alinean de lado a lado en una sola fila. Los elementos de texto como <span>, <strong> y <em> son elementos en línea.
• Veamos la diferencia. De forma predeterminada, las celdas de la tabla son elementos en línea (están organizados uno al lado del otro), pero podemos forzarlos a que sean elementos de bloque usando el siguiente código en el destino td.

display: block;

• ¿Qué sucede cuando ejecuta el código? ¿Se apilan todas las celdas de la tabla una encima de la otra?
• Hay otra opción que puede utilizar. Intente cambiar block a none.

display: none;

• ¿Qué sucedió? Las celdas de datos deberían desaparecer.
• Esta opción no es de mucha utilidad por sí sola, ya que nadie vería el contenido. Solo es útil cuando se usa Javascript para cambiar la visibilidad de un elemento según el contenido o la acción del usuario.
• Para restaurar la tabla, elimine el código display: none;

Siguiente: Selectores