Began to learn HTML / CSS. I try to create a multiplication table. It seems everything created by example , but the question arose - is it possible to simplify the process.

For example, in order to give a style for values ​​on a diagonal (in a table), I needed to prescribe a class in each specific cell. Is it possible to somehow simplify this, otherwise if there are not 12 cells in this way, but 50-100, then a lot of routine is added?

Thank you in advance! Sorry for my ignorance if anything, I promise will be corrected soon)

PS I will be grateful and other comments on the code.

table { width: auto; margin: auto; border-collapse: collapse; } caption { width: auto; font-family: Times, Tahoma, Verdana, serif; font-size: 20pt; font-style: italic; color: #007a4d; } th { font-family: Verdana; font-size: 14pt; font-weight: bold; text-align: center; background: #ffff99; width: 30px; height: 20px; padding: 5px; } th.th1 { background: none; } td { font-family: Verdana; font-size: 14pt; border: 1px solid black; text-align: center; width: 30px; height: 20px; padding: 5px; } td.td1 { border: none; font-weight: bold; text-align: center; background: #ffff99; width: 30px; height: 20px; } td.td2 { background: #ffff99; font-weight: bold; text-align: center; background: #ffff99; width: 30px; height: 20px; } 
 <!DOCTYPE html> <body> <table> <caption>Табличка умножения [Вариант 2]</caption> <tr> <th class="th1"></th> <th>1</th> <th>2</th> <th>3</th> <th>4</th> <th>5</th> <th>6</th> <th>7</th> <th>8</th> <th>9</th> <th>10</th> <th>11</th> <th>12</th> </tr> <tr> <td class="td1">1</td> <td class="td2">1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>10</td> <td>11</td> <td>12</td> </tr> <tr> <td class="td1">2</td> <td>2</td> <td class="td2">4</td> <td>6</td> <td>8</td> <td>10</td> <td>12</td> <td>14</td> <td>16</td> <td>18</td> <td>20</td> <td>22</td> <td>24</td> </tr> <tr> <td class="td1">3</td> <td>3</td> <td>6</td> <td class="td2">9</td> <td>12</td> <td>15</td> <td>18</td> <td>21</td> <td>24</td> <td>27</td> <td>30</td> <td>33</td> <td>36</td> </tr> <tr> <td class="td1">4</td> <td>4</td> <td>8</td> <td>12</td> <td class="td2">16</td> <td>20</td> <td>24</td> <td>28</td> <td>32</td> <td>36</td> <td>40</td> <td>44</td> <td>48</td> </tr> <tr> <td class="td1">5</td> <td>5</td> <td>10</td> <td>15</td> <td>20</td> <td class="td2">25</td> <td>30</td> <td>35</td> <td>40</td> <td>45</td> <td>50</td> <td>55</td> <td>60</td> </tr> <tr> <td class="td1">6</td> <td>6</td> <td>12</td> <td>18</td> <td>24</td> <td>30</td> <td class="td2">36</td> <td>42</td> <td>48</td> <td>54</td> <td>60</td> <td>66</td> <td>72</td> </tr> <tr> <td class="td1">7</td> <td>7</td> <td>14</td> <td>21</td> <td>28</td> <td>35</td> <td>42</td> <td class="td2">49</td> <td>56</td> <td>63</td> <td>70</td> <td>77</td> <td>84</td> </tr> <tr> <td class="td1">8</td> <td>8</td> <td>16</td> <td>24</td> <td>32</td> <td>40</td> <td>48</td> <td>56</td> <td class="td2">64</td> <td>72</td> <td>80</td> <td>88</td> <td>96</td> </tr> <tr> <td class="td1">9</td> <td>9</td> <td>18</td> <td>27</td> <td>36</td> <td>45</td> <td>54</td> <td>63</td> <td>72</td> <td class="td2">81</td> <td>90</td> <td>99</td> <td>108</td> </tr> <tr> <td class="td1">10</td> <td>10</td> <td>20</td> <td>30</td> <td>40</td> <td>50</td> <td>60</td> <td>70</td> <td>80</td> <td>90</td> <td class="td2">100</td> <td>110</td> <td>120</td> </tr> <tr> <td class="td1">11</td> <td>11</td> <td>22</td> <td>33</td> <td>44</td> <td>55</td> <td>66</td> <td>77</td> <td>88</td> <td>99</td> <td>110</td> <td class="td2">121</td> <td>132</td> </tr> <tr> <td class="td1">12</td> <td>12</td> <td>24</td> <td>36</td> <td>48</td> <td>60</td> <td>72</td> <td>84</td> <td>96</td> <td>108</td> <td>120</td> <td>132</td> <td class="td2">144</td> </tr> </table> </body>

  • On some SCSS you could write something like @for $i from 2 through 7 { tr:nth-child($i) td:nth-child($i + 1) { background-color: black; } } @for $i from 2 through 7 { tr:nth-child($i) td:nth-child($i + 1) { background-color: black; } } .... and in the usual css it is unlikely to automate. Only by the script ....... if the table is built dynamically, then there only need to set the condition in the condition of building rows / columns - Alexey Shimansky

1 answer 1

The pseudo- class nth-child can help if we are talking about CSS. In particular, odd (odd) and even (even) element numbers. There you can also use expressions for more flexible styling.

If you want to complicate the behavior of each individual cell and make this behavior unique, then you need JavaScript.

  • And how to prescribe a diagonal through nth-child so that you do not have to write a sheet from table:nth-child(1) td, table:nth-child(2) td, table:nth-child(3) td ... and so Further? - Alexey Shimansky
  • I'm afraid I have to write a sheet. This thread can also help. The example in this answer can be rewritten in JS and run it when the page loads, dynamically putting the classes diagonally. - Mr. Brightside
  • one
    Therefore, the answer with nth-child meaningless. Because in this case it is easier to assign a class to each cell. - Alexey Shimansky
  • @ Alexey Shimansky in other words, you yourself answered your question. - Mr. Brightside
  • one
    In other words - it is not necessary to advise meaningless things ;-) - Alexey Shimansky