Scribd Logo
Hochladen

Willkommen bei Scribd!

  • Tablas en CSS

    Hochgeladen von

    Herald
    7 Ansichten2 Seiten
    Ficha de trabajo

    Copyright

    © © All Rights Reserved

    Verfügbare Formate

    DOCX, PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden
    Ficha de trabajo

    Copyright:

    © All Rights Reserved
    Als DOCX, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    7 Ansichten2 Seiten

    Tablas en CSS

    Hochgeladen von

    Herald
    Ficha de trabajo

    Copyright:

    © All Rights Reserved
    Als DOCX, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 2

    FICHA DE INFORMACIÓN: TABLAS EN CSS ACTIVIDAD: TABLAS EN CSS

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

    Das könnte Ihnen auch gefallen