Timeline via Table Tag

Making a decent timeline with a table

by Daniel Sumner Magruder

HTML

<section class="timeline">
  <table align="center">
    <tr>
      <td><p><span>TITLE</span><br>Subtitle</p></td>
      <td class="pad"></td>
      <td class="image"> <img src="https://stevenaarmstrong.files.wordpress.com/2015/06/harvard_wreath_logo_1-svg.png"></td>
      <td class="pad"></td>
      <td><p>DATE</p></td>
    </tr>
  </table>
  
  <table align="center">
    <tr>
      <td><p>DATE</p></td>
      <td class="pad"></td>
      <td class="image"> <img src="https://stevenaarmstrong.files.wordpress.com/2015/06/harvard_wreath_logo_1-svg.png"></td>
      <td class="pad"></td>
      <td><p><span>TITLE</span><br>Subtitle</p></td>
    </tr>
  </table>
  
  <table align="center">
    <tr>
      <td><p><span>TITLE</span><br>Subtitle</p></td>
      <td class="pad"></td>
      <td class="image"> <img src="https://stevenaarmstrong.files.wordpress.com/2015/06/harvard_wreath_logo_1-svg.png"></td>
      <td class="pad"></td>
      <td><p>DATE</p></td>
    </tr>
  </table>
</section>

CSS

/* Container for the timeline */
section.timeline {
  position: relative;
  margin-top: 3em;
  margin-bottom: 3em;
}

/* The actual line */
section.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -2px;
  height: 100%;
  width: 4px;
  background: #225172;
  z-index: -1;
}

/* Add spacing between elements */
section.timeline table {
  margin-bottom: 3rem;
}

/* Padding for lots of text */
section.timeline td {
  padding: 2rem;
}

/* Since we are forcing absolute position, the table align property will ignore
the location of the middle element, so we add two elements - one on each side of the
image - to pad the image */
section.timeline td.pad {
  padding: initial; /* Remove padding. Not necessarily needed...*/
  width: 75px; /* Half of the image size*/
}

/* Force image to be in the middle.*/
section.timeline td.image {
  padding: initial;
  position: absolute;
  width: 150px;
  height: 150px;
  left: 50%; /* Center it */
  margin-left: -75px; /* Correct for image size*/
}

/* Set up image size */
section.timeline td.image img {
  width: 150px;
  height: 150px;
}

/* All text is of 16px font size */
section.timeline td p {
  font-size: 16px;
}


/* SELCTORS */

/* Odd selectors will have the information on the left and the 
date on the right. The first child contains the title / subtitle. The last has the date*/

/* On the right of the image, align text left*/
section.timeline table:nth-child(odd) td:last-child {
  text-align:left;
  opacity: 0.7;
}

/* On the left of the image, align text right*/
section.timeline table:nth-child(odd) td:first-child {
  text-align:right;
}

/* On the left of the image, span is used for specifying title*/
section.timeline table:nth-child(odd) td:first-child span{
  color:#0084A3;
  font-size: 24px;
}



/* Even selectors will have the information on the right and the 
date on the left. The first child contains the date. The last has the title / subtitle*/


/* On the right of the image,...