| Line 3: |
Line 3: |
| | <head> | | <head> |
| | <style> | | <style> |
| − | ul {
| + | #customers { |
| − | list-style-type: none; | + | font-family: Arial, Helvetica, sans-serif; |
| − | margin: 0; | + | border-collapse: collapse; |
| − | padding: 0;
| + | width: 100%; |
| − | overflow: hidden; | |
| − | background-color: #333;
| |
| | } | | } |
| | | | |
| − | li {
| + | #customers td, #customers th { |
| − | float: left; | + | border: 1px solid #ddd; |
| | + | padding: 8px; |
| | } | | } |
| | | | |
| − | li a {
| + | #customers tr:nth-child(even){background-color: #f2f2f2;} |
| − | display: block; | + | |
| | + | #customers tr:hover {background-color: #ddd;} |
| | + | |
| | + | #customers th { |
| | + | padding-top: 12px; |
| | + | padding-bottom: 12px; |
| | + | text-align: left; |
| | + | background-color: #04AA6D; |
| | color: white; | | color: white; |
| − | text-align: center;
| |
| − | padding: 14px 16px;
| |
| − | text-decoration: none;
| |
| − | }
| |
| − |
| |
| − | li a:hover {
| |
| − | background-color: #111;
| |
| | } | | } |
| | </style> | | </style> |
| Line 30: |
Line 29: |
| | <body> | | <body> |
| | | | |
| − | <ul> | + | <h1>A Fancy Table</h1> |
| − | <li><a class="active" href="#home">Home</a></li>
| + | |
| − | <li><a href="#news">News</a></li> | + | <table id="customers"> |
| − | <li><a href="#contact">Contact</a></li> | + | <tr> |
| − | <li><a href="#about">About</a></li> | + | <th>Company</th> |
| − | </ul> | + | <th>Contact</th> |
| | + | <th>Country</th> |
| | + | </tr> |
| | + | <tr> |
| | + | <td>Alfreds Futterkiste</td> |
| | + | <td>Maria Anders</td> |
| | + | <td>Germany</td> |
| | + | </tr> |
| | + | <tr> |
| | + | <td>Berglunds snabbköp</td> |
| | + | <td>Christina Berglund</td> |
| | + | <td>Sweden</td> |
| | + | </tr> |
| | + | <tr> |
| | + | <td>Centro comercial Moctezuma</td> |
| | + | <td>Francisco Chang</td> |
| | + | <td>Mexico</td> |
| | + | </tr> |
| | + | <tr> |
| | + | <td>Ernst Handel</td> |
| | + | <td>Roland Mendel</td> |
| | + | <td>Austria</td> |
| | + | </tr> |
| | + | <tr> |
| | + | <td>Island Trading</td> |
| | + | <td>Helen Bennett</td> |
| | + | <td>UK</td> |
| | + | </tr> |
| | + | <tr> |
| | + | <td>Königlich Essen</td> |
| | + | <td>Philip Cramer</td> |
| | + | <td>Germany</td> |
| | + | </tr> |
| | + | <tr> |
| | + | <td>Laughing Bacchus Winecellars</td> |
| | + | <td>Yoshi Tannamuri</td> |
| | + | <td>Canada</td> |
| | + | </tr> |
| | + | <tr> |
| | + | <td>Magazzini Alimentari Riuniti</td> |
| | + | <td>Giovanni Rovelli</td> |
| | + | <td>Italy</td> |
| | + | </tr> |
| | + | <tr> |
| | + | <td>North/South</td> |
| | + | <td>Simon Crowther</td> |
| | + | <td>UK</td> |
| | + | </tr> |
| | + | <tr> |
| | + | <td>Paris spécialités</td> |
| | + | <td>Marie Bertrand</td> |
| | + | <td>France</td> |
| | + | </tr> |
| | + | </table> |
| | | | |
| | </body> | | </body> |
| | </html> | | </html> |