JSFiddle - React, Tailwind, and code Playground

by Ken Sprague

HTML

<script src="https://rawgit.com/dpheitmeyer/34050bc565308a3865ad/raw/00b4d76590b07fcf43998985c506ccfc393a20df/table-highlight.js"></script>
<h1>Harvard University Presidents<br/> in the 20th and 21st Centuries</h1>
<table>
  <thead>
    <!-- add "scope" attribute and appropriate value 
to the "th" elements in order to make the 
table more accessible -->
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Term</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Drew Gilpin Faust</td>
      <td>2001-present</td>
    </tr>
    <tr>
      <td>Lawrence H. Summers</td>
      <td>2001-2006</td>
    </tr>
    <tr>
      <td>Neil L. Rudenstine</td>
      <td>1991-2001</td>
    </tr>
    <tr>
      <td>Derek Bok</td>
      <td>1971-1991</td>
    </tr>
    <tr>
      <td>Nathan Marsh Pusey</td>
      <td>1953-1971</td>
    </tr>
    <tr>
      <td>James Bryant Conant</td>
      <td>1933-1953</td>
    </tr>
    <tr>
      <td>A(bbott) Lawrence Lowell</td>
      <td>1909-1933</td>
    </tr>
    <tr>
      <td>Charles William Eliot</td>
      <td>1869-1909</td>
    </tr>
  </tbody>
</table>
<p>
  <a href="http://www.harvard.edu/about-harvard/harvard-glance/history-presidency">Read more about the History of the Presidency at Harvard</a>
</p>

CSS

body {
  font-family: helvetica, sans-serif;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  border: thin solid gray;
  padding: 0.25em;
}

th.highlight {
  background-color: #ccc;
}

td.highlight {
  background-color: #ffe;
}

JavaScript

$(document).ready(function() {
  $('table').tableHighlight();
});