Tablas CSS. border-spacing, caption-side, empty-cells.

APRENDERAPROGRAMAR.COM

DISEOS DE TABLAS CSS.

BORDER-SPACING,
CAPTION-SIDE, EMPTYCELLS. COLORES DE FILAS
INTERCALADOS ALTERNOS
(CU01052D)

Seccin: Cursos
Categora: Tutorial bsico del programador web: CSS desde cero
Fecha revisin: 2029
Resumen: Entrega n52 del Tutorial bsico: CSS desde cero.

Autor: Csar Krall

aprenderaprogramar.com, 2006-2029

Tablas CSS. border-spacingg, caption-side

e, empty-cells.

DISEO CSS
C DE TABLA
AS
Hay una serie de prropiedades que
q nos perrmiten defin
nir estilos para tablas. Vamos a esstudiar las
propiedad
des border-sspacing, capttion-side y empty-cells. Adems
A
abordaremos c
mo utilizar los fondos
en las tab
blas, cmo crear
c
filas co
on colores diferentes
d
y veremos un
n ejemplo dee cmo utilizar estilos
creados por
p otros pro
ogramadoress o diseadorres.

PROPIEDA
AD BORDER--SPACING
PROPIEDA
AD CSS bord
der-spacing
Funcin de la propie
edad

olar la sepaaracin entrre bordes d

dentro de una
u
tabla
Permite contro
des no estn fusionados con border-ccollapse.
cuando los bord

Valor po
or defecto

Aplicable a

Tab
blas sin bordeer-collapse establecido
e
o con border-collapse: se
eparate;
Unaa unidad de medida vlida en
e CSS (indica separacin vertical y horizzontal)

Valores posibles parra

opiedad
esta pro

Dos unidades de medida sepaaradas con un

n espacio (la p
primera unidaad indicar
ontal y la segu
unda separacin vertical)
sepaaracin horizo
inhe
erit (se heredaan las caracte
ersticas del elemento padree).

.myTable {borderr-spacing: 2em

m;}
Ejemplos
eraprogramaar.com .myTableSP {bordder-spacing: 15px
aprende
1
5px;}

Esta prop
piedad es anloga
a
al atributo
a
cellspacing que
e se usaba tradicionalm
mente en HTML
H
para
establecer una separaacin entre celdas
c
en lass tablas. En el
e caso de la antigua propiedad cellp
padding, se
mplemente usando
u
la prropiedad pad
dding.
puede obtener un efeecto anlogo en tablas sim
0 el efecto es similar a definir borrder-collapsee:collapse; aunque
a
en
Si se estaablece bordeer-spacing: 0;
realidad son
s situacion
nes distintas.. Usando borrder-spacingg:0; los bordees dobles sigguen existien
ndo, lo que
ocurre ess que estn tan juntos que
q visualmeente slo se
e aprecia una lnea de b
borde. En esste caso el
grosor de las lneas dee borde ser doble del esspecificado (ya
( que se juntan dos lneeas de borde
e). Usando
ollapse: collapse; no existen lneas dee borde paraa cada celda,, sino que las lneas colin
ndantes se
border-co
fusionan en una sola lnea. En este caso el grosor de
d las lneass de borde ser exactaamente el
especificaado.

aprenderraprogramar.co
om, 2006-2029

Tablas CSS. border-spacing, caption-side, empty-cells.

PROPIEDAD CAPTION-SIDE
Es una propiedad que permite colocar el elemento caption en una posicin concreta. Los valores
permitidos son top, right, left, bottom y hacen que el ttulo establecido en caption se coloque en el
lugar especificado. Por defecto el ttulo se coloca en posicin top (encima de la tabla). En posiciones top
y bottom (debajo de la tabla) el ttulo aparece por defecto centrado horizontalmente. Si queremos
establecer una alineacin horizontal especfica podemos usar text-align como en este ejemplo, que
coloca el ttulo abajo a la derecha:
table {width: 550px; caption-side:bottom;}
caption {text-align:right;}
En el caso de las posiciones left y right por defecto el ttulo se coloca en el lateral, alineado con la parte
superior de la tabla. Si queremos centrarlo verticalmente podemos hacerlo como en este ejemplo:
table {width: 550px; caption-side:left;}
caption {vertical-align:middle;}
Esta propiedad es una propiedad poco usada, aunque en algunos casos concretos puede resultar de
inters.

PROPIEDAD EMPTY-CELLS
Normalmente las celdas tienen un contenido. Por ejemplo <td>9</td> es una celda con contenido 9.
<td>&nbsp;</td> es una celda con un espacio en blanco. No obstante, en algunos casos las celdas
pueden estar completamente vacas en forma <td></td>. Esto es bastante frecuente cuando no se
tienen algunos datos y resulta imposible rellenar la tabla completamente.
La propiedad empty-cells sirve para definir cmo debe mostrar el navegador las celdas vacas. Tiene dos
valores posibles: show (valor por defecto) y hide. Si usamos show (o simplemente si no especificamos
esta propiedad) las celdas vacas se mostrarn de la misma manera que las celdas normales. Si usamos
hide los bordes y fondo (background) de la celda no se mostrarn
Esta propiedad es una propiedad poco usada, aunque en algunos casos concretos puede resultar de
inters.

FONDOS (BACKGROUND EN TABLAS)

Se pueden aplicar colores de fondo o imgenes de fondo a las tablas. La nica peculiaridad a tener en
cuenta es que en una tabla existen distintos elementos y a la hora de aplicar fondos cada elemento
queda en una capa inferior o superior a la hora de visualizarse, de modo que un fondo en una capa
inferior puede quedar oculto por un fondo establecido en una capa superior. Los fondos que pueden
establecerse y el orden en que quedaran ordenados son los siguientes:
1. Fondo del elemento table, es el que se sita ms abajo y ser tapado total o parcialmente por
otros fondos si se establecen.
2. Fondo de grupos de columnas
3. Fondo de columnas
aprenderaprogramar.com, 2006-2029

Tablas CSS. border-spacing, caption-side, empty-cells.

4. Fondo de grupos de filas

5. Fondo de filas
6. Fondo de celdas, que son los que se sitan ms arriba y tapan total o parcialmente a los
fondos que existan debajo.

COLORES DE FILAS INTERCALADOS O ALTERNOS

Es frecuente presentar tablas donde los colores de filas estn intercalados o alternos. Esto se puede
hacer de forma sencilla con CSS. Una forma de hacerlo sera establecer en el documento HTML una
especificacin de clase para cada fila. Por ejemplo <tr class=tr_type1></tr> alternando con <tr
class=tr_type2></tr>.
Pero en general ser mucho ms prctico y sencillo usar los selectores avanzados :nth-child(odd) y :nthchild(even) que ya hemos explicado anteriormente en el curso para conseguir alternar los colores de
fondo. Aqu mostramos un cdigo de ejemplo donde aplicamos un color de fondo amarillo a las celdas
de cabecera de la tabla y un color gris a las filas impares y un color rosado a las filas pares.
table th {background-color: yellow; }
table tr:nth-child(odd) {background-color: grey;}
table tr:nth-child(even) {background-color: pink;}
El resultado que se consigue es del tipo que mostramos a continuacin.

USAR DISEOS EXISTENTES

Como ya hemos comentado en otras ocasiones, existen muchos diseos atractivos que han sido
creados por diseadores expertos que son puestos a disposicin de todos por sus creadores a travs de
internet. Normalmente ser interesante usar estos diseos cuando queramos ahorrar tiempo y nos
resulte til un diseo que se nos proponga. Para encontrar diseos para tablas basta con usar un
buscador e introducir una bsqueda como css table designs diseos css para tablas. En los
resultados, podremos encontrar diferentes propuestas de diseo y de cdigo.

aprenderaprogramar.com, 2006-2029

Tablas CSS. border-spacing, caption-side, empty-cells.

A continuacin te indicamos el cdigo de un diseo de tabla propuesto por un diseador. Escribe el

cdigo HTML y el cdigo CSS y comprueba el resultado.

<html>
<head> <title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilosCU01051D.css">
</head>
<body>
<table >
<caption>Contenido nutricional por cada 100 g de alimento.</caption>
<tr> <th>Alimento</th> <th>Caloras (kCal)</th> <th>Grasas (g)</th>
<th>Protena (g)</th> <th>Carbohidratos (g)</th>
</tr>
<tr> <td>Arndano</td> <td>49</td> <td>0.2</td>
<td>0.4</td> <td>12.7</td>
</tr>
<tr> <td>Pltano</td> <td>90</td> <td>0.3</td>
<td>1.0</td> <td>23.5</td>
</tr>
<tr> <td>Cereza</td> <td>46</td> <td>0.4</td>
<td>0.9</td> <td>10.9</td>
</tr>
<tr> <td>Fresa</td> <td>37</td> <td>0.5</td>
<td>0.8</td> <td>8.3</td>
</tr>
</table>
</body>
</html>

/* Curso CSS estilos aprenderaprogramar.com*/

body {font-family: Arial, Helvetica, sans-serif;}
table {

font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;

font-size: 12px;
margin: 45px;
width: 480px;
text-align: left;
border-collapse: collapse; }

th {

font-size: 13px;
font-weight: normal;
padding: 8px;
background: #b9c9fe;
border-top: 4px solid #aabcfe;
border-bottom: 1px solid #fff;
color: #039;

}
td {

padding: 8px;
color: #669;

background: #e8edff;
border-bottom: 1px solid #fff;
border-top: 1px solid transparent;

}
tr:hover td { background: #d0dafd; color: #339; }

aprenderaprogramar.com, 2006-2029

Tablas CSS. border-spacingg, caption-side

e, empty-cells.

Fjate en el cdigo CSSS que crea este diseo

o de tabla. Con
C los contenidos que hemos estudiado a lo
c
ya deb
bemos ser caapaces de comprender to
odas las reglaas CSS utilizaadas.
largo del curso
Ten en cuenta que nosotros
n
aqu
u por motivvos didctico
os estamos aplicando eestilos directtamente a
os table, th, td,
t etc. lo cu
ual supondraa que son esstilos para to
odas las tablas. Para deffinir varios
elemento
estilos differentes parra tablas basstar definir clases o idss que apliqu
uemos a tab
blas y luego definir los
estilos para esos ids o clases. Porr ejemplo #tablaTipo1 td
d { } .tab
blaTipo1 td { } seran reglas que
mitiran aplicaar estilos differentes a taablas concre
etas a las que hayamos aplicado un id o clase
nos perm
concreta.
Con este ejemplo com
mprobamos otra cosa: un buen dise
o no tiene por qu ser complicado a nivel de
n la tabla antterior lo pod
demos comprobar, un bu
uen diseo puede basarse simplemen
nte en una
cdigo. En
buena com
mbinacin de colores dee texto, colorres de fondo
o y tipos de leetra. El cdiggo es bastan
nte sencillo
y esto es bueno para acelerar
a
la velocidad de carga de unaa pgina web
b y para evitaar problemas debido a
ntos navegaadores interp
preten el c
digo de forrma distintaa. Cuando ests trabajando en la
que distin
creacin de
d pginas web
w recuerda esta mxim
ma: lo senccillo puede ser bello y effectivo. Lo co
omplicado
tender a crearnos prroblemas.
Lo que hemos
h
indiccado aqu aplicado a tablas es vlido tambin para el resto de diseo CSS:
composiciones de pgginas web, estilos
e
para botones,
b
estiilos para form
mularios, etcc. pueden en
ncontrarse
nos tiles paara nuestros diseos, y se
er preferiblee el cdigo ssencillo al complicado.
en interneet y resultarn

O
EJERCICIO
Crea el c
digo HTML de
d una tablaa con un ttulo de tabla, cinco
c
column
nas y 7 filas ((la primera ella,
e fila de
encabezados que no
o son datos propiamentte dichos). Aplcale
A
los siguientes estilos, com
mprueba la
ntes cuestion
nes:
visualizacin obtenidaa y respondee a las siguien
/* Curso CSS
C aprenderaprogramar.com */
table { collor: #333; font--family: Helveticca, Arial, sans-sserif; width: 640
0px; border-colllapse: collapsee;}
td, th { borrder: 1px solid transparent;
t
heeight: 30px; }
th { backgrround: #D3D3D
D3; font-weight: bold; }
td { backgrround: #FAFAFA
A; text-align: ceenter; }
tr:nth-child(even) td { bacckground: #F1FF1F1; }
tr:nth-child(odd) td { background: #FEFEEFE; }
tr td:hover { background:: #666; color: #FFF; }

aprenderraprogramar.co
om, 2006-2029

Tablas CSS. border-spacing, caption-side, empty-cells.

a) Describe cul es el efecto que genera cada una de las especificaciones que hemos incluido en el
cdigo CSS (Ejemplo: color: #333 da lugar a que se muestren todos los textos dentro del elemento table
con color #333333, que es un color gris oscuro. Font-family: Helvetica, Arial, sans-serif; da lugar a que
).
b) Indica qu modificacin habra que hacer en el cdigo para que se muestren bordes dobles con
grosor 2 pxeles.
c) Indica qu modificacin habra que hacer en el cdigo para que se muestren bordes simples de color
naranja de grosor 3 pxeles.

Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.

Prxima entrega: CU01053D

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:
http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=75&Itemid=203

aprenderaprogramar.com, 2006-2029