skapa table i javascript

Hej!

jag sitter på denna kod nu och den skriver ut li punkter bara.

function quizScore() {
  highScore.sort(function (a, b) {
    return a.tid - b.tid
  })
  highScore = highScore.slice( 0, 5 )

  for (i = 0; i < highScore.length; i++) {
    let li = document.createElement('li')
    li.className = 'HighScore list'
    let values = highScore[i]
    li.innerHTML = '<b>' + values.smeknamn + '</b>' + ' klarade quizet på ' + '<b>' + values.tid + '</b>' + ' sekunder'
    topHighScore.appendChild(li)
    document.getElementById('startombtn').hidden = false

  }
}

problemet är att jag har sett att det blir riktigt fult med li punkterna, blir inte på "samma" rad typ, så blir inte snyggt alls.

Vill därför bygga om detta till en tabell vilket blir snyggast tror jag, men vet inte riktigt hur jag löser detta.

med att bygga in for loopen med highscore så den "td" hämtar values.smeknamn och values.tid.

  for (let i = 0; i < highScore.length; i++) {
    let table = document.getElementById('table')
    table = highScore[i]
    td[0] = values.smeknamn
    td[1] = values.tid
    topHighScore.appendChild(table)
  }

provade med detta men är helt fel märker jag

jo, men känns som jag glömt mer. Är rätt ny inom detta, och har egentligen aldrig byggt en table i javascript därför jag behöver lite hjälp haha.

Vad är det jag gör fel, eller missar?

@anderjo4: sorry ber om ursäkt

		<div id="topHighScore">
			<table id="table" border ="1" hidden>
				<tr>
				   <td>Första cellen på första raden</td>
				   <td>Andra cellen på första raden</td>
				</tr>
				<tr>
				   <td>Första cellen på andra raden</td>
				   <td>Andra cellen på andra raden</td>
				</tr>
				<tr>
				   <td>Första cellen på tredje raden</td>
				   <td>Andra cellen på tredje raden</td>
				</tr>
			 </table>
		</div>

där är min html kod.

och här är min js kod

function quizScore () {
  highScore.sort(function (a, b) {
    return a.tid - b.tid
  })
  highScore = highScore.slice(0, 5)

  for (let i = 0; i < highScore.length; i++) {
    let li = document.createElement('li')
    li.className = 'HighScore list'
    let values = highScore[i]
    li.innerHTML = '<b>' + values.smeknamn + '</b>' + ' klarade quizet på ' + '<b>' + values.tid + '</b>' + ' sekunder'
    topHighScore.appendChild(li)
    document.getElementById('startombtn').hidden = false
  }
}

skriver ut den i li nu bara, men är så sjukt fult och vill skriva ut det i en table.

Vi ska jobba med js i skolan, och dom vill inte ha Jqeury tyvärr.

Det jag behöver hjälp är med att fixa så att "highScore" hämtar och skriver ut values.smeknamn och values.tid i TD i table om du förstår hur jag tänker. Om jag nu ens tänker rätt menar jag.

nästan så.

har gjort en highscore lista, en topp 5 lista där dom med 5 bästa tiderna skrivs ut.

det skrivs nu ut i li format (punkter).

men det är svin fult, för har ingen width på det, och tycker att table skulle bli mycket snyggare.

Vill därför bygga om den for loopen till table. och values.smeknamn hämtar smeknamnet och skriver ut, lika så med values.tid. men jag vet att i <table> finns det <tr> och <td> vilket jag antar att man ska få ut texten i td? Men vet inte hur jag fixar till det, så att det blir en table och hämtar från highscore och skriver sedan ut values.smeknamn, values.tid i <td>, förstår du bättre nu annars? haha är rätt ny inom detta, så hoppas du förstår