Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • CSS-tabla-propiedades

    Încărcat de

    Herald
    89 vizualizări2 pagini
    lenguaje css

    Titlu original

    Ficha de Información_tabla en Css

    Drepturi de autor

    © © All Rights Reserved

    Formate disponibile

    DOCX, PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document
    lenguaje css

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca DOCX, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    89 vizualizări2 pagini

    CSS-tabla-propiedades

    Încărcat de

    Herald
    lenguaje css

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca DOCX, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 2

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

    S-ar putea să vă placă și