Table Styling

by Antony Muriuki

HTML

<table title="Employment status verses Living Conditions">
  <caption>Employment status verses Living Conditions</caption>
  <thead>
  <tr><th colspan="3" class="caption">Employment status verses Living Conditions</th></tr>
    <tr>
      <th>Name</th>
      <th>State</th>
      <th>Condition</th>
    </tr>
  </thead>
  <tr>
    <td>Antony</td>
    <td>Employed</td>
    <td>Poor</td>
  </tr>
  <tr>
    <td>Grace</td>
    <td>Student</td>
    <td>Wealthy</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Sponsored</td>
    <td>Self actualization</td>
  </tr>
  <tr>
    <td>Christine</td>
    <td colspan="2" class="center"><i>Unknown</i></td>
  </tr>
  <tr>
    <td rowspan="2">James and John</td>
    <td>Fishermen</td>
    <td>Spiritual</td>
  </tr>
  <tr>
    <td>Brothers</td>
    <td>Disciples</td>
  </tr>
</table>
<button onclick="trans()">Change Name</button>

CSS

table {
  width: 100%;
  border-collapse: collapse;
  font-family: calibri;
}

tr,
th,
td {
  border: 2px solid black;
  padding: 10px 10px 10px 10px;
}

thead {
  background-color: black;
  color: white;
}

tbody {
  background-color: white;
  color: black;
}
.center {
  text-align: center;
}
.caption { 
    text-align: center;
}
button {
  border-radius: 5px;
  background-color: darkblue;
  color: white;
  height: 30px;
}

JavaScript

function trans() {
  var table = document.getElementById("table"),
      tr = table.getElementsByTagName('tr')[2],
      td = tr.getElementsByTagName('td')[0];

      td.innerHTML = "Julius";
}