JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<h1>Fish in Captivity</h1>
<table>
<caption>Fish</caption>
<tr>
<th>Name</th>
<th>Breed</th>
<th>Weight</th>
<th>Sex</th>
</tr>
<tr>
<td id="jeremyName"></td>
<td id="jeremyBreed"></td>
<td id="jeremyWeight"></td>
<td id="jeremySex"></td>
</tr>
<tr>
<td id="loganName"></td>
<td id="loganBreed"></td>
<td id="loganWeight"></td>
<td id="loganSex"></td>
</tr>
<tr>
<td id="stephanieName"></td>
<td id="stephanieBreed"></td>
<td id="stephanieWeight"></td>
<td id="stephanieSex"></td>
</tr>
<tr>
<td id="emilyName"></td>
<td id="emilyBreed"></td>
<td id="emilyWeight"></td>
<td id="emilySex"></td>
</tr>
</table>
</body>
CSS
th {
color: red;
}
body {
background-color: darkgray;
}
table {
border: 2px solid black;
border-collapse: collapse;
width: 100%;
font-size: 50px;
}
h1 {
text-align: center;
font-size: 100px;
}
JavaScript
function Fish(name, breed, weight, sex) {
this.name = name;
this.breed = breed;
this.weight = weight;
this.sex = sex;
}
var jeremy = new Fish("Jeremy", "Salmon", 2.25, "Male");
var logan = new Fish("Logan", "Tuna", 3.48, "Male");
var stephanie = new Fish("Stephanie", "Bass", 5, "Female");
var emily = new Fish("Emily", "Catfish", 4.75, "Female");
document.getElementById("jeremyName").innerHTML = jeremy.name;
document.getElementById("jeremyBreed").innerHTML = jeremy.breed;
document.getElementById("jeremyWeight").innerHTML = jeremy.weight;
document.getElementById("jeremySex").innerHTML = jeremy.sex;
document.getElementById("loganName").innerHTML = logan.name;
document.getElementById("loganBreed").innerHTML = logan.breed;
document.getElementById("loganWeight").innerHTML = logan.weight;
document.getElementById("loganSex").innerHTML = logan.sex;
document.getElementById("stephanieName").innerHTML = stephanie.name;
document.getElementById("stephanieBreed").innerHTML = stephanie.breed;
document.getElementById("stephanieWeight").innerHTML = stephanie.weight;
document.getElementById("stephanieSex").innerHTML = stephanie.sex;
document.getElementById("emilyName").innerHTML = emily.name;
document.getElementById("emilyBreed").innerHTML = emily.breed;
document.getElementById("emilyWeight").innerHTML = emily.weight;
document.getElementById("emilySex").innerHTML = emily.sex;