<!-- 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 -->