I am going through the fundamentals of the frontend, so I have a lot of probably absolutely stupid questions. In general, this time I do not know how to assign a frame and color to each cell separately in the table. As in the picture. enter image description here

  • one
    So what's the difficulty? Identify each cell (for example, <td id="cell1">...</td> ), then set its styles: (for example: #cell1 { border: 5px solid #f00; } ) - check1st
  • class is more correct than id - quaresma89
  • Pseudo-class : nth-child and his ilk - Deonis
  • oh hell thank you - fff
  • my mistake was in writing border: 2 px solid red; And on the "text" color, it did not respond thanks! - fff

2 answers 2

 table{ width:100%; max-width: 500px; margin: 0 auto; table-layout: fixed; background: #FEF834; border: 2px solid #17152B; } table td{ border: 2px solid #BCB946; padding: 15px; } table tr:nth-child(1) td:nth-child(1){ border-color: #ED4630; background: #fff; } table tr:nth-child(1) td:nth-child(2){ border-color: #222200; } table tr:nth-child(1) td:nth-child(3){ border-color: #2242E3; background: #6CF8FC; } table tr:nth-child(2) td:nth-child(1){ border-color: #FFFEF1; background: #E964FE; } table tr:nth-child(2) td:nth-child(2){ border-color: #B23322; background: #EC52A1; } table tr:nth-child(2) td:nth-child(3){ border-color: #A161B9; background: #ACB02D; } 
 <table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table>

    You can apply separate styles for each element of your table. For example:

     <!DOCTYPE HTML> <html> <head> <meta charset=utf-8"> <title>Рамка</title> </head> <body> <table style="width:100%"> <tr> <th style="border:2em solid #2f4f4f">Firstname</th> <th style="border:2em solid #228b22">Lastname</th> <th style="border:2em solid #ffa500">Age</th> </tr> <tr> <td style="border:2em solid #0000cd">Eve</td> <td style="border:2em solid #006400">Jackson</td> <td style="border:2em solid #ffff00">94</td> </tr> </table> </body> </html>

    Documentation W3 + colors CTML . This technique is recommended by Google’s speed validator. So the scanner loads the visible part of the page faster.