Untitled



    <!DOCTYPE html>
    <html lang="fr">

    <head>
    <meta charset="utf-8" />
    <title>Styles </title>

    <style type="text/css">


            body
                    {
                            font-family: Arial sans-serif;
                            font-size: 1em;
                            background-color:white;
                            color: black;
                    }

            h1
                    {
                            font: bold 2em;
                            margin-top: 0;
                    }

            h2
                    {
                            font-size: 1.5em;
                            text-decoration: underline;
                    }

            h2:before
                    {
                            content:url('Images/ChromeIcon.png');
                    }

            li
                    {
                            list-style-type: lower-greek;
                    }
            table
                    {
                            width: 600px;
                            table-layout: fixed;
                            border: solid black 1px;
                            border-spacing: 4px;
                    }
            #tab
                    {
                            background-color: #E0E0E0;
                    }
            td
                    {
                            text-align: left;
                            vertical-align: top;
                    }
            p       {
                            text-align: justify;
                            width: 600px;
                            border: double blue 4px;
                    }

            #header{
                border: black thin solid;
                width: 400px;
                height: 100px;
                background-color: yellow;
                text-align: center;
            }
    </style>


    </head>

    <body>

    <div id="header">

        <h1> Styles : bordures, listes, tableaux et paragraphes </h1>

    </div>

    <h2> Les lettres grecques </h2>

    <ol>
    <li> alpha</li>
    <li> beta</li>
    <li> gamma</li>
    <li> delta </li>
    </ol>

    <h2> Un tableau </h2>

    <table border="1">

            <tr>
                    <td colspan="3">Information sur le ville de Metz</td>
            </tr>


            <tr>
                    <td rowspan="3" > Localisation </td>
                    <td id="tab" > Pays </td>
                    <td > France </td>
            </tr>

            <tr>
                    <td id="tab" >  R&eacute;gions </td>
                    <td> Lorraine </td>
            </tr>

            <tr>
                    <td id="tab" > D&eacute;partement</td>
                    <td> Moselle </td>
            </tr>

            <tr>
                    <td rowspan="2"> Donn&eacute;es chiffr&eacute;es </td>

                    <td id="tab" > Superficie </td>
                    <td> 4194 ha = 41,94 km&sup2; </td>
            </tr>

            <tr>
                    <td id="tab" > Population </td>
                    <td> 124300 hab </td>
            </tr>
    </table>


    <h2>Un paragraphe</h2>
            <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Phasellus finibus malesuada eros id mattis. Integer id volutpat velit.
                    Fusce leo ligula, tristique eu arcu ac, finibus ultricies lorem.
                    Aenean nec dolor bibendum nisl pellentesque sollicitudin sed eget urna.
                    Aenean euismod turpis eget augue fringilla scelerisque ut eget sem.
                    Pellentesque lacinia nunc at nunc dictum, quis lacinia odio venenatis.
                    Nullam scelerisque eleifend sapien. Sed interdum consectetur mi at convallis.
            </p>