Таблиця з зеброю

Влад Мержевич

Змініть стиль таблиці так, щоб вона виглядала, як показано на малюнку 1. Внесення змін до коду таблиці заборонено, всі оформлення повинні здійснюватися лише за допомогою стилів.

Сам код таблиці наведено в прикладі 1.

Приклад 1. Таблиця

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Зебра</title>
  <style>
   .lux { 
    width: 300px;
    border: 1px solid #a52a2a;
    border-collapse: collapse;
    border-spacing: 0;
   }
   .lux th {
    background: #a52a2a;
    color: white; 
   }
   .lux td { 
    border-bottom: 1px solid black;
   }
   .lux td, .lux th {
    padding: 4px;
   }
  </style>
 </head>
 <body>
  <table class="lux">
   <tr><th></th><th>2004</th><th>2005</th><th>2006</th></tr>
   <tr><td>Рубіни</td><td>43</td><td>51</td><td>79</td></tr>
   <tr><td>Ізумруди</td><td>28</td><td>34</td><td>48</td></tr>
   <tr><td>Сапфіри</td><td>29</td><td>57</td><td>36</td></tr>
   <tr><td>Аметисти</td><td>23</td><td>64</td><td>97</td></tr>
  </table>
 </body>
</html>
SEO текст: Навчання створення стилізованих таблиць за допомогою CSS3. Редагування таблиці без втручання у код.

Часті запитання