Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Table Borders

    Cargado por

    claire juarez
    37 vistas5 páginas
    css

    Título original

    Css

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    DOCX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    css

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    37 vistas5 páginas

    Table Borders

    Cargado por

    claire juarez
    css

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 5

    CSS Tables border: 1px solid black;

    Table Borders }
    </style>
    To specify table borders in CSS, use </head>
    the border property. <body>

    <table>
    The example below specifies a black
    <tr>
    border for <table>, <th>, and <td> <th>Firstname</th>
    elements: <th>Lastname</th>
    </tr>
    Example <tr>
    <!DOCTYPE html> <td>Peter</td>
    <html> <td>Griffin</td>
    <head> </tr>
    <style> <tr>
    table, th, td { <td>Lois</td>
    border: 1px solid black; <td>Griffin</td>
    } </tr>
    </style> </table>
    </head>
    <body> <p><b>Note:</b> If a !DOCTYPE is not
    specified, the border-collapse property can
    <table> produce unexpected results
    <tr> in IE8 and earlier versions.</p>
    <th>Firstname</th>
    <th>Lastname</th> </body>
    </tr> </html>
    <tr> Table Width and Height
    <td>Peter</td>
    <td>Griffin</td> Width and height of a table is defined by
    </tr> the width and height properties.
    <tr>
    <td>Lois</td>
    <td>Griffin</td> The example below sets the width of the
    </tr> table to 100%, and the height of the <th>
    </table> elements to 50px:

    </body> Example
    </html> <!DOCTYPE html>
    <html>
    Notice that the table in the example above <head>
    has double borders. This is because both <style>
    the table and the <th>/<td> elements table, td, th {
    have separate borders. border: 1px solid black;
    }
    To display a single border for the table, table {
    use the border-collapse property. width: 100%;
    }

    Collapse Borders th {
    height: 50px;
    The border-collapse property sets whether }
    the table borders are collapsed into a </style>
    </head>
    single border or separated:
    <body>

    Example <table>
    <!DOCTYPE html> <tr>
    <html> <th>Firstname</th>
    <head> <th>Lastname</th>
    <style> <th>Savings</th>
    table { </tr>
    border-collapse: collapse; <tr>
    } <td>Peter</td>
    <td>Griffin</td>
    table, td, th { <td>$100</td>

    1
    </tr> <td>$150</td>
    <tr> </tr>
    <td>Lois</td> <tr>
    <td>Griffin</td> <td>Joe</td>
    <td>$150</td> <td>Swanson</td>
    </tr> <td>$300</td>
    <tr> </tr>
    <td>Joe</td> <tr>
    <td>Swanson</td> <td>Cleveland</td>
    <td>$300</td> <td>Brown</td>
    </tr> <td>$250</td>
    <tr> </tr>
    <td>Cleveland</td> </table>
    <td>Brown</td>
    <td>$250</td> </body>
    </tr> </html>
    </table> Vertical Text Alignment

    </body> The vertical-align property sets the


    </html> vertical alignment, like top, bottom, or
    Horizontal Text Alignment middle.

    The text-align property sets the horizontal By default, the vertical alignment of text in
    alignment, like left, right, or center. a table is middle (for both <th> and <td>
    elements).
    By default, the text in <th> elements are
    center-aligned and the text in <td> The following example sets the vertical
    elements are left-aligned. text alignment to bottom for <td>
    elements:
    The following example left-aligns the text
    in <th> elements: Example
    <!DOCTYPE html>
    Example <html>
    <!DOCTYPE html> <head>
    <html> <style>
    <head> table, td, th {
    <style> border: 1px solid black;
    table, td, th { }
    border: 1px solid black;
    } td {
    height: 50px;
    table { vertical-align: bottom;
    width: 100%; }
    } </style>
    </head>
    th { <body>
    text-align: left;
    } <table>
    </style> <tr>
    </head> <th>Firstname</th>
    <body> <th>Lastname</th>
    <th>Savings</th>
    <table> </tr>
    <tr> <tr>
    <th>Firstname</th> <td>Peter</td>
    <th>Lastname</th> <td>Griffin</td>
    <th>Savings</th> <td>$100</td>
    </tr> </tr>
    <tr> <tr>
    <td>Peter</td> <td>Lois</td>
    <td>Griffin</td> <td>Griffin</td>
    <td>$100</td> <td>$150</td>
    </tr> </tr>
    <tr> <tr>
    <td>Lois</td> <td>Joe</td>
    <td>Griffin</td> <td>Swanson</td>

    2
    <td>$300</td> Table Color
    </tr>
    <tr> The example below specifies the color of
    <td>Cleveland</td> the borders, and the text and background
    <td>Brown</td> color of <th> elements:
    <td>$250</td>
    </tr>
    </table> Example
    <!DOCTYPE html>
    </body> <html>
    </html> <head>
    Table Padding <style>
    table, td, th {
    border: 1px solid green;
    To control the space between the border }
    and content in a table, use the padding
    property on <td> and <th> elements: th {
    background-color: green;
    Example color: white;
    <!DOCTYPE html> }
    <html> </style>
    <head> </head>
    <style>
    table, td, th { <body>
    border: 1px solid black; <table>
    } <tr>
    <th>Firstname</th>
    td { <th>Lastname</th>
    padding: 15px; <th>Savings</th>
    } </tr>
    </style> <tr>
    </head> <td>Peter</td>
    <body> <td>Griffin</td>
    <td>$100</td>
    <table> </tr>
    <tr> <tr>
    <th>Firstname</th> <td>Lois</td>
    <th>Lastname</th> <td>Griffin</td>
    <th>Savings</th> <td>$150</td>
    </tr> </tr>
    <tr> <tr>
    <td>Peter</td> <td>Joe</td>
    <td>Griffin</td> <td>Swanson</td>
    <td>$100</td> <td>$300</td>
    </tr> </tr>
    <tr> <tr>
    <td>Lois</td> <td>Cleveland</td>
    <td>Griffin</td> <td>Brown</td>
    <td>$150</td> <td>$250</td>
    </tr> </tr>
    <tr> </table>
    <td>Joe</td>
    <td>Swanson</td> </body>
    <td>$300</td> </html>
    </tr> FANCY TABLE EXAMPLE
    <tr> <!DOCTYPE html>
    <td>Cleveland</td> <html>
    <td>Brown</td> <head>
    <td>$250</td> <style>
    </tr> #customers {
    </table> font-family: "Trebuchet MS", Arial,
    Helvetica, sans-serif;
    </body> width: 100%;
    </html> border-collapse: collapse;
    }

    #customers td, #customers th {


    font-size: 1em;

    3
    border: 1px solid #98bf21; </tr>
    padding: 3px 7px 2px 7px; <tr>
    } <td>North/South</td>
    <td>Simon Crowther</td>
    #customers th { <td>UK</td>
    font-size: 1.1em; </tr>
    text-align: left; <tr class="alt">
    padding-top: 5px; <td>Paris spcialits</td>
    padding-bottom: 4px; <td>Marie Bertrand</td>
    background-color: #A7C942; <td>France</td>
    color: #ffffff; </tr>
    } </table>

    #customers tr.alt td { </body>


    color: #000000; </html>
    background-color: #EAF2D3;
    }
    </style> SET THE POSITION OF TALE CAPTION
    </head> <!DOCTYPE html>
    <body> <html>
    <head>
    <table id="customers"> <style>
    <tr> table, td, th {
    <th>Company</th> border: 1px solid black;
    <th>Contact</th> }
    <th>Country</th>
    </tr> caption {
    <tr> caption-side: bottom;
    <td>Alfreds Futterkiste</td> }
    <td>Maria Anders</td> </style>
    <td>Germany</td> </head>
    </tr> <body>
    <tr class="alt">
    <td>Berglunds snabbkp</td> <table>
    <td>Christina Berglund</td> <caption>Table 1.1 Customers</caption>
    <td>Sweden</td> <tr>
    </tr> <th>Company</th>
    <tr> <th>Contact</th>
    <td>Centro comercial Moctezuma</td> <th>Country</th>
    <td>Francisco Chang</td> </tr>
    <td>Mexico</td> <tr>
    </tr> <td>Alfreds Futterkiste</td>
    <tr class="alt"> <td>Maria Anders</td>
    <td>Ernst Handel</td> <td>Germany</td>
    <td>Roland Mendel</td> </tr>
    <td>Austria</td> <tr class="alt">
    </tr> <td>Berglunds snabbkp</td>
    <tr> <td>Christina Berglund</td>
    <td>Island Trading</td> <td>Sweden</td>
    <td>Helen Bennett</td> </tr>
    <td>UK</td> <tr>
    </tr> <td>Centro comercial Moctezuma</td>
    <tr class="alt"> <td>Francisco Chang</td>
    <td>Kniglich Essen</td> <td>Mexico</td>
    <td>Philip Cramer</td> </tr>
    <td>Germany</td> <tr class="alt">
    </tr> <td>Ernst Handel</td>
    <tr> <td>Roland Mendel</td>
    <td>Laughing Bacchus <td>Austria</td>
    Winecellars</td> </tr>
    <td>Yoshi Tannamuri</td> <tr>
    <td>Canada</td> <td>Island Trading</td>
    </tr> <td>Helen Bennett</td>
    <tr class="alt"> <td>UK</td>
    <td>Magazzini Alimentari Riuniti</td> </tr>
    <td>Giovanni Rovelli</td> </table>
    <td>Italy</td>

    4
    <p><b>Note:</b> IE8 supports the
    caption-side property if a !DOCTYPE is </body>
    specified.</p> </html>

    También podría gustarte