title: How can I lay out a timeline without using table markup?
body: <p>I'm trying to build a timeline to display bookings for a restaurant. I was trying to make it by using a table and to colspan the cols by changing its background but in another <a href="https://stackoverflow.com/questions/55303862/how-can-i-reference-a-table-cell-by-its-position/55304671#55304671">post</a> people suggested me that it's a bad practise to do it.</p>
  
  <p>So the question it which is the best practise to build a timeline in html?</p>
  
  <p>Here is the table markup:</p>
  
  <p><a href="https://i.stack.imgur.com/8pT79.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8pT79.png" alt="enter image description here"></a></p>
  
  <p>The user will input the data and time for the start time of booking and the end time he will also be able to add the name of who booked the table that i will display inside the colspaned cell. </p>
  
  <p>I divided the table by 96 cols so each 4 cols will equals to 15 mins.
  Then the data will be saved in an XML and sent to the Point Of Sale of the restaurant so the booking will be also synchronized on the POS</p>
  
  <p>The table is build as the following</p>
  
  <pre><code>       &lt;table class="table table-hover" border="1" style="border:none; width:100%"&gt;
                                      &lt;tbody&gt;
                                          &lt;th&gt;33&lt;/th&gt;&lt;td&gt;&lt;/td&gt; // &lt;td&gt;&lt;/td&gt; x 96
                                      &lt;/tbody&gt;
                                  &lt;/table&gt;
  </code></pre>
  
  <p>Here is <a href="http://jsfiddle.net/yaspw74L/" rel="nofollow noreferrer">jsfiddle</a> full code of a table, the  data is load from the server so that data are dynamic</p>