Таблица с чередованием цвета строк

Чередование фонового цвета строк таблицы, пунктов списка и других html-элементов с помощью CSS и псевдокласса nth-child

Здравствуйте уважаемые читатели! При просомтре таблиц с большим количеством строк и столбцов бывает сложно отследить какие данные относятся к конкретной строке. Поэтому чтобы улучшить восприятие информации пользователями сайта и повысить юзабилити, можно использовать чередование фонового цвета в строках таблицы, либо в кнопках навигационного меню.

С появлением CSS3 эффекта чередования фонового цвета можно добиться исключительно средствами CSS, не изменяя HTML-разметки документа. Для этого используется псевдокласс nth-child, который позволяет выбрать все четные или нечетные элементы, используя значения odd— нечетные или even— четные элементы, либо числовое выражение an+b, где a и b целые числа, а n счетчик, который принимает значения 0, 1, 2... и так далее. Перейдем от теории к практике.

Допустим у Вас на сайте есть какая-то большая таблица. Например таблица футбольного чемпионата:

[html]<style>

table {

border-collapse: collapse;

margin: 0px auto;

}

th, td {

border: solid 1px #000;

padding: 5px;

}

</style>

<table>

<thead>

<tr>

<td>М</td><td>Команда</td><td>И</td><td>В</td><td>Н</td><td>П</td><td>Заб</td><td>Проп</td><td>О</td>

</tr>

</thead>

<tbody>

<tr>

<td>1</td><td>Зенит</td><td>30</td><td>20</td><td>7</td><td>3</td><td>58</td><td>17</td><td>67</td>

</tr>

<tr>

</tr>

<tr>

<td>3</td><td>Краснодар</td><td>30</td><td>17</td><td>9</td><td>4</td><td>52</td><td>27</td><td>60</td>

</tr>

<tr>

<td>4</td><td>Динамо</td><td>30</td><td>14</td><td>8</td><td>8</td><td>53</td><td>36</td><td>50</td>

</tr>

<tr>

<td>5</td><td>Рубин</td><td>30</td><td>13</td><td>9</td><td>8</td><td>39</td><td>33</td><td>48</td>

</tr>

<tr>

<td>6</td><td>Спартак</td><td>30</td><td>12</td><td>8</td><td>10</td><td>42</td><td>42</td><td>44</td>

</tr>

<tr>

<td>7</td><td>Локомотив</td><td>30</td><td>11</td><td>10</td><td>9</td><td>31</td><td>25</td><td>43</td>

</tr>

<tr>

<td>8</td><td>Мордовия</td><td>30</td><td>11</td><td>5</td><td>14</td><td>22</td><td>43</td><td>38</td>

</tr>

<tr>

<td>9</td><td>Терек</td><td>30</td><td>10</td><td>7</td><td>13</td><td>30</td><td>30</td><td>37</td>

</tr>

<tr>

<td>10</td><td>Кубань</td><td>30</td><td>8</td><td>12</td><td>10</td><td>32</td><td>36</td><td>36</td>

</tr>

<tr>

<td>11</td><td>Амкар</td><td>30</td><td>8</td><td>8</td><td>14</td><td>25</td><td>42</td><td>32</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>14</td><td>Ростов</td><td>30</td><td>7</td><td>8</td><td>15</td><td>27</td><td>51</td><td>29</td>

</tr>

<tr>

<td>15</td><td>Торпедо</td><td>30</td><td>6</td><td>11</td><td>13</td><td>28</td><td>45</td><td>29</td>

</tr>

<tr>

<td>16</td><td>Арсенал Тула</td><td>30</td><td>7</td><td>4</td><td>19</td><td>20</td><td>46</td><td>25</td>

</tr>

</tbody>

</table>[/html]

Код:

<style>

  table {

    border-collapse: collapse;

    margin: 0px auto;

  }

  th, td {

    border: solid 1px #000;

    padding: 5px;

  }

</style>

<table>

  <thead>

    <tr>

      <td>М</td><td>Команда</td><td>И</td><td>В</td><td>Н</td><td>П</td><td>Заб</td><td>Проп</td><td>О</td>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>1</td><td>Зенит</td><td>30</td><td>20</td><td>7</td><td>3</td><td>58</td><td>17</td><td>67</td>

    </tr>

    <tr>

      <td>2</td><td>ЦСКА</td><td>30</td><td>19</td><td>3</td><td>8</td><td>67</td><td>27</td><td>60</td>

    </tr>

    <tr>

      <td>3</td><td>Краснодар</td><td>30</td><td>17</td><td>9</td><td>4</td><td>52</td><td>27</td><td>60</td>

    </tr>

    <tr>

      <td>4</td><td>Динамо</td><td>30</td><td>14</td><td>8</td><td>8</td><td>53</td><td>36</td><td>50</td>

    </tr>

    <tr>

      <td>5</td><td>Рубин</td><td>30</td><td>13</td><td>9</td><td>8</td><td>39</td><td>33</td><td>48</td>

    </tr>

    <tr>

      <td>6</td><td>Спартак</td><td>30</td><td>12</td><td>8</td><td>10</td><td>42</td><td>42</td><td>44</td>

    </tr>

    <tr>

      <td>7</td><td>Локомотив</td><td>30</td><td>11</td><td>10</td><td>9</td><td>31</td><td>25</td><td>43</td>

    </tr>

    <tr>

      <td>8</td><td>Мордовия</td><td>30</td><td>11</td><td>5</td><td>14</td><td>22</td><td>43</td><td>38</td>

    </tr>

    <tr>

      <td>9</td><td>Терек</td><td>30</td><td>10</td><td>7</td><td>13</td><td>30</td><td>30</td><td>37</td>

    </tr>

    <tr>

      <td>10</td><td>Кубань</td><td>30</td><td>8</td><td>12</td><td>10</td><td>32</td><td>36</td><td>36</td>

    </tr>

    <tr>

      <td>11</td><td>Амкар</td><td>30</td><td>8</td><td>8</td><td>14</td><td>25</td><td>42</td><td>32</td>

    </tr>

    <tr>

      <td>12</td><td>Уфа</td><td>30</td><td>7</td><td>10</td><td>13</td><td>26</td><td>39</td><td>31</td>

    </tr>

    <tr>

      <td>13</td><td>Урал</td><td>30</td><td>9</td><td>3</td><td>18</td><td>31</td><td>44</td><td>30</td>

    </tr>

    <tr>

      <td>14</td><td>Ростов</td><td>30</td><td>7</td><td>8</td><td>15</td><td>27</td><td>51</td><td>29</td>

    </tr>

    <tr>

      <td>15</td><td>Торпедо</td><td>30</td><td>6</td><td>11</td><td>13</td><td>28</td><td>45</td><td>29</td>

    </tr>

    <tr>

      <td>16</td><td>Арсенал Тула</td><td>30</td><td>7</td><td>4</td><td>19</td><td>20</td><td>46</td><td>25</td>

    </tr>

  </tbody>

</table>

Таблица имеет много строк и столбцов и при однородном фоне ее тяжело просматривать. Для улучшения восприятия здесь как раз поможет чередование фонового цвета у четных и нечетных строк. Для этого добавляем следующий CSS-код:

Код:

<style>

  tbody tr:nth-child (odd) {

    background-color: #C9E4F6;/* фон нечетных строк */

  }

  tbody tr:nth-child (even) {

    background-color: #B4DAF2;/* фон четных строк */

  }

</style>

Результат:
[html]<style>

tbody tr:nth-child (odd) {

background-color: #C9E4F6;/* фон нечетных строк */

}

tbody tr:nth-child (even) {

background-color: #B4DAF2;/* фон четных строк */

}

</style>
<table>

<thead>

<tr>

<td>М</td><td>Команда</td><td>И</td><td>В</td><td>Н</td><td>П</td><td>Заб</td><td>Проп</td><td>О</td>

</tr>

</thead>

<tbody>

<tr>

<td>1</td><td>Зенит</td><td>30</td><td>20</td><td>7</td><td>3</td><td>58</td><td>17</td><td>67</td>

</tr>

<tr>

</tr>

<tr>

<td>3</td><td>Краснодар</td><td>30</td><td>17</td><td>9</td><td>4</td><td>52</td><td>27</td><td>60</td>

</tr>

<tr>

<td>4</td><td>Динамо</td><td>30</td><td>14</td><td>8</td><td>8</td><td>53</td><td>36</td><td>50</td>

</tr>

<tr>

<td>5</td><td>Рубин</td><td>30</td><td>13</td><td>9</td><td>8</td><td>39</td><td>33</td><td>48</td>

</tr>

<tr>

<td>6</td><td>Спартак</td><td>30</td><td>12</td><td>8</td><td>10</td><td>42</td><td>42</td><td>44</td>

</tr>

<tr>

<td>7</td><td>Локомотив</td><td>30</td><td>11</td><td>10</td><td>9</td><td>31</td><td>25</td><td>43</td>

</tr>

<tr>

<td>8</td><td>Мордовия</td><td>30</td><td>11</td><td>5</td><td>14</td><td>22</td><td>43</td><td>38</td>

</tr>

<tr>

<td>9</td><td>Терек</td><td>30</td><td>10</td><td>7</td><td>13</td><td>30</td><td>30</td><td>37</td>

</tr>

<tr>

<td>10</td><td>Кубань</td><td>30</td><td>8</td><td>12</td><td>10</td><td>32</td><td>36</td><td>36</td>

</tr>

<tr>

<td>11</td><td>Амкар</td><td>30</td><td>8</td><td>8</td><td>14</td><td>25</td><td>42</td><td>32</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>14</td><td>Ростов</td><td>30</td><td>7</td><td>8</td><td>15</td><td>27</td><td>51</td><td>29</td>

</tr>

<tr>

<td>15</td><td>Торпедо</td><td>30</td><td>6</td><td>11</td><td>13</td><td>28</td><td>45</td><td>29</td>

</tr>

<tr>

<td>16</td><td>Арсенал Тула</td><td>30</td><td>7</td><td>4</td><td>19</td><td>20</td><td>46</td><td>25</td>

</tr>

</tbody>

</table>[/html]

Можно сделать акцент на столбцы оформив вертикальную зебру. Для этого используется все тот же псевдокласс nth-child и применяем его к элементам td. А при наведении на строку выделять ее цветом с помощью псевдокласса hover:

Код:

<style>

  td:nth-child (odd) {

    background-color: #C9E4F6;/* фон нечетных столбцов */

  }

  td:nth-child (even) {

    background-color: #B4DAF2;/* фон четных столбцов */

  }

  tr:hover td{

    background: #B4FFF2;/* фон строки при наведении */

  }

</style>

Результат:
[html]<style>

td:nth-child (odd) {

background-color: #C9E4F6;/* фон нечетных столбцов */

}

td:nth-child (even) {

background-color: #B4DAF2;/* фон четных столбцов */

}

tr:hover td{

background: #B4FFF2;/* фон строки при наведении */

}

</style>
<table>

<thead>

<tr>

<td>М</td><td>Команда</td><td>И</td><td>В</td><td>Н</td><td>П</td><td>Заб</td><td>Проп</td><td>О</td>

</tr>

</thead>

<tbody>

<tr>

<td>1</td><td>Зенит</td><td>30</td><td>20</td><td>7</td><td>3</td><td>58</td><td>17</td><td>67</td>

</tr>

<tr>

</tr>

<tr>

<td>3</td><td>Краснодар</td><td>30</td><td>17</td><td>9</td><td>4</td><td>52</td><td>27</td><td>60</td>

</tr>

<tr>

<td>4</td><td>Динамо</td><td>30</td><td>14</td><td>8</td><td>8</td><td>53</td><td>36</td><td>50</td>

</tr>

<tr>

<td>5</td><td>Рубин</td><td>30</td><td>13</td><td>9</td><td>8</td><td>39</td><td>33</td><td>48</td>

</tr>

<tr>

<td>6</td><td>Спартак</td><td>30</td><td>12</td><td>8</td><td>10</td><td>42</td><td>42</td><td>44</td>

</tr>

<tr>

<td>7</td><td>Локомотив</td><td>30</td><td>11</td><td>10</td><td>9</td><td>31</td><td>25</td><td>43</td>

</tr>

<tr>

<td>8</td><td>Мордовия</td><td>30</td><td>11</td><td>5</td><td>14</td><td>22</td><td>43</td><td>38</td>

</tr>

<tr>

<td>9</td><td>Терек</td><td>30</td><td>10</td><td>7</td><td>13</td><td>30</td><td>30</td><td>37</td>

</tr>

<tr>

<td>10</td><td>Кубань</td><td>30</td><td>8</td><td>12</td><td>10</td><td>32</td><td>36</td><td>36</td>

</tr>

<tr>

<td>11</td><td>Амкар</td><td>30</td><td>8</td><td>8</td><td>14</td><td>25</td><td>42</td><td>32</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>14</td><td>Ростов</td><td>30</td><td>7</td><td>8</td><td>15</td><td>27</td><td>51</td><td>29</td>

</tr>

<tr>

<td>15</td><td>Торпедо</td><td>30</td><td>6</td><td>11</td><td>13</td><td>28</td><td>45</td><td>29</td>

</tr>

<tr>

<td>16</td><td>Арсенал Тула</td><td>30</td><td>7</td><td>4</td><td>19</td><td>20</td><td>46</td><td>25</td>

</tr>

</tbody>

</table>[/html]

Подпись автора: [marquee=left]«МФ» Мы такие разные и всё-таки мы вместе По любым вопросам касающимся форума, обращайтесь ко мне в л/с. [/marquee]

«МФ» Медийный форум

Меню навигации

Пользовательские ссылки

Информация о пользователе

Таблица с чередованием цвета строк

Сообщений 1 страница 1 из 1

Поделиться1Чт, 8 Апр 2021 15:13:02