TableStyling1 TableStyling2 TableStyling3

Esto se podría considerar una entrada básica para los usuarios entre el nivel básico y medio, así que si eres uno de ellos, quizás te interese.

Cuando diseñamos una tabla y no nos gusta el aspecto visual que tiene, podemos estilizarla con CSS y hacerla más bonita y personal. En esto se va a basar esta entrada, aprenderemos a estilizar tablas simples con CSS. Existen dos modelos de tablas:

1. Tablas con bordes unidos

2. Tablas con bordes separados

Las tablas con bordes unidos te permite que aparezca un solo borde mientras que las tablas con bordes separados te permite definir varios bordes.

Primer ejemplo

Vamos a usar esta tabla para explicar como estilizarla haciendo que los bordes estén separados, usando la propiedad border-collapse. Tenemos este código HTML:

Código HTML

<table title="Membership of W3C" summary="Test Table">
<caption>W3C Membership</caption>
<thead>
<tr>
<th>Type</th><th>America</th><th>Europe</th><th>Pacific</th><th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<th>Full</th><td>62</td><td>29</td><td>17</td><td>108</td>
</tr>
<tr>
<th>Affiliate</th><td>240</td><td>123</td><td>47</td><td>410</td>
</tr>
<tr>
<th>Total</th><td>302</td><td>152</td><td>64</td><th>518</th>
</tr>
</tbody>
</table>

Código CSS

Tenemos que usar este código CSS para estilizar la tabla anterior:

table {border-collapse:separate; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px;}
td{border:solid blue 1pt;}
th{border:solid red 1pt;}

La estilizamos y nos queda esto:

TableStyling1

Cambiando el estilo anterior a este:

table {border-collapse:separate; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; border:1px dashed green;}
td{border:solid blue 1pt;}
th{border:solid red 1pt;}

Nos quedará algo así:

TableStyling2

Fíjate que en el código CSS hemos usado la propiedad border-collapse con el valor “separate”, lo que hace que los bordes se encuentren separados.

Segundo ejemplo

Ahora vamos a aplicar otros estilos CSS mucho más complicados a esta tabla, que quizás resulta más compleja que la anterior, además de cambiar el valor de la propiedad border-collapse y, en vez de usar “separate”, como en el ejemplo anterior, pasaremos a cambiarlo por “collapse“. Ahora los bordes deberían de estar unidos en uno. Veremos que ocurre:

Primero tomamos el código HTML:

<table>
<colgroup><col /><col /><col /><col /><col /></colgroup>
<thead>
<tr>
<th>Type</th><th>America</th><th>Europe</th><th>Pacific</th><th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<th>Full</th><td>62</td><td>29</td><td>17</td><td>108</td>
</tr>
</tbody>
<tbody>
<tr>
<th>Affiliate</th><td>240</td><td>123</td><td>47</td><td>410</td>
</tr>
</tbody>
<tr>
<th>Total</th><td>302</td><td>152</td><td>64</td><th>518</th>
</tr>
</table>

Ahora estilizamos la tabla anterior con este código CSS:

table {border-collapse:collapse; background-color:#FFFFFF; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; border:1px dashed green;}
td{border:solid blue 1pt;}
th{border:solid red 1pt;}
colgroup.a{background-color:#FFFF00;}
tr.three{background-color:#FFFFFF;}
col.col1{background-color:navajowhite;}
col.col2{background-color:navajowhite;}
col.col3{background-color:navajowhite;}
col.col4{background-color:navajowhite;}
col.col5{background-color:navajowhite;}
tbody.second{background-color:powderblue;}
colgroup.b{background-color:lime;}
tr.two{background-color:pink;}
th.grand{background-color:#FFFF00;}

Nos quedará algo así:

TableStyling3

Y eso es todo, aunque se podría seguir, las posibilidades de atribuir estilos a un elemento con CSS, son infinitas.

Vía | TutorialFeed