<!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> function createLine(color, position, flags, name, ) { return ` <tr id="selections"> <td class="selection"> <div class="classified" style="background-color: ${color}"></div> <div>${position}</div> <div><img src="./../assets/icon=${flags}.svg" /></div> <span>${name}</span> </td> <td class="number">0</td> <td class="number">0</td> <td class="number">0</td> <td class="number">0</td> <td class="number">0</td> <td class="number">0</td> <td class="number">0</td> <td class="number">0</td> </tr> ` } document.querySelector("#selections").innerHTML = createLine("#7b1e3e", "1", "qatar", "Catar") + createLine("#7b1e3e", "2", "ecuador", "Equador") + createLine("#000", "3", "senegal", "Senegal") + createLine("#000", "4", "netherlands", "Holanda") <!-- language: lang-css --> * { margin: 0; padding: 0; box-sizing: border-box; } body * { font-family: "Roboto", sans-serif; } h3 { padding: 16px; } th { width: 25px; min-width: 25px; height: 12px; } td { display: flex; gap: 10px; border-bottom: 1px solid #9aa0a6; border-top: 1px solid #9aa0a6; } #main { height: 100%; display: flex; flex-direction: column; align-items: center; } .container { border-spacing: 0; border-radius: 6px; background-color: #1d1c19; color: #ffff; } .team { text-align: left; padding: 8px 16px 8px; } .selection img { width: 29px; } .selection { width: 400px; } .selection div, span { padding-top: 8px; } .classified { width: 3px; height: 40px; background-color: #7b1e3e; } .info { padding-left: 3px; padding-right: 3px; height: 12px; } .number { font-size: 14px; height: 40px; text-align: center; vertical-align: middle; } <!-- language: lang-html --> <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Tabela de Classificação</title> <link rel="stylesheet" href="./../css/standing.css" /> <link rel="shortcut icon" href="./../assets/2022_FIFA_World_Cup.svg" type="image/x-icon" /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@700;900&display=swap" rel="stylesheet" /> </head> <body> <div id="main"> <h3>Grupo A</h3> <table class="container"> <tr> <th class="team"> <div>Equipe</div> </th> <th class="info"> <div> <span>Pts</span> </div> </th> <th class="info"> <div> <span>PJ</span> </div> </th> <th class="info"> <div> <span>VIT</span> </div> </th> <th class="info"> <div> <span>E</span> </div> </th> <th class="info"> <div> <span>DER</span> </div> </th> <th class="info"> <div> <span>GM</span> </div> </th> <th class="info"> <div> <span>GC</span> </div> </th> <th class="info"> <div> <span>SG</span> </div> </th> </tr> <tr id="selections"> <td class="selection"> <div class="classified"></div> <div>1</div> <div><img src="./../assets/icon=qatar.svg" /></div> <span>Catar</span> </td> <td class="number">0</td> <td class="number">0</td> <td class="number">0</td> <td class="number">0</td> <td class="number">0</td> <td class="number">0</td> <td class="number">0</td> <td class="number">0</td> </tr> </tr> </table> </div> <script src="./JS/main-standings.js"></script> </body> </html> <!-- end snippet -->