Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

Añadir estilos a una tabla HTML no es el trabajo más bonito del mundo, pero a veces tenemos que hacerlo. Este artículo proporciona una guía para hacer que las tablas HTML se vean bonitas, para ello usaremos características detalladas en artículos anteriores.

Requisitos previos: HTML básico (más info en Introducción a HTML), tablas HTML (ver el módulo de tablas HTML(TBD)), y una idea de cómo funciona el CSS (más info en Introducción al CSS.)
Objetivo: Aprender a dar estilo a tablas HTML de una forma efectiva.

Una tabla HTML típica

Comencemos echando un vistazo a una tabla HTML típica. Bueno, yo digo típica — la mayoría de los ejemplos de tablas HTML son sobre zapatos, el tiempo o empleados; hemos decidido hacer las cosas más interesantes creando una tabla sobre bandas punk famosas del Reino Unido. El código es el siguiente:

<table summary="The most famous UK punk bands">
  <caption>A summary of the UK's most famous punk bands</caption>
  <thead>
    <tr>
      <th scope="col">Band</th>
      <th scope="col">Year formed</th>
      <th scope="col">No. of Albums</th>
      <th scope="col">Most famous song</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Buzzcocks</th>
      <td>1976</td>
      <td>9</td>
      <td>Ever fallen in love (with someone you shouldn't've)</td>
    </tr>
    <tr>
      <th scope="row">The Clash</th>
      <td>1976</td>
      <td>6</td>
      <td>London Calling</td>
    </tr>
       
      ... some rows removed for brevity

    <tr>
      <th scope="row">The Stranglers</th>
      <td>1974</td>
      <td>17</td>
      <td>No More Heroes</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row" colspan="2">Total albums</th>
      <td colspan="2">77</td>
    </tr>
  </tfoot>
</table>

La tabla esta bien creada, es fácilmente estilizable y es accesible gracias a características como scope, <caption>, summary, <thead>, <tbody>, etc. Por desgracia, no se ve bonita cuándo se muestra en pantalla (puedes ver el ejemplo en punk-bands-unstyled.html):

Tal y como está, es aburrida y difícil de leer. Necesitaremos usar algo de CSS para arreglar esto.

Aprendizaje activo: Estilizando nuestra tabla

En esta sección de aprendizaje activo vamos a estilizar nuestra tabla juntos.

  1. Para comenzar, crea una copia local del código de ejemplo, descarga ambas imagenes (ruido pieldeleopardo), y pon los tres archivos en alguna carpeta de tu ordenador.
  2. Ahora crea un nuevo archivo llamado style.css y guardalo con el resto de archivos, en la misma carpeta.
  3. Enlaza el CSS al HTML copiando la siguiente línea dentro de <head>:
    <link href="style.css" rel="stylesheet" type="text/css">

Spacing and layout

Lo primero que necesitamos hacer es solucionar el estilo (espaciado/distribucion) por defecto tan apretado de la tabla.  Para ello, añadamos el diguiente CSS al archivo style.css:

/* spacing */

table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  border: 3px solid purple;
}

thead th:nth-child(1) {
  width: 30%;
}

thead th:nth-child(2) {
  width: 20%;
}

thead th:nth-child(3) {
  width: 15%;
}

thead th:nth-child(4) {
  width: 35%;
}

th, td {
  padding: 20px;
}

Las partes más importantes a resaltar son:

  • Un valor table-layout de fixed establecido en la tabla es, en general, buena idea ya que le da, por defecto, un comportamiento predecible. Normalmente se tiende a dar un tamaño de columna según cuanto contenido tengan estas, dando extraños resultados. Con table-layout: fixed, puedes dar el tamaño a las columnas de acuerdo con sus encabezamientos y manejar el contenido adecuadamente. Es por esto que hemos seleccionado los cuatro encabezamientos con el selector thead th:nth-child(n) (:nth-child)  ("Seleccionar el descendiente enesimo que es un elemento <th> en una secuencia, dentro del elemento <thead> ") y, dados estos, asignar los porcentajes de anchura. Chris Coyier disecciona esta técnica con mas detalle en  Fixed Table Layouts.

    Hemos acoplado esto con un width del 100%, significando que la tabla llenará cualquier contenedor en la que se ubique, y será de buena adaptabilidad (aunque podría requerir algo más de trabajo para que se vea bien en pantallas de anchuras estrechas).
  • Un valor border-collapse decollapse es una buena práctica por convenio para cualquier esfuerzo de estilización. Por defecto habrá espacio entre los bordes de los elementos de la tabla cuando los estableces, como se muestra en la imagen siguiente. Esto no tiene buen aspecto (aunque tenga el aspecto que quieres, ¿Quien sabe?) Con border-collapse: collapse; establecido, los bordes se reducen a uno, viendose así mucho mejor:
  • Hemos puesto  border alrededor de la tabla, que es necesario, porque pondremos bordes en la cabecera de la tabla y después en el pie — se ve raro e incongruente cuando no tienes borde alrededor del conjunto fuera de la tabla además de acabar con vacios.
  • Hemos puesto  padding en los elementos <th> y <td> — esto da a los datos espaciado para respirar, haciendo la tabla mucho más legible.

En este punto, nuestra tabla se ve ya mucho mejor:

Some simple typography

Now we'll get our type sorted out a bit.

First of all, we've gone and found a font on Google Fonts that is suitable for a table about punk bands. You can go there and find a different one if you like; you'll just have to replace our provided <link> element and custom font-family declaration with the ones Google Fonts gives you.

First, add the following <link> element into your HTML head, just above your existing <link> element:

<link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>

Now add the following CSS into your style.css file, below the previous addition:

/* typography */

html {
  font-family: 'helvetica neue', helvetica, arial, sans-serif;
}

thead th, tfoot th {
  font-family: 'Rock Salt', cursive;
}

th {
  letter-spacing: 2px;
}

td {
  letter-spacing: 1px;
}

tbody td {
  text-align: center;
}

tfoot th {
  text-align: right;
}

There is nothing really specific to tables here; we are generally tweaking the font styling to make things easier to read:

  • We have set a global sans-serif font stack; this is purely a stylistic choice. We've also set our custom font on the headings inside the <thead> and <tfoot> elements, for a nice grungy, punky look.
  • We've set some letter-spacing on the headings and cells, as we feel it aids readability. Again, mostly a stylistic choice.
  • We've center-aligned the text in the table cells inside the <tbody> so that they line up with the headings. By default, cells are given a text-align value of left, and headings are given a value of center, but generally it looks better to have the alignments set the same for both. The default bold weight on the heading fonts is enough to differentiate their look.
  • We've right-aligned the heading inside the <tfoot> so that it is visually associated better with its data point.

The result looks a bit neater:

Graphics and colors

Now onto graphics and colors! Because the table is full of punk and attitude, we need to give it some bright imposing styling to suit. Don't worry, you don't have to make your tables this loud — you can opt for something more subtle and tasteful.

Start by adding the following CSS to your style.css file, again at the bottom:

thead, tfoot {
  background: url(leopardskin.jpg);
  color: white;
  text-shadow: 1px 1px 1px black;
}

thead th, tfoot th, tfoot td {
  background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5));
  border: 3px solid purple;
}

Again, there's nothing specific to tables here, but it is worthwhile to note a few things.

We've added a background-image to the <thead> and <tfoot>, and changed the color of all the text inside the header and footer to white (and given it a text-shadow) so it is readable. You should always make sure your text contrasts well with your background, so it is readable.

We've also added a linear gradient to the <th> and <td> elements inside the header and footer for a nice bit of texture, as well as giving those elements a bright purple border. It is useful to have multiple nested elements available so you can layer styles on top of one another. Yes, we could have put both the background image and the linear gradient on the <thead> and <tfoot> elements using multiple background images, but we decided to do it separately for the benefit of older browsers that don't support multiple background images or linear gradients.

Zebra striping

We wanted to dedicate a separate section to showing you how to implement zebra stripes — alternating rows of color that make the different data rows in your table easier to parse and read. Add the following CSS to the bottom of your style.css file:

tbody tr:nth-child(odd) {
  background-color: #ff33cc;
}

tbody tr:nth-child(even) {
  background-color: #e495e4;
}

tbody tr {
  background-image: url(noise.png);
}

table {
  background-color: #ff33cc;
}
  • Earlier on you saw the :nth-child selector being used to select specific child elements. It can also be given a formula as a parameter, so it will select a sequence of elements. The formula 2n-1 would select all the odd numbered children (1, 3, 5, etc.) and the formula 2n would select all the even numbered children (2, 4, 6, etc.) We've used the odd and even keywords in our code, which do exactly the same things as the aforementioned formulae. In this case we are giving the odd and even rows different (lurid) colors.
  • We've also added a repeating background tile to all the body rows, which is just a bit of noise (a semi-transparent .png with a bit of visual distortion on it) to provide some texture.
  • Lastly, we've given the entire table a solid background color so that browsers that don't support the :nth-child selector still have a background for their body rows.

This color explosion results in the following look:

Now, this may be a bit over the top and not to your taste, but the point we are trying to make here is that tables don't have to be boring and academic.

Styling the caption

There is one last thing to do with our table — style the caption. To do this, add the following to the bottom of your style.css file:

caption {
  font-family: 'Rock Salt', cursive;
  padding: 20px;
  font-style: italic;
  caption-side: bottom;
  color: #666;
  text-align: right;
  letter-spacing: 1px;
}

There is nothing remarkable here, except for the caption-side property, which has been given a value of bottom. This causes the caption to be positioned on the bottom of the table, which along with the other declarations gives us this final look (see it live at punk-bands-complete.html):

Active learning: Style your own table

At this point, we'd like you to take our example table HTML (or use some of your own!) and style it to make something considerably better designed and less garish than our table.

Table styling quick tips

Before moving on, we thought we'd provide you with a quick list of the most useful points illustrated above:

  • Make your table markup as simple as possible, and keep things flexible, e.g. by using percentages, so the design is more responsive.
  • Use table-layout: fixed to create a more predictable table layout that allows you to easily set column widths by setting width on their headings (<th>).
  • Use border-collapse: collapse to make table elements borders collapse into each other, producing a neater and easier to control look.
  • Use <thead>, <tbody>, and <tfoot> to break up your table into logical chunks and provide extra places to apply CSS to, so it is easier to layer styles on top of one another if required.
  • Use zebra striping to make alternative rows easier to read.
  • Use text-align to line up your <th> and <td> text, to make things neater and easier to follow.

Summary

With the dizzy exciting heights of styling tables now behind us, we need something else to occupy our time. Never fear — the next chapter provides a look at some advanced box effects, some of which have only landed in browsers very recently (such as blend modes and filters), and some of which are a bit more established (such as box shadows.)

Etiquetas y colaboradores del documento

Colaboradores en esta página: otheym, mdnwebdocs-bot, wbamberg, IXTRUnai
Última actualización por: otheym,