Changes

no edit summary
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>
370

edits