I am working on fetching data from an API into table format using JavaScript. I received the data perfectly
ut cannot apply Bootstrap onto the table header part.
<!DOCTYPE html>
<head>
<title>Sports Api</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</head>
<body>
<script>
async function Sports(){
let Api = "https://inshortsapi.vercel.app/news?category=sports";
let result =await(await fetch(Api)).json();
document.write(` <table class='table'>
<thead class='thead-dark'>
<tr><th>SR NO</th>
<th> AUTHOR NAME</th>
<th>CONTENT</th>
<th>DATE </th>
</tr></thead>`);
for(var i=0;i<result.data.length;i++)
{
document.write(`<tbody><tr>
<td>${i+1}</td>
<td>${result.data[i]["author"]}</td>
<td>${result.data[i]["content"]}</td>
<td>${result.data[i]["date"]}</td>
</tr></tbody>`)
}
document.write("</table>")
}
Sports();
</script>
</body>
</html>
I want to Table like this []
I didn’t get the result I wanted and got this type of table.