<!DOCTYPE html>
<html>
    <body>
      <style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  text-align: middle;
  padding: 5px;
  text-align: left;    
}
 .center {
}
</style>
   <div class="center">
        <h1>Classroom Attendence</h1>
      <h2>English / Period 3</h2>
        <p>Mark who is absent and who is not!</p>
      <table style="width:20%">
  <tr>
    <th></th>
    <th>Alex</th>
    <th>Robin</th>
    <th>Russell</th>
    <th>Nathan</th>
    <th>George</th>
    <th>James</th>
  </tr>
  <tr>
    <td>Present or Absent</td>
    <td id="1"></td>
    <td id="2"></td>
    <td id="3"></td>
    <td id="4"></td>
    <td id="5"></td>
    <td id="6"></td>
  </tr>
</table>
      <p>Alex:</p>
<button type="button1" id = "b1">Present</button>
<button type="button2" id = "b2">Absent</button>
      <p>Robin:</p>
<button type="button3" id = "b3">Present</button>
<button type="button4" id = "b4">Absent</button>
      <p>Russell:</p>
<button type="button5" id = "b5">Present</button>
<button type="button6" id = "b6">Absent</button>
      <p>Nathan:</p>
<button type="button7" id = "b7">Present</button>
<button type="button8" id = "b8">Absent</button>
      <p>George:</p>
<button type="button9" id = "b9">Present</button>
<button type="button10" id = "b10">Absent</button>
      <p>James:</p>
<button type="button11" id = "b11">Present</button>
<button type="button12" id = "b12">Absent</button>
 </div>
    </body>
</html>

strong {
  text-decoration: underline;
}

button {
  background: lightgrey;
  color: black;
  border: none;
  padding: 10px 15px;
  font-size: 1.2em;
  font-family: monospace;
  font-weight: bold;
}
button:active {
  background: grey;
}
document.getElementById('b1').onclick=function(){
  document.getElementById('1').style.background="lightgreen";
  document.getElementById('1').innerHTML = "Present";
}

document.getElementById('b2').onclick=function(){
  document.getElementById('1').style.background="red";
  document.getElementById('1').innerHTML = "Absent";
}

document.getElementById('b3').onclick=function(){
  document.getElementById('2').style.background="lightgreen";
  document.getElementById('2').innerHTML = "Present";
}

document.getElementById('b4').onclick=function(){
  document.getElementById('2').style.background="red";
  document.getElementById('2').innerHTML = "Absent";
}

document.getElementById('b5').onclick=function(){
  document.getElementById('3').style.background="lightgreen";
  document.getElementById('3').innerHTML = "Present";
}

document.getElementById('b6').onclick=function(){
  document.getElementById('3').style.background="red";
  document.getElementById('3').innerHTML = "Absent";
}

document.getElementById('b7').onclick=function(){
  document.getElementById('4').style.background="lightgreen";
  document.getElementById('4').innerHTML = "Present";
}

document.getElementById('b8').onclick=function(){
  document.getElementById('4').style.background="red";
  document.getElementById('4').innerHTML = "Absent";
}

document.getElementById('b9').onclick=function(){
  document.getElementById('5').style.background="lightgreen";
  document.getElementById('5').innerHTML = "Present";
}

document.getElementById('b10').onclick=function(){
  document.getElementById('5').style.background="red";
  document.getElementById('5').innerHTML = "Absent";
}

document.getElementById('b11').onclick=function(){
  document.getElementById('6').style.background="lightgreen";
  document.getElementById('6').innerHTML = "Present";
}

document.getElementById('b12').onclick=function(){
  document.getElementById('6').style.background="red";
  document.getElementById('6').innerHTML = "Absent";
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.