Cómo darle estilo a una tabla con CSS

Escrito por ehow contributor | Traducido por maria della cella figueredo
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo darle estilo a una tabla con CSS
Los bordes, las leyendas, la alineación y otros elementos de una tabla forman parte del formato de estilo de CSS.

Utiliza CSS para hacer que tu tabla luzca atractiva y fácil de entender.

Nivel de dificultad:
Moderado

Otras personas están leyendo

Necesitarás

  • Conocimiento básico de HTML
  • Conocimiento básico de CSS
  • No se necesita nada nuevo en esta sección

Lista completaMinimizar

Instrucciones

    CSS para los bordes

  1. 1

    Crea la tabla de la forma que lo harías normalmente. Si tu tabla tiene columnas para organizar la información usa el elemento HTML para crear los encabezamientos de las columnas. Si tu tabla usa filas con el mismo propósito, usa el elemento HTML para crear nuevos encabezamientos para las filas.

  2. 2

    Crear bordes en tu CSS requiere de dos reglas. Con la primera estableces un borde para el exterior de la tabla. También fijas las regla para el colapso del borde, así solo tendrás una línea de borde entre las celdas de la tabla (si deseas bordes dobles entre las celdas de la tabla, no fijes la propiedad del colapso). A continuación se muestra un ejemplo:

    table { border-width: 1px; border-style: solid; border-color: #000000; border-collapse: collapse; }

  3. 3

    Luego, agregas el borde a las celdas del encabezamiento de la tabla (th) y de la información de la tabla (td). Si utilizaste el colapso, habrá una línea simple entre los bordes de las celdas. A continuación se muestra un regla:

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

    Observa que el selector agrupado th, td crea la misma regla CSS tanto para los elementos th como para los td.

    CSS para leyendas y encabezamientos

  1. 1

    Si tu tabla tiene una leyenda, puedes usar CSS para darle estilo. La tabla que se muestra en la imagen de la Sección 1, Paso 3 tiene una leyenda. A continuación se muestra un ejemplo de una regla de estilo para este caso:

    caption { font-size: 1.4em; font-weight: bold; padding-bottom: 4px; }

    Compara el efecto de esta regla con la apariencia que se muestra en la Sección 1, Paso 3.

  2. 2

    Puedes posicionar la leyenda ya sea en la parte superior de la tabla o en la inferior, usando una leyenda lateral, superior o inferior.

  3. 3

    El elemento th está en negro y centrado (si está en una columna) por defecto. Si deseas cambiar su apariencia de cualquier forma, puedes escribir una regla para el selector th. Esta regla, por ejemplo, cambia el color, la variante de la fuente y el espaciado entre las letras.

    th { font-variant: small-caps; color: #666666; letter-spacing: 0.2em; }

    CSS para la alineación de celdas

  1. 1

    El valor por defecto para la alineación de texto vertical en las celdas de la tabla es centrado. Para mostrar esto, se debió agregar un poco más de texto a la tabla de muestra.

  2. 2

    Puedes elegir la alineación vertical: superior, o vertical: inferior. Por ejemplo:

    td { vertical-align: top; }

  3. 3

    Para alinear de forma horizontal en las celdas de la tabla, ya sea a la derecha, a la izquierda o al centro, usa la propiedad para alinear el texto. Ya que el valor por defecto es izquierdo, la regla de ejemplo cambiará el valor al centro.

    td { vertical-align: top; text-align: center; }

Consejos y advertencias

  • La regla para la tabla puede incluir otras propiedades como por ejemplo el ancho, el fondo, el relleno, el tamaño de la letra y otras propiedades de CSS.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles