Creating Table with HTML

HTML simple table for collecting data.

Let’s make a grocery list together :)

<table>
<thead>
<tr>
<th>Name</th>
<th>Aisle</th>
<th>Price</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lays Chips</td>
<td>2</td>
<td>$4.00</td>
<td>2</td>
</tr>
<tr>
<td>Coffe beans</td>
<td>1</td>
<td>$7.00</td>
<td>2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>N/A</td>
<td>$5.50</td>
<td>N/A</td>
</tr>
</tfoot>
</table>
  • We create a table by first adding the <table></table>element.
  • Then for the row (Horizontal), we insert <tr></tr>.
  • Within table rows, we add table cells. There are two types of table cells. Table data (columns/vertical) <td></td>and Table header <th></th>.
  • These two allow us to differentiate between table data and labels.
  • It is a best practice to wrap <th></th>with the table head <thead></thead>elements.
  • It is also a best practice to wrap all the table data inside <tbody></tbody>elements
  • Another organizational element would be <tfoot></tfoot>, the position of this element does not matter, it will always show up at the bottom.

Having these tips and tricks will allow a semantic rich table and in the future, we will be able to play around with CSS.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store