27-8-21 Task

JavaScript Code

Preview Click Here

const tableData = [
  {
    studentName: "Abc",
    studentAge: 20,
    studentCity: "Hyd",
  },
  {
    studentName: "def",
    studentAge: 28,
    studentCity: "mumbai",
  },
  {
    studentName: "ghi",
    studentAge: 32,
    studentCity: "Delhi",
  },
];
var data = "<tbody>";
i = 0;
while (i < tableData.length) {
  data += "<tr>";
  data += "<td>" + tableData[i].studentName + "</td>";
  data += "<td>" + tableData[i].studentAge + "</td>";
  data += "<td>" + tableData[i].studentCity + "</td>";
  data += "</tr>";
  i++;
}
data += "</tbody>";
document.querySelector(".tableData").innerHTML = data;

HTML Code

<body>
    <table>
      <tr>
        <th>student Name</th>
        <th>student Age</th>
        <th>student City</th>
      </tr>
      <tbody class="tableData"></tbody>
    </table>
    <script src="script.js"></script>
  </body>

CSS Code

body {
  font-family: sans-serif;
}
table {
  border-collapse: collapse;
}
th,
tr,
td {
  border: 0.9px solid;
}
td {
  padding-right: 3px;
}
tr td:nth-child(2) {
  text-align: right;
}

Latest

Leave A Reply

Please enter your comment!
Please enter your name here