Está en la página 1de 2

FICHA DE INFORMACIÓN: TABLAS EN CSS o auto. Valor por defecto.

Aunque hayamos indicado anchura


LAS TABLAS Y EL ESTILO CSS para tabla y/o celdas, su tamaño se determina por el
La mayoría de propiedades de uso habitual en CSS (bordes, colores, contenido de las mismas (si el contenido requiere mayor
tipos de letra, alineaciones,...) son perfectamente aplicables a las anchura, así se hará.
tablas. Sin embargo hay propiedades CSS que, explícitamente,
sirven para modificar la forma de visualizar los elementos de una o fixed. Predomina la anchura establecida por las propiedades
tabla. y no por el contenido
ESPACIADO Y BORDE EN LAS TABLAS
Las propiedades CSS específicas para tablas son:
ACTIVIDAD: TABLAS EN CSS
a) border-collapse :
Permite indicar cómo manejar los bordes adyacentes entre
elementos. Posibles valores: EN HTML
o collapse. Se unen los bordes adyacentes para 1. ABRIR BLOC DE NOTAS Y ESCRIBA EL SIGUIENTE TEXTO EN
formar un único borde. Es decir no hay espacio entre bordes HTML:
adyacentes. <!DOCTYPE html>
o separate. Los bordes adyacentes se mantienen <html lang=”es”>
separados. Es el valor por defecto. <head>
table{ <title>TABLA CON CSS</title>
width:100%; <link rel="stylesheet" href="D:/CSS_tex/estilostabla.css">
border-collapse:collapse; </head>
} <body>
td{ <table class="tabla">
border:2px solid black; <tr>
} <th>N°</th>
Hay que fijarse en que es en el elemento table (el contenedor <th>ALUMNO</th>
general de la tabla) en el que se indica esta propiedad. <th>TRABAJO</th>
b) border-spacing : </tr>
Indica el espacio entre bordes. Admite dos medidas, la primera se <tr>
utiliza para la distancia horizontal y la segunda para la vertical. Si se <td>1</td>
utiliza una medida se referirá a ambas distancias. <td>Carlos</td>
Ejemplo: <td>Programador</td>
border-spacing:10px 5px; </tr>
 caption-side. Posición del título de la tabla <tr>
(elemento caption). Posibilidades: top (arriba, valor por <td>2</td>
defecto), bottom (abajo). <td>Luis</td>
 empty-cells. Indica si deseamos mostrar las celdas vacías <td>Diseñador web</td>
de la tabla. Valores: show (mostrar, valor por defecto) </tr>
y hide (ocultar). No funciona (hide) con los bordes colapsados. <tr>
 table-layout. Propiedad presente en los últimos <td>3</td>
navegadores (no en Internet Explorer) permite indicar la <td>José</td>
forma en la que se calcula la anchura de las celdas. Por <td>Diseñador gráfico</td>
defecto toma el valor auto, en el que, aunque hayamos </tr>
indicado una anchura fija para una celda, el tamaño de la <tr>
misma depende del contenido. fixed, sin embargo deja la tabla <td>4</td>
con el tamaño fijado por las propiedades de anchura de <td>Raúl</td>
columna (width). <td>Técnico</td>
</tr>
</table>
c) caption-side.
</body>
</html>
Propiedad utilizada para la etiqueta caption que contiene el 1. GUARDAR EN DISCO D: EN LA CARPETA CSS CON EL
título de una tabla. Permite indicar si queremos que el título
NOMBRE DE tabla.html TIPO todos los archivos
esté por encima de la tabla (valor top, valor por defecto) o por
debajo (valor bottom) EN CSS

1. ABRIR OTRO BLOC DE NOTAS Y ESCRIBA EL SIGUIENTE TEXTO EN


d) empty-cells.
CSS:
Permite especificar si los bordes y sombreados de la tabla se
.tabla{
aplican a las celdas vacías. Valores:
border:1px solid;
width:400px;
o show. Se aplican bordes y sombreados a esas border-collapse:collapse;
celdas (valor por defecto) }
.tabla td{
o hide. No se aplican los bordes y sombreados a las background:#00FFFF;
celdas vacías. border:1px solid;
text-align:center;
e) table-layout. }
Indica la forma en la que se determina la anchura de la .tabla th{
tabla y las celdas. Posibles valores: background-color:blue;
color:yellow;
font-family:comic sans ms;
}
.tabla td:hover{
background-color:red;
font-size:30px;
}
.tabla tr:hover{
background-color:purple;
font-size:20px;
}
1. GUARDAR EN DISCO D: EN LA CARPETA CSS CON EL
NOMBRE DE estilotabla.css TIPO todos los archivos